feat(ui): warehouse creation wizard (#2728)

Signed-off-by: Remington Breeze <[email protected]>
Signed-off-by: Mayursinh Sarvaiya <[email protected]>
Signed-off-by: Kent Rancourt <[email protected]>
Co-authored-by: Remington Breeze <[email protected]>
Co-authored-by: Kent Rancourt <[email protected]>
Co-authored-by: Rafal <[email protected]>

ui/package.json

@@ -64,6 +64,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/antd": "^5.21.1",
     "@rjsf/core": "^5.21.1",
+    "@rjsf/utils": "^5.21.2",
     "@rjsf/validator-ajv8": "^5.21.1",
     "@tanstack/react-query": "^5.56.2",
     "@types/dagre": "^0.7.52",

ui/src/app.tsx

@@ -49,6 +49,10 @@ export const App = () => (
                     path={paths.createStage}
                     element={<Project tab='pipelines' creatingStage={true} />}
                   />
+                  <Route
+                    path={paths.createWarehouse}
+                    element={<Project tab='pipelines' creatingWarehouse />}
+                  />
                 </Route>
               </Route>
               <Route path={paths.login} element={<Login />} />

ui/src/config/paths.ts

@@ -10,6 +10,7 @@ export const paths = {
   warehouse: '/project/:name/warehouse/:warehouseName/:tab?',
   freight: '/project/:name/freight/:freightName',
   createStage: '/project/:name/create-stage',
+  createWarehouse: '/project/:name/create-warehouse',
   user: '/user',
 
   downloads: '/downloads',

ui/src/features/common/analysis-modal/transforms.test.ts

@@ -1,4 +1,5 @@
 // eslint-disable-file @typescript-eslint/ban-ts-comment
+import { describe, test, beforeAll, afterAll, expect } from 'vitest';
 
 import {
   GithubComArgoprojArgoRolloutsPkgApisRolloutsV1alpha1Argument,

ui/src/features/common/form/rjsf/context.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+type RjsfConfig = {
+  showDescription: boolean;
+};
+
+type RjsfConfigContextType = RjsfConfig & {
+  setConfig(nextConfig: RjsfConfig): void;
+};
+
+export const RjsfConfigContext = createContext<RjsfConfigContextType>({
+  showDescription: false,
+  setConfig() {
+    // noop
+  }
+});
+
+export const useRjsfConfigContext = () => useContext(RjsfConfigContext);

ui/src/features/common/form/rjsf/description-field-template.tsx

@@ -0,0 +1,13 @@
+import { DescriptionFieldProps } from '@rjsf/utils';
+
+import { useRjsfConfigContext } from './context';
+
+export const DescriptionFieldTemplate = (props: DescriptionFieldProps) => {
+  const rjsfConfigContext = useRjsfConfigContext();
+
+  if (!rjsfConfigContext.showDescription) {
+    return null;
+  }
+
+  return <span className='text-xs text-gray-400 mt-1 block mb-4'>{props.description}</span>;
+};

ui/src/features/common/form/rjsf/field-template.tsx

@@ -0,0 +1,9 @@
+import { Templates } from '@rjsf/antd';
+import { FieldTemplateProps } from '@rjsf/utils';
+
+export const FieldTemplate = (props: FieldTemplateProps) => {
+  return (
+    // @ts-expect-error it is component
+    <Templates.FieldTemplate {...props} formContext={{ wrapperStyle: { marginBottom: '0px' } }} />
+  );
+};

ui/src/features/common/form/rjsf/object-field-template.tsx

@@ -0,0 +1,44 @@
+import { Templates } from '@rjsf/antd';
+import { ObjectFieldTemplateProps } from '@rjsf/utils';
+import { Collapse } from 'antd';
+import { useMemo } from 'react';
+
+export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
+  if (!Templates.ObjectFieldTemplate) {
+    throw new Error('[BUG]: Templates.ObjectFieldTemplate is undefined');
+  }
+
+  const orderedProperties = useMemo(
+    () =>
+      props.properties.sort((a, b) => {
+        const aRequired = props.schema.required?.includes(a.name);
+        const bRequired = props.schema.required?.includes(b.name);
+
+        if (aRequired) {
+          return -1;
+        }
+
+        if (bRequired) {
+          return 1;
+        }
+
+        return 0;
+      }),
+    [props.properties, props.schema.required]
+  );
+
+  if (props.title) {
+    return (
+      <Collapse
+        items={[
+          {
+            children: <Templates.ObjectFieldTemplate {...props} properties={orderedProperties} />,
+            label: props.title
+          }
+        ]}
+      />
+    );
+  }
+
+  return <Templates.ObjectFieldTemplate {...props} properties={orderedProperties} />;
+};

ui/src/features/common/form/rjsf/style-overrides.module.less

@@ -0,0 +1,9 @@
+.container {
+    @apply bg-gray-50;
+    @apply p-5;
+    @apply rounded-md;
+
+    label {
+        @apply font-semibold;
+    }
+}

ui/src/features/common/icons.tsx

@@ -0,0 +1,11 @@
+import { faBoxes, faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const IconSetByKargoTerminology = {
+  subscription: () => (
+    <div className='flex items-center gap-2'>
+      <FontAwesomeIcon icon={faBoxes} />
+      <FontAwesomeIcon icon={faUserGear} />
+    </div>
+  )
+};

ui/src/features/common/object-description.tsx

@@ -0,0 +1,32 @@
+import { Descriptions } from 'antd';
+import { DescriptionsItemType } from 'antd/es/descriptions';
+
+export const ObjectDescription = (props: { data: object }) => {
+  const items: DescriptionsItemType[] = [];
+
+  for (const [key, value] of Object.entries(props.data)) {
+    if (Array.isArray(value)) {
+      if (value?.length > 0) {
+        items.push({ key, label: key, children: value?.join(', ') });
+      }
+      continue;
+    }
+
+    if (value === null || value === undefined || typeof value === 'undefined') {
+      continue;
+    }
+
+    if (typeof value === 'object') {
+      items.push({ key, label: key, children: <ObjectDescription data={value} /> });
+      continue;
+    }
+
+    items.push({
+      key,
+      label: key,
+      children: `${value}`
+    });
+  }
+
+  return <Descriptions bordered column={1} items={items} />;
+};