✨ feat(persistent-query): ui implementation

dashpresshq · Feb 6, 2024 · 1221142 · 1221142
1 parent b988c5b
commit 1221142
Show file tree

Hide file tree

Showing 28 changed files with 1,903 additions and 1,788 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
   ],
   "bin": "./bin/dashpress",
   "dependencies": {
-    "@dashpress/bacteria": "^0.0.9",
+    "@dashpress/bacteria": "^0.0.10",
     "@tanstack/react-table": "^8.7.9",
     "@types/cryptr": "^4.0.1",
     "@types/formidable": "^3.4.5",

diff --git a/src/__tests__/_/api-handlers/form-actions.ts b/src/__tests__/_/api-handlers/form-actions.ts
@@ -20,8 +20,8 @@ const FORM_ACTIONS = [
     trigger: "update",
     action: "SEND_MAIL",
     configuration: {
-      url: "http://localhost:3000",
-      method: "GET",
+      from: "[email protected]",
+      to: "[email protected]",
     },
   },
   {
@@ -46,7 +46,7 @@ export const formActionsApiHandlers = [
     FORM_ACTIONS.push(newFormAction);
     if (
       JSON.stringify(newFormAction) ===
-      '{"configuration":{"channel":"{ CONSTANTS.SLACK_CHANNEL }}","message":"Hello how are youHello how are you","shouldNotify":true},"entity":"test-entity","trigger":"create","integration":"slack","action":"send_message"}'
+      '{"configuration":{"channel":"{ CONSTANTS.SLACK_CHANNEL }}","message":"Hello how are youHello how are you","shouldNotify":true},"entity":"test-entity","trigger":"create","integration":"slack","action":"SEND_MESSAGE"}'
     ) {
       return res(ctx.status(204));
     }

diff --git a/src/__tests__/_/api-handlers/integrations-list.ts b/src/__tests__/_/api-handlers/integrations-list.ts
@@ -28,6 +28,12 @@ export const integrationsListApiHandlers = [
               },
             },
           },
+          {
+            key: "non-activated-actions",
+            title: "Non Activated Actions",
+            description: "Some Non Activated Actions Description",
+            configurationSchema: {},
+          },
           {
             key: "smtp",
             title: "SMTP",
@@ -62,7 +68,7 @@ export const integrationsListApiHandlers = [
   rest.get(
     BASE_TEST_URL("/api/integrations/actions/active"),
     async (_, res, ctx) => {
-      return res(ctx.json(["http", "slack"]));
+      return res(ctx.json(["http", "slack", "smtp"]));
     }
   ),
   rest.get(
@@ -71,7 +77,7 @@ export const integrationsListApiHandlers = [
       return res(
         ctx.json([
           {
-            key: "send_message",
+            key: "SEND_MESSAGE",
             label: "Send Message",
             configurationSchema: {
               channel: {
@@ -97,10 +103,18 @@ export const integrationsListApiHandlers = [
             },
           },
           {
-            key: "send_mail",
+            key: "SEND_MAIL",
             label: "Send Mail",
             configurationSchema: {
-              message: {
+              from: {
+                type: "text",
+                validations: [
+                  {
+                    validationType: "required",
+                  },
+                ],
+              },
+              to: {
                 type: "text",
                 validations: [
                   {

diff --git a/src/__tests__/admin/[entity]/config/actions.spec.tsx b/src/__tests__/admin/[entity]/config/actions.spec.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable testing-library/no-node-access */
+/* eslint-disable testing-library/no-container */
 import React from "react";
 import { render, screen, within } from "@testing-library/react";
 import { ApplicationRoot } from "frontend/components/ApplicationRoot";
@@ -68,7 +70,7 @@ describe("pages/admin/[entity]/config/actions", () => {
     );
 
     expect(
-      within(dialog).queryByRole("option", { name: "SMTP" })
+      within(dialog).queryByRole("option", { name: "Non Activated Actions" })
     ).not.toBeInTheDocument();
 
     await userEvent.type(
@@ -105,6 +107,102 @@ describe("pages/admin/[entity]/config/actions", () => {
     expect(
       screen.queryByRole("button", { name: "Create Form Action" })
     ).not.toBeInTheDocument();
+
+    expect(await getTableRows(screen.getByRole("table")))
+      .toMatchInlineSnapshot(`
+      [
+        "Integration
+                      
+                    Trigger
+                      
+                    Action
+                      
+                    Action",
+        "HttpCreatePost",
+        "SmtpUpdateSend Mail",
+        "SlackDeleteSend Message",
+        "SlackCreateSend Message",
+      ]
+    `);
+  });
+
+  it("should delete form action successfully", async () => {
+    render(
+      <ApplicationRoot>
+        <EntityFormActionsSettings />
+      </ApplicationRoot>
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Close Toast" }));
+
+    expect(await screen.findByRole("table")).toBeInTheDocument();
+
+    const tableRows = await screen.findAllByRole("row");
+
+    expect(tableRows).toHaveLength(5);
+
+    await userEvent.click(
+      within(tableRows[1]).getByRole("button", {
+        name: "Delete Form Action",
+      })
+    );
+
+    const confirmBox = await screen.findByRole("alertdialog", {
+      name: "Confirm Delete",
+    });
+
+    await userEvent.click(
+      await within(confirmBox).findByRole("button", { name: "Confirm" })
+    );
+
+    expect(await screen.findByRole("status")).toHaveTextContent(
+      "Form Action Deleted Successfully"
+    );
+
+    expect(await screen.findAllByRole("row")).toHaveLength(4);
+  });
+
+  it("should show the correct value on the update form", async () => {
+    const { container } = render(
+      <ApplicationRoot>
+        <EntityFormActionsSettings />
+      </ApplicationRoot>
+    );
+
+    await userEvent.click(screen.getByRole("button", { name: "Close Toast" }));
+
+    expect(await screen.findByRole("table")).toBeInTheDocument();
+
+    const tableRows = await screen.findAllByRole("row");
+
+    await userEvent.click(
+      within(tableRows[1]).getByRole("button", {
+        name: "Edit Form Action",
+      })
+    );
+
+    //
+
+    const dialog = screen.getByRole("dialog");
+
+    expect(await within(dialog).findByLabelText("SMTP: From")).toHaveValue(
+      "[email protected]"
+    );
+    expect(within(dialog).getByLabelText("SMTP: To")).toHaveValue(
+      "[email protected]"
+    );
+
+    expect(container.querySelector(`input[name="trigger"]`)).toHaveValue(
+      "update"
+    );
+
+    expect(
+      within(dialog).getByRole("option", { selected: true })
+    ).toHaveTextContent("SMTP");
+
+    expect(
+      within(dialog).getByRole("option", { selected: true })
+    ).toHaveTextContent("Send Mail");
   });
 
   //   it("should display updated diction values", async () => {

diff --git a/src/frontend/components/SchemaForm/form-grid.ts b/src/frontend/components/SchemaForm/form-grid.ts
@@ -0,0 +1,15 @@
+import { gridItem, gridRoot } from "frontend/design-system/constants/grid";
+import { GridSpanSizes } from "shared/types/ui";
+import styled from "styled-components";
+
+export const FormGrid = {
+  Root: styled.div`
+    ${gridRoot}
+    grid-auto-rows: auto;
+  `,
+  Item: styled.div<{
+    $span?: GridSpanSizes;
+  }>`
+    ${gridItem}
+  `,
+};
diff --git a/src/frontend/components/SchemaForm/index.tsx b/src/frontend/components/SchemaForm/index.tsx
@@ -8,14 +8,12 @@ import { ToastService } from "frontend/lib/toast";
 import { resetFormValues } from "frontend/lib/form/utils";
 import { FormButton } from "frontend/design-system/components/Button/FormButton";
 import { userFriendlyCase } from "shared/lib/strings/friendly-case";
-import styled from "styled-components";
-import { gridItem, gridRoot } from "frontend/design-system/constants/grid";
-import { GridSpanSizes } from "shared/types/ui";
 import { SystemIconsKeys } from "shared/constants/Icons";
 import { RenderFormInput } from "./_RenderFormInput";
 import { IFormExtension } from "./types";
 import { runFormBeforeSubmit, runFormFieldState } from "./form-run";
 import { useSchemaFormScriptContext } from "./useSchemaFormScriptContext";
+import { FormGrid } from "./form-grid";
 
 interface IProps<T> {
   fields: IAppliedSchemaFormConfig<T>;
@@ -29,17 +27,6 @@ interface IProps<T> {
   formExtension?: Partial<IFormExtension>;
 }
 
-export const GridRoot = styled.div`
-  ${gridRoot}
-  grid-auto-rows: auto;
-`;
-
-export const GridItem = styled.div<{
-  $span: GridSpanSizes;
-}>`
-  ${gridItem}
-`;
-
 export function SchemaForm<T extends Record<string, unknown>>({
   onSubmit,
   fields,
@@ -96,7 +83,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
               });
             }}
           >
-            <GridRoot>
+            <FormGrid.Root>
               {Object.entries(fields)
                 .filter(([field, bag]) => {
                   const isHidden = fieldState[field]?.hidden;
@@ -108,7 +95,7 @@ export function SchemaForm<T extends Record<string, unknown>>({
                 .map(([field, bag]: [string, ISchemaFormConfig<T>]) => (
                   <Field key={field} name={field} validateFields={[]}>
                     {(formProps) => (
-                      <GridItem $span={bag.span || "4"}>
+                      <FormGrid.Item $span={bag.span}>
                         <RenderFormInput
                           type={bag.type}
                           disabled={
@@ -129,11 +116,11 @@ export function SchemaForm<T extends Record<string, unknown>>({
                           entityFieldSelections={bag.selections}
                           formProps={formProps}
                         />
-                      </GridItem>
+                      </FormGrid.Item>
                     )}
                   </Field>
                 ))}
-            </GridRoot>
+            </FormGrid.Root>
             {buttonText && (
               <FormButton
                 text={buttonText}

diff --git a/src/frontend/design-system/components/ConfirmAlert/index.tsx b/src/frontend/design-system/components/ConfirmAlert/index.tsx
@@ -61,7 +61,7 @@ export function Presentation({ action, title, onClose }: IPresentationProps) {
       role="alertdialog"
       aria-modal="true"
       aria-labelledby="confirm_delete_label"
-      aria-describedby="confirm_delete_desc"
+      aria-describedby="confirm_delete_description"
       tabIndex={-1}
     >
       <Body>
@@ -70,7 +70,9 @@ export function Presentation({ action, title, onClose }: IPresentationProps) {
         </Typo.MD>
         <Spacer size="xl" />
         <Typo.XS>
-          <span id="confirm_delete_desc">Are you sure you want to do this</span>
+          <span id="confirm_delete_description">
+            Are you sure you want to do this?
+          </span>
         </Typo.XS>
         <Spacer size="xxl" />
         <Stack justify="center" spacing={8}>

diff --git a/src/frontend/design-system/components/Form/FormSelectButton/index.tsx b/src/frontend/design-system/components/Form/FormSelectButton/index.tsx
@@ -9,6 +9,7 @@ import { generateFormArias, wrapLabelAndError } from "../_wrapForm";
 interface IProps {
   name: string;
   disabled?: boolean;
+  sm?: boolean;
   options: ISelectData[];
   value: string | boolean;
   onChange: (value: string | boolean) => void;
@@ -41,6 +42,7 @@ function BaseFormSelectButton({
   name,
   value: selectedValue,
   onChange,
+  sm,
   disabled,
 }: IProps) {
   return (
@@ -54,6 +56,7 @@ function BaseFormSelectButton({
           <OutlineButton
             type="button"
             role="option"
+            size={sm ? "xs" : undefined}
             aria-selected={isChecked}
             disabled={disabled}
             key={`${value}`}
@@ -82,14 +85,15 @@ interface IFormSelect extends IBaseFormSelect {
 }
 
 export function FormSelectButton(props: IFormSelect) {
-  const { input, selectData, meta, disabled } = props;
+  const { input, selectData, meta, disabled, sm } = props;
 
   return wrapLabelAndError(
     <BaseFormSelectButton
       {...input}
       {...generateFormArias(meta)}
       name={input.name}
       disabled={disabled}
+      sm={sm}
       options={selectData}
     />,
     props

diff --git a/src/frontend/design-system/components/Table/_Pagination.tsx b/src/frontend/design-system/components/Table/_Pagination.tsx
@@ -5,6 +5,7 @@ import { USE_ROOT_COLOR } from "frontend/design-system/theme/root";
 import { Stack } from "frontend/design-system/primitives/Stack";
 import { Typo } from "frontend/design-system/primitives/Typo";
 import { SimpleSelect } from "../Form/FormSelect/Simple";
+import { TABLE_PAGE_SIZES } from "./constants";
 
 const Pagination = styled.div`
   .pagination {
@@ -56,8 +57,6 @@ interface IProps {
   totalPageCount: number;
 }
 
-const PAGE_SIZES = [10, 25, 50, 100];
-
 export function TablePagination({
   setPageSize,
   gotoPage,
@@ -76,7 +75,7 @@ export function TablePagination({
           Showing{" "}
           <SimpleSelect
             width={55}
-            options={PAGE_SIZES.map((option) => ({
+            options={TABLE_PAGE_SIZES.map((option) => ({
               value: `${option}`,
               label: `${option}`,
             }))}

diff --git a/src/frontend/design-system/components/Table/constants.ts b/src/frontend/design-system/components/Table/constants.ts
@@ -6,3 +6,5 @@ export const DEFAULT_TABLE_STATE: Required<IPaginatedDataState<unknown>> = {
   filters: [],
   sortBy: [],
 };
+
+export const TABLE_PAGE_SIZES = [10, 25, 50, 100];