Populating Dropdowns in Connector UI

When building the UI for Triggers and Actions, it is sometimes necessary to populate a dropdown with a list of options fetched from the associated App's API. To enable assigning a user to an issue in Jira, for example, it's necessary to fetch a list of potential assignees from the Jira API. The Rollout DropdownInput component takes a fetchOptions prop which returns an array of objects with id and name properties (or a Promise whose fulfilled value is the same).

When building a Connector for your own App, the simplest way to pass data from your frontend application to the embedded Rollout connector UI is to leverage the hostAppContext prop of the RolloutProvider. This will enable you to, for example, access a client for your backend API. Values provided in the hostAppContext prop can be accessed in the UI through the useHostAppContext hook.

Example of Populating a Dropdown by Using hostAppContext#

In this example, there is an assignee input param, the value of which must be selected from among the users of the connector's app.

In Your App#

const rolloutJwt = await fetchRolloutJwt();
const myApiClient = new APIClient();

return (
  <RolloutProvider 
    hostAppContext={{ myApiClient }} 
    apiBaseUrl="https://my-app.rolloutapp.com/api"
    token={rolloutJWT}
  >
    <AutomationsManager />
  </RolloutProvider>
);

In the Trigger or Action UI#

import { 
  defineUIComponent, 
  DropdownInput, 
  useHostAppContext 
} from "@rollout/framework/ui";

import type { inputParamsSchema } from "./input";

type User = {
  id: string;
  username: string;
};
type HostAppContext = {
  myApiClient: {
    fetchUsers: () => Promise<User[]>;
  }
};

const { myApiClient } = useHostAppContext() as HostAppContext;

export const UI = defineUIComponent<typeof inputParamsSchema>((props) => {
  const { b } = props;

  return (
    <>
      <DropdownItem 
        bind={b.assignee}
        fetchOptions={async () => {
          const users = await myApiClient.fetchUsers();
          return users.map((u) => ({ id: u.id, name: u.username }));
        }}
      />
    </>
  );