Merge pull request #484 from karrioapi/patch-2023.9.12

[patch] 2023.9.12
karrioapi · Dec 31, 2023 · e440292 · e440292
2 parents 431147b + 47b94ce
commit e440292
Show file tree

Hide file tree

Showing 38 changed files with 5,485 additions and 4,088 deletions.
diff --git a/README.md b/README.md
@@ -117,3 +117,9 @@ Not sure where to start? [Send us an email](mailto:dev@karrio.com?subject=Pairin
 This project uses the [Apache v2 license](LICENSE). The core Karrio platform will always remain open and free.
 
 Any other questions, mail us at hello@karrio.io We’d love to meet you!
+
+## Sponsors
+
+We are building an open and global shipping platform that makes shipping integration and logistics automation fun and accessible using and building on top of open source software. Thanks to these sponsors who are backing this initiative.
+
+<a href="https://github.com/sponsors/karrio" target="_blank"><img alt="New Sponsor" src="screenshots/become-a-sponsor.png" /></a>
diff --git a/apps/api/karrio/server/VERSION b/apps/api/karrio/server/VERSION
@@ -1 +1 @@
-2023.9.11
+2023.9.12
diff --git a/apps/dashboard/src/modules/Workflows/events.tsx b/apps/dashboard/src/modules/Workflows/events.tsx
@@ -13,42 +13,121 @@ import { Spinner } from "@karrio/ui/components";
 import { useRouter } from "next/router";
 import Head from "next/head";
 import React from "react";
+import { WorkflowEventFilter } from "@karrio/types/graphql/ee";
 
 export { getServerSideProps } from "@/context/main";
 const ContextProviders = bundleContexts([
   ModalProvider,
 ]);
 
+export const WorkflowEventList: React.FC<{ defaultFilter?: WorkflowEventFilter }> = ({ defaultFilter }) => {
+  const router = useRouter();
+  const loader = useLoader();
+  const { query: { data: { workflow_events } = {}, ...query }, filter, setFilter } = useWorkflowEvents({
+    setVariablesToURL: true,
+    ...(defaultFilter || {}),
+  });
+
+  const updateFilter = (extra: Partial<typeof filter> = {}) => {
+    const query = {
+      ...filter,
+      ...getURLSearchParams(),
+      ...extra
+    };
+
+    setFilter(query);
+  }
+
+  React.useEffect(() => { updateFilter(); }, [router.query]);
+  React.useEffect(() => { loader.setLoading(query.isFetching); }, [query.isFetching]);
+  React.useEffect(() => {
+    // if (query.isFetched && !initialized && !isNoneOrEmpty(router.query.modal)) {
+    //   previewEvent(router.query.modal as string);
+    //   setInitialized(true);
+    // }
+  }, [router.query.modal, query.isFetched]);
+
+  return (
+    <>
+
+      {/* APIs Overview */}
+      {!query.isFetched && <Spinner />}
+
+      {(query.isFetched && (workflow_events?.edges || []).length > 0) && <>
+        <div className="table-container">
+          <table className="workflow-events-table is-size-7 table is-fullwidth">
+
+            <tbody className="workflow-events-table">
+              <tr>
+                <td className="status"><span className="ml-1">EVENT</span></td>
+                <td className="event is-size-7 px-0"></td>
+                <td className="date has-text-right mr-2">DATE</td>
+              </tr>
+
+              {(workflow_events?.edges || []).map(({ node: event }) => (
+
+                <WorkflowPreviewModal
+                  key={event.id}
+                  eventId={event.id}
+                  trigger={
+                    <tr key={event.id} className="items is-clickable">
+                      <td className="status is-vcentered">
+                        <StatusBadge status={event.status as string} style={{ width: '100%' }} />
+                      </td>
+                      <td className="description">
+                        <span className="text-ellipsis" title={event.event_type || ""}>
+                          {`${event.event_type} trigger of ${event.workflow.name}`}
+                        </span>
+                      </td>
+                      <td className="date has-text-right pr-0">
+                        <span className="mx-2">{formatDateTimeLong(event.created_at)}</span>
+                      </td>
+                    </tr>
+                  }
+                />
+
+              ))}
+            </tbody>
+
+          </table>
+        </div>
+
+        <footer className="px-2 py-2 is-vcentered">
+          <span className="is-size-7 has-text-weight-semibold">
+            {(workflow_events?.edges || []).length} results
+          </span>
+
+          <div className="buttons has-addons is-centered is-pulled-right">
+            <button className="button is-small"
+              onClick={() => updateFilter({ offset: (filter.offset as number - 20) })}
+              disabled={filter.offset == 0}>
+              Previous
+            </button>
+            <button className="button is-small"
+              onClick={() => updateFilter({ offset: (filter.offset as number + 20) })}
+              disabled={!workflow_events?.page_info.has_next_page}>
+              Next
+            </button>
+          </div>
+        </footer>
+      </>}
+
+      {(query.isFetched && (workflow_events?.edges || []).length == 0) && <div className="card my-6">
+
+        <div className="card-content has-text-centered">
+          <p>No Workflow events found.</p>
+        </div>
+
+      </div>}
+
+    </>
+  )
+};
+
 export default function Page(pageProps: any) {
   const { references } = useAPIMetadata();
 
   const Component: React.FC = () => {
-    const router = useRouter();
-    const loader = useLoader();
-    const [initialized, setInitialized] = React.useState(false);
-    const { query: { data: { workflow_events } = {}, ...query }, filter, setFilter } = useWorkflowEvents({
-      setVariablesToURL: true,
-    });
-
-    const updateFilter = (extra: Partial<typeof filter> = {}) => {
-      const query = {
-        ...filter,
-        ...getURLSearchParams(),
-        ...extra
-      };
-
-      setFilter(query);
-    }
-
-    React.useEffect(() => { updateFilter(); }, [router.query]);
-    React.useEffect(() => { loader.setLoading(query.isFetching); }, [query.isFetching]);
-    React.useEffect(() => {
-      // if (query.isFetched && !initialized && !isNoneOrEmpty(router.query.modal)) {
-      //   previewEvent(router.query.modal as string);
-      //   setInitialized(true);
-      // }
-    }, [router.query.modal, query.isFetched]);
-
     return (
       <>
 
@@ -75,77 +154,7 @@ export default function Page(pageProps: any) {
           </ul>
         </div>
 
-        {/* APIs Overview */}
-        {!query.isFetched && <Spinner />}
-
-        {(query.isFetched && (workflow_events?.edges || []).length > 0) && <>
-          <div className="table-container">
-            <table className="workflow-events-table is-size-7 table is-fullwidth">
-
-              <tbody className="workflow-events-table">
-                <tr>
-                  <td className="status"><span className="ml-1">EVENT</span></td>
-                  <td className="event is-size-7 px-0"></td>
-                  <td className="date has-text-right mr-2">DATE</td>
-                </tr>
-
-                {(workflow_events?.edges || []).map(({ node: event }) => (
-
-                  <WorkflowPreviewModal
-                    key={event.id}
-                    eventId={event.id}
-                    trigger={
-                      <tr key={event.id} className="items is-clickable">
-                        <td className="status is-vcentered">
-                          <StatusBadge status={event.status as string} style={{ width: '100%' }} />
-                        </td>
-                        <td className="description">
-                          <span className="text-ellipsis" title={event.event_type || ""}>
-                            {`${event.event_type} trigger of ${event.workflow.name}`}
-                          </span>
-                        </td>
-                        <td className="date has-text-right pr-0">
-                          <span className="mx-2">{formatDateTimeLong(event.created_at)}</span>
-                        </td>
-                      </tr>
-                    }
-                  />
-
-                ))}
-              </tbody>
-
-            </table>
-          </div>
-
-          <footer className="px-2 py-2 is-vcentered">
-            <span className="is-size-7 has-text-weight-semibold">
-              {(workflow_events?.edges || []).length} results
-            </span>
-
-            <div className="buttons has-addons is-centered is-pulled-right">
-              <button className="button is-small"
-                onClick={() => updateFilter({ offset: (filter.offset as number - 20) })}
-                disabled={filter.offset == 0}>
-                Previous
-              </button>
-              <button className="button is-small"
-                onClick={() => updateFilter({ offset: (filter.offset as number + 20) })}
-                disabled={!workflow_events?.page_info.has_next_page}>
-                Next
-              </button>
-            </div>
-          </footer>
-        </>}
-
-
-        {(query.isFetched && (workflow_events?.edges || []).length == 0) &&
-          <div className="card my-6">
-
-            <div className="card-content has-text-centered">
-              <p>No Workflow events found.</p>
-            </div>
-
-          </div>}
+        <WorkflowEventList />
 
       </>
     );

diff --git a/apps/dashboard/src/modules/Workflows/index.tsx b/apps/dashboard/src/modules/Workflows/index.tsx
@@ -30,9 +30,9 @@ export default function Page(pageProps: any) {
             <span className="tag is-warning is-size-7 has-text-weight-bold mx-2">BETA</span>
           </div>
           <div>
-            <button className="button is-small">
+            <AppLink href={`/workflows/new`} className="button is-small">
               <span>Create Workflow</span>
-            </button>
+            </AppLink>
           </div>
         </header>
 
@@ -58,14 +58,14 @@ export default function Page(pageProps: any) {
           <nav key={Date()} className="panel is-shadowless" style={{ border: '1px solid #e5e5e5', boxShadow: '0.5px 0.5px 2.5px #efefef' }}>
             {(workflows?.edges || []).map(({ node: workflow }) => (
 
-              <label key={workflow.id} className="columns m-0 panel-block">
+              <label key={workflow.id} className="columns is-mobile m-0 panel-block">
 
-                <div className="column is-11 is-size-7 has-text-grey p-0">
-                  <div className="has-text-weight-bold is-size-6">{workflow.name}</div>
+                <AppLink href={`/workflows/${workflow.id}`} className="column is-11 is-size-7 has-text-grey p-0">
+                  <div className="has-text-weight-bold is-size-6 text-ellipsis">{workflow.name}</div>
                   <div className="has-text-weight-semibold mt-2">
                     <span className="tag is-light">{`${workflow.action_nodes.length} actions`}</span>
                   </div>
-                </div>
+                </AppLink>
 
                 <div className="column p-0 is-vcentered">
                   <div className="buttons has-addons is-right">