feat(import-app): fix bugs with flows

CrystallizeAPI · Feb 20, 2024 · c6d03c3 · c6d03c3
1 parent 673b570
commit c6d03c3
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 45 deletions.
diff --git a/components/crystallize-import/src/core.server/import-runner.server.ts b/components/crystallize-import/src/core.server/import-runner.server.ts
@@ -63,7 +63,10 @@ export const runImport = async (
                     event: 'item-created',
                     data,
                 });
-                onItemCreated(data).catch((err) => errors.push(err));
+                onItemCreated(data).catch((err) => {
+                    console.error('onItemCreated error', err);
+                    errors.push(err);
+                });
             });
         }
         if (onItemUpdated) {
@@ -72,7 +75,10 @@ export const runImport = async (
                     event: 'item-updated',
                     data,
                 });
-                onItemUpdated(data).catch((err) => errors.push(err));
+                onItemUpdated(data).catch((err) => {
+                    console.error('onItemUpdated error', err);
+                    errors.push(err);
+                });
             });
         }
 

diff --git a/components/crystallize-import/src/core.server/use-cases/crystallize/push-item-to-flow.ts b/components/crystallize-import/src/core.server/use-cases/crystallize/push-item-to-flow.ts
@@ -15,13 +15,23 @@ export const pushItemToFlow = async (
     { apiClient }: Deps,
 ): Promise<void> => {
     const query = `#graphql
-        mutation ADD_TO_STAGE($itemId: ID!, $language: String!, $version: VersionLabel!, $stage: String!) {
-            addItemFlowStage(itemId: $itemId, language: $language, version: $version, stage: $stage) {
-                ... on FlowStageContent {
-                    id
+        mutation ADD_TO_STAGE(
+            $itemId: ID!
+            $language: String!
+            $version: VersionLabel!
+            $stage: String!
+        ) {
+            addItemsToFlowStage(
+                stage: $stage
+                items: [{ id: $itemId, language: $language, version: $version }]
+            ) {
+                ... on FlowStageContentList {
+                    content {
+                        id
+                    }
                 }
                 ... on BasicError {
-                    error: message
+                    or: message
                 }
             }
         }
@@ -33,9 +43,10 @@ export const pushItemToFlow = async (
         stage,
     });
 
-    if (!res?.addItemFlowStage?.id) {
+    if (!res?.addItemsToFlowStage?.content || res?.addItemsToFlowStage?.content.length === 0) {
         throw new Error(
-            res?.addItemFlowStage?.error || `Failed to add item to flow ${id}-${language}-${version} to stage ${stage}`,
+            res?.addItemsToFlowStage?.error ||
+                `Failed to add item to flow ${id}-${language}-${version} to stage ${stage}`,
         );
     }
 };
diff --git a/components/crystallize-import/src/routes/api.submit.ts b/components/crystallize-import/src/routes/api.submit.ts
@@ -20,11 +20,6 @@ export const action = async ({ request }: ActionFunctionArgs) => {
             {
                 onItemUpdated: async (item) => {
                     const push = async (stageId: string) => {
-                        emitter.emit(importId, {
-                            event: 'stage-push',
-                            item,
-                            stageId,
-                        });
                         await api.pushItemToFlow(
                             {
                                 id: item.id,
@@ -33,6 +28,13 @@ export const action = async ({ request }: ActionFunctionArgs) => {
                             },
                             stageId,
                         );
+                        emitter.emit(importId, {
+                            event: 'stage-pushed',
+                            data: {
+                                ...item,
+                                stageId,
+                            },
+                        });
                     };
                     const validate = validationRules?.[item.shape.identifier]?.validate;
                     if (!validate) {

diff --git a/components/crystallize-import/src/styles/app.css b/components/crystallize-import/src/styles/app.css
@@ -92,8 +92,8 @@ body {
 
 .popover {
     overflow: hidden;
-    font-family:'Roboto',  system-ui, sans-serif;
-    
+    font-family: 'Roboto', system-ui, sans-serif;
+
     @apply bg-white flex flex-col max-h-[700px] px-6 pb-4 overflow-scroll  rounded-md bg-white shadow-md border border-solid border-slate-300;
 }
 
@@ -126,8 +126,7 @@ body {
     background: lighten(rgb(239, 72, 54), 10%);
 }
 .dsg-row-header {
-    @apply !z-30 ;
-
+    @apply !z-30;
 }
 .dsg-cell-header-container {
     display: flex;
@@ -138,9 +137,8 @@ body {
     @apply bg-slate-100;
 }
 
-
 label {
-    @apply text-slate-600 font-medium text-sm
+    @apply text-slate-600 font-medium text-sm;
 }
 
 label small {
@@ -164,7 +162,6 @@ select {
         0.65em auto,
         100%;
     @apply px-6 py-3 pr-8 text-sm font-medium bg-slate-100 border border-solid border-gray-200 rounded-md hover:border-gray-400;
-
 }
 select.grey {
     background-color: #f3f4f6;
@@ -253,7 +250,6 @@ select:disabled {
     display: flex;
 }
 
-
 .file-chooser {
     display: flex;
     width: 100%;
@@ -266,7 +262,7 @@ select:disabled {
     padding-top: 10px;
     border: 1px dashed #9095a8;
     border-radius: 8px;
-    @apply  grow bg-white border-slate-400;
+    @apply grow bg-white border-slate-400;
 }
 
 .match-label {
@@ -290,7 +286,6 @@ select:disabled {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-
 .loader {
     position: relative;
     animation: flix 3s ease-in infinite alternate;
@@ -395,19 +390,20 @@ select:disabled {
     color: #888;
 }
 
-.item-updated{
+.item-updated {
     @apply bg-yellow-50 text-yellow-700 border border-solid border-yellow-300;
 }
-.item-created, .done {
+.item-created,
+.done {
     @apply bg-green-100 text-green-600 border border-solid border-green-300;
 }
 
-.started{
+.started {
     @apply bg-white text-slate-600 border border-solid border-slate-300;
 }
 .item-error {
     @apply bg-pink-100 text-pink-600 border border-solid border-pink-300;
 }
 .text-tag {
     @apply border px-2 py-1 border-solid rounded border-slate-300 bg-white italic  font-medium text-slate-500;
-}
+}
diff --git a/components/crystallize-import/src/ui/import/App.tsx b/components/crystallize-import/src/ui/import/App.tsx
@@ -9,6 +9,7 @@ const messageFactory = (decoded: any) => {
         case 'started':
             return 'Import started';
         case 'item-updated':
+        case 'item-created':
             return (
                 <>
                     <span>Updated item</span> <span className="text-tag">{decoded.data.id}</span> <span>with name</span>{' '}
@@ -17,27 +18,24 @@ const messageFactory = (decoded: any) => {
                     <span className="text-tag">{decoded.data.shape.identifier}</span>
                 </>
             );
-        case 'item-created':
+        case 'stage-pushed':
             return (
                 <>
-                    <span>Created item</span> <span className="text-tag">{decoded.data.id}</span> <span>with name</span>{' '}
+                    <span>Item</span> <span className="text-tag">{decoded.data.id}</span> <span>with name</span>{' '}
                     <span className="text-tag">{decoded.data.name}</span> <span>in language</span>{' '}
-                    <span className="text-tag">{decoded.data.language}</span> <span>using shape</span>{' '}
-                    <span className="text-tag">{decoded.data.shape.identifier}</span>
+                    <span className="text-tag">{decoded.data.language}</span> was <span>pushed to stage</span>{' '}
+                    <span className="text-tag">{decoded.data.stageId}</span>
                 </>
             );
 
-        case 'item-error':
+        case 'done':
+            return <span className="font-bold">Import done 🎉</span>;
+        default:
             return (
                 <span>
                     <pre>{JSON.stringify(decoded.data, undefined, 2)}</pre>
                 </span>
             );
-
-        case 'done':
-            return <span className="font-bold">Import done 🎉</span>;
-        default:
-            return 'Working ...';
     }
 };
 export const App = () => {
@@ -146,7 +144,7 @@ export const App = () => {
                         <h2 className="text-gray-600 font-semibold m-0">Progress log</h2>
                         <label>{state.done ? 'Import completed' : 'Running data import ...'}</label>
                     </div>
-                    <div className="flex flex-col py-4 px-6 bg-slate-100 max-h-[500px] overflow-scroll reverse flex-col-reverse">
+                    <div className="flex py-4 px-6 bg-slate-100 max-h-[500px] overflow-scroll reverse flex-col-reverse">
                         <div className="flex flex-col gap-2">
                             {streamLogs.map((log, i) => {
                                 const decoded = JSON.parse(log);

diff --git a/components/crystallize-import/src/ui/import/components/DataForm.tsx b/components/crystallize-import/src/ui/import/components/DataForm.tsx
@@ -54,7 +54,7 @@ export const DataMatchingForm = () => {
                         )}
                     <div className="flex items-center shrink-0 gap-3">
                         <button
-                            className="flex px-4 gap-2 py-3.5 font-medium bg-green-100 text-green-800 hover:border-green-600 border border-solid border-transparent rounded cursor-pointer font-medium"
+                            className="flex px-4 gap-2 py-3.5 bg-green-100 text-green-800 hover:border-green-600 border border-solid border-transparent rounded cursor-pointer font-medium"
                             onClick={async () => {
                                 dispatch.updateLoading(true);
                                 try {
@@ -87,7 +87,7 @@ export const DataMatchingForm = () => {
                             <span>Preflight test</span> <PiAirplaneInFlightDuotone />
                         </button>
                         <button
-                            className="flex-1   px-4 gap-2 py-3.5 bg-pink-100 text-pink-600 hover:border-pink-600 border border-solid border-transparent rounded cursor-pointer px-2 py-1 font-medium"
+                            className="flex-1 gap-2 bg-pink-100 text-pink-600 hover:border-pink-600 border border-solid border-transparent rounded cursor-pointer px-2 py-1 font-medium"
                             onClick={() => {
                                 dispatch.updateSpreadsheet([], []);
                             }}

diff --git a/components/crystallize-import/src/ui/import/components/action-bar/ActionBar.tsx b/components/crystallize-import/src/ui/import/components/action-bar/ActionBar.tsx
@@ -11,7 +11,7 @@ export interface ActionBarProps {
 }
 
 export const ActionBar = ({ shapes, folders }: ActionBarProps) => {
-    const { state, dispatch } = useImport();
+    const { state } = useImport();
 
     return (
         <div className=" pt-2  bg-white gap-4 rounded-b-md shadow-sm">
@@ -25,7 +25,7 @@ export const ActionBar = ({ shapes, folders }: ActionBarProps) => {
             </div>
 
             {(state.preflight?.errorCount ?? 0) > 0 && (
-                <div className="block text-xs  px-6 py-1 text-sm text-right">
+                <div className="block px-6 py-1 text-sm text-right">
                     <span className="text-pink-700 font-medium">
                         You have {state.preflight?.errorCount ?? 0} errors.{' '}
                     </span>

diff --git a/components/crystallize-import/src/ui/import/components/action-bar/ShapeChooser.tsx b/components/crystallize-import/src/ui/import/components/action-bar/ShapeChooser.tsx
@@ -1,11 +1,12 @@
 import type { Shape } from '@crystallize/schema';
 import { useImport } from '../../provider';
+
 interface ShapeChooserProps {
     shapes: Shape[];
 }
 
 export const ShapeChooser = ({ shapes }: ShapeChooserProps) => {
-    const { dispatch, state } = useImport();
+    const { dispatch } = useImport();
 
     return (
         <div className="flex flex-col py-2 w-full">

diff --git a/components/crystallize-import/src/ui/import/components/action-bar/Submit.tsx b/components/crystallize-import/src/ui/import/components/action-bar/Submit.tsx
@@ -2,7 +2,7 @@ import { FormSubmission } from '~/contracts/form-submission';
 import { useImport } from '../../provider';
 import { useRef, forwardRef } from 'react';
 
-const FlowStagesSelect = forwardRef<HTMLSelectElement>((props, ref) => {
+const FlowStagesSelect = forwardRef<HTMLSelectElement, { defaultOption: string }>((props, ref) => {
     const { state } = useImport();
     const { defaultOption } = props;