Deprecate SubscriptionField and refactor to use endpoint with server-side filtering (#1957)

* Move SubscriptionField to deprecated

* Add basic functionality for surfSubscriptionDropdownOptions

* Feature parity

* Add missing import

* Remove old subscription dropdown options code

* Add types/deprecated/ and move FilterParams type into it as SurfSubscriptionDropdownOptionsFilterParams

* Create selfish-apricots-hunt.md

* Move surf endpoint to deprecated/ and bump changeset to 'minor'

Author: Mark90

.changeset/selfish-apricots-hunt.md

@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": minor
+---
+
+SURF specific: Deprecate SubscriptionField and refactor it to use new REST endpoint with server-side filtering

packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionField.tsx renamed to packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/SubscriptionField.tsx

@@ -33,15 +33,12 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import { PortMode, ProductTag } from '@/components';
 import { useWithOrchestratorTheme } from '@/hooks';
-import { useGetSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSubscriptionDropdownOptions';
-import { SubscriptionDropdownOption } from '@/types';
+import { useGetSurfSubscriptionDropdownOptions } from '@/hooks/deprecated/useGetSurfSubcriptionDropdownOptions';
 
-import { getSelectFieldStyles } from './SelectField/styles';
+import { getSelectFieldStyles } from '../SelectField/styles';
+import { FieldProps, Option } from '../types';
 import { subscriptionFieldStyling } from './SubscriptionFieldStyling';
-import { FieldProps, Option } from './types';
-import { getPortMode } from './utils';
 
 declare module 'uniforms' {
     interface FilterDOMProps {
@@ -81,6 +78,18 @@ export type SubscriptionFieldProps = FieldProps<
     }
 >;
 
+function toPortModes(visiblePortMode: string): string[] {
+    if (visiblePortMode === 'all') {
+        return [];
+    }
+
+    if (visiblePortMode === 'normal') {
+        return ['tagged', 'untagged'];
+    }
+
+    return [visiblePortMode];
+}
+
 function SubscriptionFieldDefinition({
     disabled,
     id,
@@ -110,9 +119,6 @@ function SubscriptionFieldDefinition({
     const { reactSelectInnerComponentStyles } =
         useWithOrchestratorTheme(getSelectFieldStyles);
 
-    const { refetch, subscriptions, isFetching } =
-        useGetSubscriptionDropdownOptions(tags, statuses);
-
     const nameArray = joinName(null, name);
     let parentName = joinName(nameArray.slice(0, -1));
 
@@ -136,160 +142,50 @@ function SubscriptionFieldDefinition({
         ? get(model, customerKey, 'nonExistingOrgToFilterEverything')
         : customerId;
 
-    const makeLabel = (subscription: SubscriptionDropdownOption) => {
-        const description =
-            subscription.description ||
-            t('widgets.subscription.missingDescription');
-        const subscriptionSubstring = subscription.subscriptionId.substring(
-            0,
-            8,
-        );
-
-        if (['Node'].includes(subscription.product.tag)) {
-            const description =
-                subscription.description ||
-                t('widgets.subscription.missingDescription');
-            return `${subscription.subscriptionId.substring(
-                0,
-                8,
-            )} ${description.trim()}`;
-        } else if (
-            [
-                ProductTag.SP,
-                ProductTag.SPNL,
-                ProductTag.AGGSP,
-                ProductTag.AGGSPNL,
-                ProductTag.MSC,
-                ProductTag.MSCNL,
-                ProductTag.IRBSP,
-            ].includes(subscription.product.tag as ProductTag)
+    const getFilteredOptions = (optionsInput: Option[]): Option[] => {
+        // Remnant of the old logic in which much more filtering happened clientside, which is now done
+        // server-side by setting the required URL parameters.
+
+        // The 'uniqueItems' filter below should exclude options already chosen in other SubscriptionFields in the same parent Array.
+        // Although this partly relies on uniforms magic which will be reworked/replaced with pydantic-forms.
+        if (
+            parentName !== name &&
+            parent.fieldType === Array &&
+            // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
+            // TODO: Figure out why this is so
+            parent.uniqueItems
         ) {
-            const portMode = getPortMode(subscription.productBlockInstances);
-            const subscriptionTitle =
-                subscription.productBlockInstances[0].productBlockInstanceValues.find(
-                    (item) => item.field === 'title',
-                );
-            if (subscriptionTitle) {
-                return `${subscriptionSubstring} - ${description.trim()} - ${
-                    subscriptionTitle.value
-                }`;
-            }
-            return `${subscriptionSubstring} ${portMode?.toUpperCase()} ${description.trim()} ${
-                subscription.customer?.fullname
-            }`;
+            const allValues: string[] = get(model, parentName, []);
+            const chosenValues = allValues.filter(
+                (_item, index) =>
+                    index.toString() !== nameArray[nameArray.length - 1],
+            );
+
+            return optionsInput.filter((option) =>
+                chosenValues.includes(option.value),
+            );
         } else {
-            return description.trim();
+            return optionsInput;
         }
     };
 
-    // Filter by product, needed because getSubscriptions might return more than we want
-    const getSubscriptionOptions = (): Option[] => {
-        const filteredSubscriptions = subscriptions?.filter((subscription) => {
-            // NOTE: useBandWith, productIds and tags need to be checked in this order as per the V1 logic
-
-            // If a bandwidth filter is supplied it needs to be applied to the subscription product
-            if (usedBandwidth) {
-                const portSpeedInput = subscription.fixedInputs.find(
-                    (fixedInput) => fixedInput.field === 'port_speed',
-                );
-                if (
-                    portSpeedInput?.value &&
-                    parseInt(portSpeedInput.value.toString(), 10) <
-                        parseInt(usedBandwidth.toString(), 10)
-                ) {
-                    return false;
-                }
-            }
-
-            // If specific productIds are provided the subscriptions needs to have one of those
-            if (
-                !usedBandwidth &&
-                productIds &&
-                productIds.length > 0 &&
-                !productIds.includes(subscription.product.productId)
-            ) {
-                return false;
-            }
-
-            if (
-                !usedBandwidth &&
-                !productIds &&
-                tags &&
-                tags?.length > 0 &&
-                !tags.includes(subscription.product.tag)
-            ) {
-                return false;
-            }
-
-            // If specific subscriptionIds are excluded the subscription can't be one ot those
-            if (
-                excludedSubscriptionIds &&
-                excludedSubscriptionIds.length > 0 &&
-                excludedSubscriptionIds.includes(subscription.subscriptionId)
-            ) {
-                return false;
-            }
-
-            // If a Port mode filter is applied we need to filter on that
-            if (visiblePortMode !== 'all') {
-                const portMode = getPortMode(
-                    subscription.productBlockInstances,
-                );
-                // For normal mode filter out all subscriptions that don't have tagged or untagged ports
-                if (
-                    visiblePortMode === 'normal' &&
-                    ![PortMode.TAGGED, PortMode.UNTAGGED, undefined].includes(
-                        portMode,
-                    )
-                ) {
-                    return false;
-                } else if (
-                    portMode !== visiblePortMode &&
-                    visiblePortMode !== 'normal'
-                ) {
-                    return false;
-                }
-            }
-
-            // If a customer filter is applied we need to filter on that
-            if (
-                usedCustomerId &&
-                subscription.customer?.customerId !== usedCustomerId
-            ) {
-                return false;
-            }
-
-            if (parentName !== name) {
-                if (
-                    parent.fieldType === Array &&
-                    // @ts-expect-error Parent field can have the uniqueItems boolean property but this is not part of JSONSchema6 type
-                    // TODO: Figure out why this is so
-                    parent.uniqueItems
-                ) {
-                    const allValues: string[] = get(model, parentName, []);
-                    const chosenValues = allValues.filter(
-                        (_item, index) =>
-                            index.toString() !==
-                            nameArray[nameArray.length - 1],
-                    );
-                    if (!chosenValues.includes(subscription.subscriptionId)) {
-                        return false;
-                    }
-                }
-            }
-
-            return true;
-        });
-
-        return filteredSubscriptions
-            ? filteredSubscriptions.map((subscription) => ({
-                  label: makeLabel(subscription),
-                  value: subscription.subscriptionId,
-              }))
-            : [];
-    };
+    const excludeSubscriptionIds = excludedSubscriptionIds;
+    const portModes = toPortModes(visiblePortMode);
+    const {
+        refetch,
+        options: unfilteredOptions,
+        isFetching,
+    } = useGetSurfSubscriptionDropdownOptions(
+        tags,
+        statuses,
+        productIds,
+        excludeSubscriptionIds,
+        usedCustomerId,
+        portModes,
+        usedBandwidth,
+    );
 
-    const options = getSubscriptionOptions();
+    const options = getFilteredOptions(unfilteredOptions);
 
     const selectedValue = options.find(
         (option: Option) => option.value === value,

packages/orchestrator-ui-components/src/components/WfoForms/formFields/SubscriptionFieldStyling.ts renamed to packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/SubscriptionFieldStyling.ts

@@ -12,3 +12,4 @@ export * from './VlanField';
 export * from './FileUploadField';
 export * from './types';
 export * from './utils';
+export * from './SubscriptionField';

packages/orchestrator-ui-components/src/components/WfoForms/formFields/deprecated/index.ts

@@ -20,7 +20,6 @@ export * from './LocationCodeField';
 export * from './deprecated';
 export * from './NestField';
 export * from './OptGroupField';
-export * from './SubscriptionField';
 export * from './SummaryField';
 export * from './CustomerField';
 export * from './ConnectedSelectField';

packages/orchestrator-ui-components/src/components/WfoForms/formFields/index.ts

@@ -25,6 +25,8 @@ export const IPAM_FREE_SUBNETS_ENDPOINT = `${IPAM_ENDPOINT}/free_subnets`;
 
 //subscriptions
 export const SUBSCRIPTION_ACTIONS_ENDPOINT = 'subscriptions/workflows';
+export const SUBSCRIPTION_DROPDOWN_OPTIONS_ENDPOINT =
+    'surf/subscriptions/dropdown-options';
 export const CUSTOMER_DESCRIPTION_ENDPOINT =
     '/subscription_customer_descriptions';
 

packages/orchestrator-ui-components/src/configuration/constants.ts

@@ -0,0 +1,37 @@
+import { useGetSurfSubscriptionDropdownOptionsQuery } from '@/rtk/endpoints/deprecated/surfSubscriptionDropdownOptions';
+import { SurfSubscriptionDropdownOptionsFilterParams } from '@/types';
+
+export const useGetSurfSubscriptionDropdownOptions = (
+    tags: string[] = [],
+    statuses: string[] = ['active'],
+    productIds: string[] = [],
+    excludeSubscriptionIds: string[] = [],
+    customerId?: string,
+    portModes: string[] = [],
+    bandwidth?: number,
+) => {
+    const filter_params: SurfSubscriptionDropdownOptionsFilterParams = {
+        product_tags: tags,
+        statuses,
+        product_ids: productIds,
+        exclude_subscription_ids: excludeSubscriptionIds,
+        port_modes: portModes,
+        bandwidth,
+    };
+
+    if (customerId) {
+        filter_params.customer_ids = [customerId];
+    }
+
+    const { data, isFetching, refetch, isError } =
+        useGetSurfSubscriptionDropdownOptionsQuery({ params: filter_params });
+
+    const options = (() => {
+        if (!isFetching && !isError && data) {
+            return data;
+        }
+        return [];
+    })();
+
+    return { isFetching, refetch, options };
+};

packages/orchestrator-ui-components/src/hooks/deprecated/useGetSubscriptionDropdownOptions.ts

@@ -61,6 +61,7 @@ export type UseQuery<T, U> = (
 type ExtraOptions = {
     baseQueryType?: BaseQueryTypes;
     apiName?: string;
+    paramsSerializer?: (params: Record<string, unknown>) => string;
 };
 
 export type WfoGraphqlError = {
@@ -131,7 +132,7 @@ export const catchErrorResponse = async (
 export const orchestratorApi = createApi({
     reducerPath: 'orchestratorApi',
     baseQuery: (args, api, extraOptions: ExtraOptions) => {
-        const { baseQueryType, apiName } = extraOptions || {};
+        const { baseQueryType, apiName, paramsSerializer } = extraOptions || {};
 
         const state = api.getState() as RootState;
         const { orchestratorApiBaseUrl, graphqlEndpointCore, authActive } =
@@ -148,6 +149,7 @@ export const orchestratorApi = createApi({
                         ? customApi.apiBaseUrl
                         : orchestratorApiBaseUrl,
                     prepareHeaders,
+                    paramsSerializer,
                     responseHandler: (response) =>
                         catchErrorResponse(response, authActive),
                 });

packages/orchestrator-ui-components/src/hooks/deprecated/useGetSurfSubcriptionDropdownOptions.ts

@@ -0,0 +1 @@
+export * from './surfSubscriptionDropdownOptions';