more work on things

khill-fbmc · Oct 24, 2024 · 1a24617 · 1a24617
1 parent 808cd79
commit 1a24617
Show file tree

Hide file tree

Showing 12 changed files with 3,974 additions and 418 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "build": "DEBUG=FALSE node utils/build.js",
     "fix": "eslint src --fix",
     "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'",
-    "start": "DEBUG=true node utils/webserver.js"
+    "start": "DEBUG=true node utils/webserver.js",
+    "test": "vitest"
   },
   "dependencies": {
     "@extend-chrome/messages": "^1.2.2",
@@ -27,6 +28,7 @@
     "react-hook-form": "^7.53.0",
     "react-hot-toast": "^2.4.1",
     "react-style-stringify": "^1.0.0",
+    "react-syntax-highlighter": "^15.6.1",
     "swr": "^2.2.5",
     "valibot": "^0.42.1",
     "zustand": "^5.0.0-rc.2"
@@ -38,11 +40,13 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
+    "@types/chrome": "^0.0.279",
     "@types/i18n": "^0.13.12",
     "@types/node": "^20.14.11",
     "@types/prismjs": "^1.26.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.17.0",
     "@typescript-eslint/parser": "^7.17.0",
     "babel-eslint": "^10.1.0",
@@ -69,6 +73,7 @@
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "prettier": "^3.3.3",
+    "puppeteer": "^23.6.0",
     "react-refresh": "^0.14.2",
     "react-refresh-typescript": "^2.0.9",
     "sass": "^1.57.1",
@@ -82,6 +87,7 @@
     "type-fest": "^3.5.2",
     "typed-emitter": "^2.1.0",
     "typescript": "^5.5.3",
+    "vitest": "^2.1.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^5.0.4",

diff --git a/src/hooks/useRetoolAppUrl.ts b/src/hooks/useRetoolAppUrl.ts
@@ -1,4 +1,4 @@
-import type { RetoolApp } from "@/types/extension";
+import type { RetoolApp } from "@/types/retool-app";
 
 function useRetoolAppUrl(domain: string): (app: RetoolApp) => URL;
 function useRetoolAppUrl(domain: string, app?: RetoolApp): URL;

diff --git a/src/hooks/useStore.ts b/src/hooks/useStore.ts
@@ -4,7 +4,7 @@ import { createJSONStorage, persist } from "zustand/middleware";
 import ChromeStateStorage from "@/lib/ChromeStateStorage";
 import { DEMO_APPS, INSPECTOR_APP } from "@/lib/EmbeddableApps";
 
-import type { RetoolApp } from "@/types/extension";
+import type { RetoolApp } from "@/types/retool-app";
 
 type TabKeys = "config" | "storage" | "workflow" | "json";
 
@@ -18,6 +18,7 @@ export type State = {
     id: string;
     apiKey: string;
     enabled: boolean;
+    lastFetch: string | null;
   };
   apps: RetoolApp[];
 };
@@ -50,6 +51,7 @@ const initialState: State = {
     id: "13d34554-9891-40c0-a032-fda523774e97",
     apiKey: "retool_wk_bde9d74b27644cf3a0691211ff18dee2",
     enabled: false,
+    lastFetch: null,
   },
   apps: [INSPECTOR_APP, ...DEMO_APPS],
 };

diff --git a/src/hooks/useWorkflow.ts b/src/hooks/useWorkflow.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import type { RetoolApp } from "@/types/extension";
+import type { RetoolApp } from "@/types/retool-app";
 
 export function useWorkflowData(apiKey: string, id: string) {
   const [isLoading, setIsLoading] = useState(false);

diff --git a/src/lib/colors.ts b/src/lib/colors.ts
diff --git a/src/pages/Options/Tabs/WorkflowTab.tsx b/src/pages/Options/Tabs/WorkflowTab.tsx
@@ -4,13 +4,21 @@ import Button from "react-bootstrap/Button";
 import Card from "react-bootstrap/Card";
 import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";
+import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
+import typescript from "react-syntax-highlighter/dist/esm/languages/prism/typescript";
+import prism from "react-syntax-highlighter/dist/esm/styles/prism/vs";
 
 import { useStore } from "@/hooks/useStore";
 import { useWorkflowData } from "@/hooks/useWorkflow";
 
 import { SimpleJsonView } from "../components/SimpleJsonView";
 
+SyntaxHighlighter.registerLanguage("typescript", typescript);
 function WorkflowTab() {
+  const schema = String(process.env.APP_SCHEMA).replace(/^export\s/, "");
+
+  console.log(schema);
+
   const {
     apiKey,
     id: workflowId,
@@ -48,71 +56,93 @@ function WorkflowTab() {
 
       <Row>
         <Col>
-          <Card className="shadow">
-            <Card.Header className="d-inline-flex justify-content-between">
-              <div className="d-flex gap-2">
-                <i className="bi bi-cloud"></i>
-                Workflow
-              </div>
-              <a
-                className="d-flex gap-2 link-secondary"
-                href={retoolWorkflowUrl()}
-                target="_blank"
-                rel="noreferrer"
-              >
-                View in Retool<i className="bi bi-box-arrow-up-right"></i>
-              </a>
-            </Card.Header>
-            <Card.Body>
-              <Form.Group className="mb-4" controlId="workflowUrl">
+          <div className="d-flex flex-column gap-3">
+            <Card className="shadow">
+              <Card.Header className="d-inline-flex justify-content-between">
+                <div className="d-flex gap-2">
+                  <i className="bi bi-cloud"></i>
+                  Workflow
+                </div>
+                <a
+                  className="d-flex gap-2 link-secondary"
+                  href={retoolWorkflowUrl()}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  View in Retool<i className="bi bi-box-arrow-up-right"></i>
+                </a>
+              </Card.Header>
+              <Card.Body>
+                <Form.Group className="mb-4" controlId="workflowUrl">
+                  <p className="text-muted">
+                    Enable this feature to use a <code>Retool Workflow</code> to
+                    provide the additional apps to the available list.
+                  </p>
+                  <Form.Label>Workflow ID</Form.Label>
+                  <Form.Control
+                    value={workflowId}
+                    disabled={workflowEnabled === false}
+                    onChange={(e) => updateWorkflow({ id: e.target.value })}
+                    data-testid="workflow-input-id"
+                  />
+                  <Form.Text className="text-muted">
+                    Copy from the URL
+                  </Form.Text>
+                </Form.Group>
+                <Form.Group className="mb-4" controlId="workflowApiKey">
+                  <Form.Label>Workflow API Key</Form.Label>
+                  <Form.Control
+                    type="password"
+                    value={apiKey}
+                    disabled={workflowEnabled === false}
+                    onChange={(e) => updateWorkflow({ apiKey: e.target.value })}
+                    data-testid="workflow-input-apikey"
+                  />
+                  <Form.Text className="text-muted">
+                    Copy from Retool Editor
+                  </Form.Text>
+                </Form.Group>
+              </Card.Body>
+              <Card.Footer>
+                <div className="d-flex justify-content-between">
+                  <Button
+                    variant={workflowEnabled ? "warning" : "primary"}
+                    title={`Enable using a workflow to provide the app name list`}
+                    onClick={toggleWorkflowProvider}
+                    data-testid="workflow-button-toggle"
+                  >
+                    {workflowEnabled ? "Disable Provider" : "Enable Provider"}
+                  </Button>
+                  <Button
+                    variant={"success"}
+                    disabled={workflowEnabled === false}
+                    title={`Refresh the app list from the remote workflow`}
+                    onClick={fetchWorkflowData}
+                    data-testid="workflow-button-refresh"
+                  >
+                    Refresh Apps
+                  </Button>
+                </div>
+              </Card.Footer>
+            </Card>
+
+            <Card className="shadow">
+              <Card.Header>App Schema</Card.Header>
+              <Card.Body>
                 <p className="text-muted">
-                  Enable this feature to use a <code>Retool Workflow</code> to
-                  provide the list of available apps.
+                  The workflow must must respond with a <code>200</code>{" "}
+                  response that is in the format of <code>RetoolApp[]</code>.
                 </p>
-                <Form.Label>Workflow ID</Form.Label>
-                <Form.Control
-                  value={workflowId}
-                  disabled={workflowEnabled === false}
-                  onChange={(e) => updateWorkflow({ id: e.target.value })}
-                />
-                <Form.Text className="text-muted">
-                  Supply a Retool workflow URL that returns a <code>200</code>{" "}
-                  with a JSON body formatted <code>{"{ apps: string[] }"}</code>
-                </Form.Text>
-              </Form.Group>
-              <Form.Group className="mb-4" controlId="workflowApiKey">
-                <Form.Label>Workflow API Key</Form.Label>
-                <Form.Control
-                  type="password"
-                  value={apiKey}
-                  disabled={workflowEnabled === false}
-                  onChange={(e) => updateWorkflow({ apiKey: e.target.value })}
-                />
-                <Form.Text className="text-muted">
-                  Copy this value from Retool
-                </Form.Text>
-              </Form.Group>
-            </Card.Body>
-            <Card.Footer>
-              <div className="d-flex justify-content-between">
-                <Button
-                  variant={workflowEnabled ? "warning" : "primary"}
-                  title={`Enable using a workflow to provide the app name list`}
-                  onClick={toggleWorkflowProvider}
-                >
-                  {workflowEnabled ? "Disable Provider" : "Enable Provider"}
-                </Button>
-                <Button
-                  variant={"success"}
-                  disabled={workflowEnabled === false}
-                  title={`Refresh the app list from the remote workflow`}
-                  onClick={fetchWorkflowData}
-                >
-                  Refresh Apps
-                </Button>
-              </div>
-            </Card.Footer>
-          </Card>
+                <p className="text-muted">
+                  The following are the TypeScript types for a{" "}
+                  <code>RetoolApp</code>.
+                </p>
+                <SyntaxHighlighter language="typescript" style={prism}>
+                  {schema}
+                </SyntaxHighlighter>
+              </Card.Body>
+            </Card>
+          </div>
         </Col>
 
         <Col>

diff --git a/src/pages/Options/components/AppForm.tsx b/src/pages/Options/components/AppForm.tsx
@@ -77,6 +77,7 @@ function AppForm({ app, onSave, onCancel }: Props) {
                   name={field.name}
                   checked={field.value}
                   onChange={field.onChange}
+                  data-testid="form-public"
                 />
               </div>
             )}
@@ -105,7 +106,7 @@ function AppForm({ app, onSave, onCancel }: Props) {
               defaultValue={app?.version}
               render={({ field }) => (
                 <>
-                  <Form.Control {...field} />
+                  <Form.Control {...field} data-testid="form-version" />
                   {errors?.version && <p>Not Valid</p>}
                 </>
               )}
@@ -136,7 +137,7 @@ function AppForm({ app, onSave, onCancel }: Props) {
                     </div>
                     Environment
                   </Form.Label>
-                  <Form.Select {...field}>
+                  <Form.Select {...field} data-testid="form-environment">
                     <option value="production">Production</option>
                     <option value="staging">Staging</option>
                     <option value="development">Development</option>
@@ -225,16 +226,23 @@ function AppForm({ app, onSave, onCancel }: Props) {
           className="d-flex gap-2 px-3"
           variant="outline-danger"
           onClick={onCancel}
+          data-testid="form-button-cancel"
         >
           <i className="bi bi-x-octagon"></i>Cancel
         </Button>
-        <Button className="flex-fill px-5" type="submit" variant="success">
+        <Button
+          className="flex-fill px-5"
+          type="submit"
+          variant="success"
+          data-testid="form-button-save"
+        >
           Save
         </Button>
         <Button
           className="d-flex gap-2 px-3"
           variant="outline-danger"
           onClick={() => onDelete(app.name)}
+          data-testid="form-button-delete"
         >
           <i className="bi bi-trash"></i>Delete
         </Button>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -0,0 +1,7 @@
+import type { RetoolApp } from "./retool-app";
+
+export * from "./retool-app";
+
+export type AppVersion = RetoolApp["version"];
+
+export type AppEnvironment = RetoolApp["env"];
diff --git a/src/types/extension.ts → src/types/retool-app.ts b/src/types/extension.ts → src/types/retool-app.ts
@@ -1,9 +1,5 @@
 export type SemVer = `${number}.${number}.${number}`;
 
-export type AppVersion = SemVer | "latest";
-
-export type AppEnvironment = "production" | "staging" | "development";
-
 export type UrlParam = {
   param: string;
   value: string;
@@ -12,8 +8,8 @@ export type UrlParam = {
 export type RetoolApp = {
   name: string;
   public: boolean;
-  env: AppEnvironment;
-  version: AppVersion;
+  env: "production" | "staging" | "development";
+  version: SemVer | "latest";
   hash: UrlParam[];
   query: UrlParam[];
 };