Changes to the UI library for a few items:

1. Update the API class to use the updated API behavior with userActions
2. Update the User Actions concepts so that the action menu now looks for QUICK_ACTIONS, which would be a new subType of User Actions (see integration-base for implementation details there). This also removes any pre-baked user actions from the dropdown.
3. Update the form population to allow for initialData where appropriate
4. Update the form handling to make sure keystrokes are added to the formData so that it properly submits
5. Update the UserActionModal to handle a bit more streamlined
6. Update the IntegrationHorizontal componet and List to keep the heights at a max

TODO:
[] Iterate over time. These components will need to be considered for their flexibility and configurability so that an adopter doesn't feel compelled to ditch the frigg-built/managed components in favor of rolling their own.
[] Make a cleaner distinction what is "throwaway, demonstration UI" and what is our true UI library.

packages/ui/lib/api/api.js

@@ -13,6 +13,8 @@ export default class API {
     this.endpointIntegrations = "/api/integrations";
     this.endpointIntegration = (id) => `/api/integrations/${id}`;
     this.endpointSampleData = (id) => `/api/demo/sample/${id}`;
+    this.endpointIntegrationUserActions = (id) =>
+      `/api/integrations/${id}/actions`;
     this.endpointIntegrationUserActionOptions = (id, action) =>
       `/api/integrations/${id}/actions/${action}/options`;
     this.endpointIntegrationUserActionSubmit = (id, action) =>
@@ -179,12 +181,17 @@ export default class API {
     return this._post(url);
   }
 
-  async getUserActionOptions(integrationId, selectedUserAction) {
+  async getUserActions(integrationId, actionType) {
+    const url = this.endpointIntegrationUserActions(integrationId);
+    return this._post(url, { actionType });
+  }
+
+  async getUserActionOptions(integrationId, selectedUserAction, data) {
     const url = this.endpointIntegrationUserActionOptions(
       integrationId,
       selectedUserAction
     );
-    return this._get(url);
+    return this._post(url, data);
   }
 
   async submitUserAction(integrationId, selectedUserAction, data) {

packages/ui/lib/index.js

@@ -1,5 +1,4 @@
 import "./index.css";
-
 import { Button } from "./components/button.jsx";
 import { Input } from "./components/input.jsx";
 import { LoadingSpinner } from "./components/LoadingSpinner.jsx";
@@ -8,6 +7,7 @@ import {
   IntegrationVertical,
   IntegrationList,
   RedirectFromAuth,
+  UserActionModal,
 } from "./integration";
 
 export {
@@ -18,4 +18,5 @@ export {
   IntegrationVertical,
   IntegrationList,
   RedirectFromAuth,
+  UserActionModal,
 };

packages/ui/lib/integration/IntegrationHorizontal.jsx

@@ -45,21 +45,27 @@ function IntegrationHorizontal(props) {
   const api = new Api(friggBaseUrl, authToken);
 
   useEffect(() => {
-    const userActions = [
-      {
-        title: "Get Sample Data",
-        action: "SAMPLE_DATA",
-      },
-    ];
-    Object.keys(props.data.userActions || {}).map((key) => {
-      userActions.push({
-        title: props.data.userActions[key].title,
-        description: props.data.userActions[key].description,
-        action: key,
+    if (props.data.id) {
+      const loadUserActions = async () => {
+        const userActionRes = await api.getUserActions(
+          integrationId,
+          "QUICK_ACTION"
+        );
+        const userActions = [];
+        Object.keys(userActionRes || {}).map((key) => {
+          userActions.push({
+            title: userActionRes[key].title,
+            description: userActionRes[key].description,
+            action: key,
+          });
+        });
+        setUserActions(userActions);
+      };
+      loadUserActions().catch((error) => {
+        console.error(error);
       });
-    });
-    setUserActions(userActions);
-  }, [props.data.userActions]);
+    }
+  }, []);
 
   const getAuthorizeRequirements = async () => {
     setIsProcessing(true);
@@ -108,7 +114,7 @@ function IntegrationHorizontal(props) {
   return (
     <>
       <div
-        className="flex flex-nowrap p-4 bg-white rounded-lg shadow-xs"
+        className="flex flex-nowrap p-4 bg-white rounded-lg shadow-xs h-[128px]"
         data-testid="integration-horizontal"
       >
         <div className="flex flex-1">

packages/ui/lib/integration/IntegrationList.jsx

@@ -99,7 +99,7 @@ const IntegrationList = (props) => {
   return (
     <>
       {isloading && (
-        <div className="grid gap-6 lg:col-span-1 lg:grid-cols-1 xl:col-span-2 xl:grid-cols-2 2xl:col-span-3 2xl:grid-cols-3">
+        <div className="grid gap-6 lg:col-span-1 lg:grid-cols-1 xl:col-span-2 xl:grid-cols-2 2xl:col-span-3 2xl:grid-cols-3 grid-auto-rows-[128px]">
           <IntegrationSkeleton layout={props.componentLayout} />
           <IntegrationSkeleton layout={props.componentLayout} />
           <IntegrationSkeleton layout={props.componentLayout} />

packages/ui/lib/integration/QuickActionsMenu.jsx

@@ -33,7 +33,7 @@ function QuickActionsMenu({
   }
 
   async function handleMenuItemClick(userAction) {
-    if (userAction.action === "SAMPLE_DATA") {
+    if (userAction.action === "GET_SAMPLE_DATA") {
       await getSampleData();
       return;
     }

packages/ui/lib/integration/modals/UserActionModal.jsx

@@ -8,14 +8,15 @@ import { useToast } from "../../components/use-toast";
 function UserActionModal({
   closeConfigModal,
   integrationId,
+  initialData,
   userActionDetails,
   friggBaseUrl,
   authToken,
 }) {
   const [jsonSchema, setJsonSchema] = useState({});
   const [uiSchema, setUiSchema] = useState({});
   const [isLoading, setIsLoading] = useState(true);
-  const [formData, setFormData] = useState({});
+  const [formData, setFormData] = useState(initialData);
   const api = useMemo(
     () => new API(friggBaseUrl, authToken),
     [friggBaseUrl, authToken]
@@ -27,10 +28,12 @@ function UserActionModal({
       api,
       integrationId,
       selectedUserAction: userActionDetails.action,
+      initialData,
     })
       .then((response) => {
         setJsonSchema(response.jsonSchema);
         setUiSchema(response.uiSchema);
+        setFormData(response.data);
       })
       .finally(() => setIsLoading(false));
   }, [api, integrationId, userActionDetails.action]);
@@ -119,14 +122,17 @@ const getUserActionOptions = async ({
   api,
   integrationId,
   selectedUserAction,
+  initialData,
 }) => {
   const response = await api.getUserActionOptions(
     integrationId,
-    selectedUserAction
+    selectedUserAction,
+    { ...initialData }
   );
 
   return {
     jsonSchema: response.jsonSchema,
     uiSchema: response.uiSchema,
+    data: response.data,
   };
 };

packages/ui/package.json

@@ -22,6 +22,7 @@
   },
   "scripts": {
     "dev": "vite",
+    "dev:build": "vite build --watch",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
@@ -55,7 +56,7 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "postcss": "^8.4.41",
-    "tailwindcss": "^3.4.7",
+    "tailwindcss": "^3.4.10",
     "vite": "^5.3.4"
   }
 }