Allow Create LIR prefixes workflow to start with pre-filled variables (#1640)

* Allow Create LIR prefixes workflow to start with pre-filled variables

* Changed order of if-else block

Author: Georgi2704

.changeset/curly-squids-design.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': patch
+---
+
+1146 Allow workflow to start with additional prefilled variables - LIR prefixes page

apps/wfo-ui

@@ -18,6 +18,7 @@ import React, { useContext, useState } from 'react';
 
 import invariant from 'invariant';
 import { JSONSchema6 } from 'json-schema';
+import { isObject } from 'lodash';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import { useTranslations } from 'next-intl';
@@ -393,17 +394,30 @@ function fillPreselection(form: JSONSchema6, router: NextRouter) {
         // ipvany preselect
         if (queryParams.prefix && queryParams.prefixlen) {
             if (form && form.properties.ip_prefix) {
-                const ipPrefixInput = form.properties
-                    .ip_prefix as UniformJSONSchemaProperty;
+                const ipPrefix = isObject(form.properties.ip_prefix)
+                    ? form.properties.ip_prefix
+                    : {};
+                const ipPrefixInput = {
+                    ...ipPrefix,
+                    uniforms: { prefixMin: 0 },
+                    default: {},
+                } as UniformJSONSchemaProperty;
                 if (!ipPrefixInput.uniforms) {
-                    ipPrefixInput.uniforms = {};
+                    ipPrefixInput.uniforms = { prefixMin: 0 };
                 }
                 ipPrefixInput.default = `${queryParams.prefix}/${queryParams.prefixlen}`;
                 ipPrefixInput.uniforms.prefixMin = parseInt(
                     (queryParams.prefix_min as string) ??
                         (queryParams.prefixlen as string),
                     10,
                 );
+                return {
+                    ...form,
+                    properties: {
+                        ...form.properties,
+                        ip_prefix: ipPrefixInput,
+                    },
+                };
             }
         }
     }

packages/orchestrator-ui-components/src/components/WfoForms/UserInputForm.tsx

@@ -35,9 +35,16 @@ import { FormNotCompleteResponse } from '@/types/forms';
 
 import { WfoProcessDetail } from './WfoProcessDetail';
 
+type PreselectedInput = {
+    prefix?: string;
+    prefixlen?: string;
+    prefix_min?: string;
+};
+
 type StartCreateWorkflowPayload = {
     product: string;
-};
+} & PreselectedInput;
+
 type StartModifyWorkflowPayload = {
     subscription_id: string;
 };
@@ -46,10 +53,10 @@ type StartWorkflowPayload =
     | StartCreateWorkflowPayload
     | StartModifyWorkflowPayload;
 
-interface StartProcessPageQuery {
+type StartProcessPageQuery = {
     productId?: string;
     subscriptionId?: string;
-}
+} & PreselectedInput;
 
 interface WfoStartProcessPageProps {
     processName: string;
@@ -64,15 +71,24 @@ export interface UserInputForm {
 const getInitialProcessPayload = ({
     productId,
     subscriptionId,
+    prefix,
+    prefixlen,
+    prefix_min,
 }: StartProcessPageQuery): StartWorkflowPayload | undefined => {
-    if (productId) {
+    if (subscriptionId) {
+        return {
+            subscription_id: subscriptionId,
+        };
+    } else if (productId && prefix && prefixlen && prefix_min) {
         return {
             product: productId,
+            prefix: prefix,
+            prefixlen: prefixlen,
+            prefix_min: prefix_min,
         };
-    }
-    if (subscriptionId) {
+    } else if (productId) {
         return {
-            subscription_id: subscriptionId,
+            product: productId,
         };
     }
     return undefined;
@@ -87,7 +103,8 @@ export const WfoStartProcessPage = ({
     const [hasError, setHasError] = useState<boolean>(false);
     const { theme } = useOrchestratorTheme();
     const [form, setForm] = useState<UserInputForm>({});
-    const { productId, subscriptionId } = router.query as StartProcessPageQuery;
+    const { productId, subscriptionId, prefix, prefixlen, prefix_min } =
+        router.query as StartProcessPageQuery;
 
     const {
         data: subscriptionDetail,
@@ -108,8 +125,15 @@ export const WfoStartProcessPage = ({
     const [startProcess] = useStartProcessMutation();
 
     const startProcessPayload = useMemo(
-        () => getInitialProcessPayload({ productId, subscriptionId }),
-        [productId, subscriptionId],
+        () =>
+            getInitialProcessPayload({
+                productId,
+                subscriptionId,
+                prefix,
+                prefixlen,
+                prefix_min,
+            }),
+        [productId, subscriptionId, prefix, prefixlen, prefix_min],
     );
 
     const { stepUserInput, hasNext } = form;