@orchestrator-ui/orchestrator-ui-components 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.5.1",
+    "version": "0.6.0",
     "license": "MIT",
     "scripts": {
         "test": "jest",

package/src/components/WfoForms/AutoFieldLoader.tsx

@@ -5,6 +5,7 @@ import {
     AcceptField,
     BoolField,
     ContactPersonNameField,
+    CustomerField,
     DateField,
     DividerField,
     ImsNodeIdField,
@@ -17,7 +18,6 @@ import {
     NestField,
     NumField,
     OptGroupField,
-    OrganisationField,
     ProductField,
     RadioField,
     SelectField,
@@ -74,8 +74,8 @@ export function autoFieldFunction(
                     return SummaryField;
                 case 'subscription':
                     return SubscriptionSummaryField;
-                case 'organisationId':
-                    return OrganisationField;
+                case 'customerId':
+                    return CustomerField;
                 case 'locationCode':
                     return LocationCodeField;
                 case 'contactPersonName': // Surf specific

package/src/components/WfoForms/UserInputForm.tsx

@@ -361,14 +361,14 @@ function fillPreselection(form: JSONSchema6, router: NextRouter) {
     if (form && form.properties) {
         Object.keys(queryParams).forEach((param) => {
             if (form && form.properties && form.properties[param]) {
-                const organisationInput = form.properties[
+                const customerInput = form.properties[
                     param
                 ] as UniformJSONSchemaProperty;
-                if (!organisationInput.uniforms) {
-                    organisationInput.uniforms = {};
+                if (!customerInput.uniforms) {
+                    customerInput.uniforms = {};
                 }
-                organisationInput.uniforms.disabled = true;
-                organisationInput.default = queryParams[param];
+                customerInput.uniforms.disabled = true;
+                customerInput.default = queryParams[param];
             }
         });
 

package/src/components/WfoForms/formFields/ContactPersonNameField.tsx

@@ -40,16 +40,19 @@ export function stop(e: React.SyntheticEvent) {
 
 export type ContactPersonNameFieldProps = FieldProps<
     string,
-    { organisationId?: string; organisationKey?: string }
+    {
+        customerId?: string;
+        customerKey?: string;
+    }
 >;
 
 declare module 'uniforms' {
     interface FilterDOMProps {
-        organisationId: never;
-        organisationKey: never;
+        customerId: never;
+        customerKey: never;
     }
 }
-filterDOMProps.register('organisationId', 'organisationKey');
+filterDOMProps.register('customerId', 'customerKey');
 
 function ContactPersonName({
     disabled,
@@ -65,8 +68,8 @@ function ContactPersonName({
     error,
     showInlineError,
     errorMessage,
-    organisationId,
-    organisationKey,
+    customerId,
+    customerKey,
     ...props
 }: ContactPersonNameFieldProps) {
     const axiosApiClient = useAxiosApiClient();
@@ -86,26 +89,21 @@ function ContactPersonName({
         : name;
     const contactsField = useField(useFieldName, {}, { absoluteName: true })[0];
 
-    const organisationFieldName =
-        organisationKey ||
-        contactsField.field.organisationKey ||
-        'organisation';
+    const customerIdFieldName =
+        customerKey || contactsField.field.customerKey || 'customer_id';
 
     // Get initial value for org field if it exists (we cant really test)
-    let organisationInitialValue;
+    let customerInitialValue;
     try {
-        organisationInitialValue = schema.getInitialValue(
-            organisationFieldName,
-            {},
-        );
+        customerInitialValue = schema.getInitialValue(customerIdFieldName, {});
     } catch {
-        organisationInitialValue = '';
+        customerInitialValue = '';
     }
 
-    const organisationIdValue =
-        organisationId ||
-        contactsField.field.organisationId ||
-        get(model, organisationFieldName, organisationInitialValue);
+    const customerIdValue =
+        customerId ||
+        contactsField.field.customerId ||
+        get(model, customerIdFieldName, customerInitialValue);
 
     const [displayAutocomplete, setDisplayAutocomplete] = useState(false);
     const [contactPersons, setContactPersons] = useState<ContactPerson[]>([]);
@@ -126,10 +124,10 @@ function ContactPersonName({
         : [];
 
     useEffect(() => {
-        if (organisationIdValue) {
+        if (customerIdValue) {
             axiosApiClient
                 .axiosFetch<ContactPerson[]>(
-                    `/surf/crm/contacts/${organisationIdValue}`,
+                    `/surf/crm/contacts/${customerIdValue}`,
                     {},
                     {},
                     false,
@@ -143,7 +141,7 @@ function ContactPersonName({
                     setContactPersons([]);
                 });
         }
-    }, [organisationIdValue, axiosApiClient]);
+    }, [customerIdValue, axiosApiClient]);
 
     useEffect(() => {
         // Set focus to the last name component to be created

package/src/components/WfoForms/formFields/{OrganisationField.tsx → CustomerField.tsx}

@@ -21,12 +21,12 @@ import { useGetCustomersQuery } from '@/rtk/endpoints';
 
 import { SelectField, SelectFieldProps } from './SelectField';
 
-export type OrganisationFieldProps = Omit<
+export type CustomerFieldProps = Omit<
     SelectFieldProps,
     'placeholder' | 'transform' | 'allowedValues'
 >;
 
-function Organisation({ ...props }: OrganisationFieldProps) {
+function Customer({ ...props }: CustomerFieldProps) {
     const t = useTranslations('pydanticForms');
 
     const { data: customers, isLoading } = useGetCustomersQuery();
@@ -47,11 +47,11 @@ function Organisation({ ...props }: OrganisationFieldProps) {
             disabled={isLoading}
             placeholder={
                 !isLoading
-                    ? t('widgets.organisation.placeholder')
-                    : t('widgets.organisation.loading')
+                    ? t('widgets.customer.placeholder')
+                    : t('widgets.customer.loading')
             }
         />
     );
 }
 
-export const OrganisationField = connectField(Organisation, { kind: 'leaf' });
+export const CustomerField = connectField(Customer, { kind: 'leaf' });

package/src/components/WfoForms/formFields/SubscriptionField.tsx

@@ -45,8 +45,8 @@ import { getPortMode } from './utils';
 declare module 'uniforms' {
     interface FilterDOMProps {
         excludedSubscriptionIds: never;
-        organisationId: never;
-        organisationKey: never;
+        customerId: never;
+        customerKey: never;
         visiblePortMode: never;
         bandwidth: never;
         bandwidthKey: never;
@@ -57,8 +57,8 @@ declare module 'uniforms' {
 filterDOMProps.register(
     'productIds',
     'excludedSubscriptionIds',
-    'organisationId',
-    'organisationKey',
+    'customerId',
+    'customerKey',
     'visiblePortMode',
     'bandwidth',
     'bandwidthKey',
@@ -71,8 +71,8 @@ export type SubscriptionFieldProps = FieldProps<
     {
         productIds?: string[];
         excludedSubscriptionIds?: string[];
-        organisationId?: string;
-        organisationKey?: string;
+        customerId?: string;
+        customerKey?: string;
         visiblePortMode?: string;
         bandwidth?: number;
         bandwidthKey?: string;
@@ -96,8 +96,8 @@ function SubscriptionFieldDefinition({
     className = '',
     productIds = [],
     excludedSubscriptionIds = [],
-    organisationId,
-    organisationKey,
+    customerId,
+    customerKey,
     visiblePortMode = 'all',
     bandwidth,
     bandwidthKey,
@@ -132,10 +132,10 @@ function SubscriptionFieldDefinition({
 
     const usedBandwidth = bandwidth || bandWithFromField;
 
-    // Get value from org field if organisationKey is set.
-    const usedOrganisationId = organisationKey
-        ? get(model, organisationKey, 'nonExistingOrgToFilterEverything')
-        : organisationId;
+    // Get value from org field if customerKey is set.
+    const usedCustomerId = customerKey
+        ? get(model, customerKey, 'nonExistingOrgToFilterEverything')
+        : customerId;
 
     const makeLabel = (subscription: SubscriptionDropdownOption) => {
         const description =
@@ -243,10 +243,10 @@ function SubscriptionFieldDefinition({
                 }
             }
 
-            // If a customer/organisation filter is applied we need to filter on that
+            // If a customer filter is applied we need to filter on that
             if (
-                usedOrganisationId &&
-                subscription.customer?.customerId !== usedOrganisationId
+                usedCustomerId &&
+                subscription.customer?.customerId !== usedCustomerId
             ) {
                 return false;
             }

package/src/components/WfoForms/formFields/SummaryField.tsx

@@ -46,12 +46,11 @@ function Summary({
     const { headers, labels, columns } = data;
 
     const extraColumnsData = columns.filter((_, index) => index !== 0);
-
     const rows = columns[0].map((row, index) => (
         <tr key={index}>
             {labels && <td className={`label`}>{labels[index]}</td>}
             <td className={`value`}>
-                {row.includes('<!doctype html>') ? (
+                {typeof row === 'string' && row.includes('<!doctype html>') ? (
                     <div
                         className="emailMessage"
                         dangerouslySetInnerHTML={{ __html: row }}

package/src/components/WfoForms/formFields/index.ts

@@ -18,7 +18,6 @@ export * from './SubscriptionSummaryField';
 export * from './TextField';
 export * from './DateField';
 export * from './TimestampField';
-export * from './OrganisationField';
 export * from './ContactPersonNameField';
 export * from './ImsNodeIdField';
 export * from './ImsPortIdField';
@@ -29,3 +28,4 @@ export * from './OptGroupField';
 export * from './SubscriptionField';
 export * from './IpNetworkField';
 export * from './SummaryField';
+export * from './CustomerField';

package/src/components/WfoProcessList/WfoProcessesList.tsx

@@ -236,9 +236,13 @@ export const WfoProcessesList = ({
     return (
         <WfoTableWithFilter<ProcessListItem>
             queryString={queryString}
-            data={mapGraphQlProcessListResultToProcessListItems(
-                processes || [],
-            )}
+            data={
+                !isFetching
+                    ? mapGraphQlProcessListResultToProcessListItems(
+                          processes || [],
+                      )
+                    : []
+            }
             tableColumns={mapSortableAndFilterableValuesToTableColumnConfig(
                 tableColumns,
                 pageInfo?.sortFields,

package/src/components/WfoSubscription/subscriptionDetailTabs.tsx

@@ -9,23 +9,23 @@ import { SubscriptionDetailTab } from './utils';
 
 export const subscriptionDetailTabs: WfoFilterTab<SubscriptionDetailTab>[] = [
     {
-        id: SubscriptionDetailTab.GENERAL_TAB,
-        translationKey: 'general',
+        id: SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB,
+        translationKey: 'serviceConfiguration',
         prepend: (
             <EuiFlexGroup justifyContent={'center'}>
                 <EuiFlexItem>
-                    <WfoCubeSolid width="18" height="18" color="currentColor" />
+                    <WfoCogFill width="16" height="16" color="currentColor" />
                 </EuiFlexItem>
             </EuiFlexGroup>
         ),
     },
     {
-        id: SubscriptionDetailTab.SERVICE_CONFIGURATION_TAB,
-        translationKey: 'serviceConfiguration',
+        id: SubscriptionDetailTab.GENERAL_TAB,
+        translationKey: 'general',
         prepend: (
             <EuiFlexGroup justifyContent={'center'}>
                 <EuiFlexItem>
-                    <WfoCogFill width="16" height="16" color="currentColor" />
+                    <WfoCubeSolid width="18" height="18" color="currentColor" />
                 </EuiFlexItem>
             </EuiFlexGroup>
         ),

package/src/graphqlQueries/processDetailQuery.ts

@@ -20,14 +20,7 @@ export const GET_PROCESS_DETAIL_GRAPHQL_QUERY: TypedDocumentNode<
                 lastStep
                 workflowName
                 isTask
-                form {
-                    additionalProperties
-                    definitions
-                    properties
-                    required
-                    title
-                    type
-                }
+                form
                 steps {
                     name
                     status

package/src/messages/en-GB.json

@@ -62,9 +62,9 @@
             "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input field(s) have validation errors"
         },
         "widgets": {
-            "organisation": {
-                "placeholder": "Org placeholder",
-                "loading": "Loading organisations..."
+            "customer": {
+                "placeholder": "Customer placeholder",
+                "loading": "Loading customers..."
             },
             "contactPersonName": {
                 "placeholder": "Name placeholder"

package/src/messages/nl-NL.json

@@ -62,9 +62,9 @@
             "inputFieldsHaveValidationErrors": "{nrOfValidationErrors} input veldn(en) hebben validatie errors"
         },
         "widgets": {
-            "organisation": {
-                "placeholder": "Org placeholder",
-                "loading": "Organisaties laden..."
+            "customer": {
+                "placeholder": "Klant placeholder",
+                "loading": "Klanten laden..."
             },
             "contactPersonName": {
                 "placeholder": "Naam placeholder"

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -5,7 +5,13 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { EuiButton, EuiSpacer } from '@elastic/eui';
+import {
+    EuiButton,
+    EuiFlexGroup,
+    EuiFlexItem,
+    EuiPageHeader,
+    EuiSpacer,
+} from '@elastic/eui';
 
 import {
     ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY,
@@ -17,7 +23,6 @@ import {
     WfoTableColumns,
 } from '@/components';
 import { PATH_TASKS } from '@/components';
-import { WfoPageHeader } from '@/components/WfoPageHeader/WfoPageHeader';
 import {
     ProcessListItem,
     WfoProcessesList,
@@ -137,17 +142,27 @@ export const WfoTasksListPage = () => {
         <>
             <EuiSpacer />
 
-            <WfoPageHeader pageTitle="Tasks">
-                <EuiButton
-                    onClick={handleRerunAllButtonClick}
-                    iconType={() => (
-                        <WfoRefresh color={theme.colors.primaryText} />
-                    )}
-                >
-                    {t('rerunAll')}
-                </EuiButton>
-                <WfoStartTaskButtonComboBox />
-            </WfoPageHeader>
+            <EuiFlexGroup>
+                <EuiFlexItem>
+                    <EuiPageHeader pageTitle="Tasks"></EuiPageHeader>
+                </EuiFlexItem>
+
+                <EuiFlexItem>
+                    <EuiFlexGroup justifyContent="flexEnd">
+                        {' '}
+                        <EuiButton
+                            onClick={handleRerunAllButtonClick}
+                            iconType={() => (
+                                <WfoRefresh color={theme.colors.primaryText} />
+                            )}
+                        >
+                            {t('rerunAll')}
+                        </EuiButton>
+                        <WfoStartTaskButtonComboBox />
+                    </EuiFlexGroup>
+                </EuiFlexItem>
+            </EuiFlexGroup>
+
             <WfoFilterTabs
                 tabs={defaultTasksListTabs}
                 translationNamespace="tasks.tabs"

package/src/rtk/endpoints/customers.ts

@@ -6,9 +6,9 @@ const customersQuery = `query Customers {
   customers(first: 1000000, after: 0) {
       page {
           fullname
-          identifier
+          customerId
           shortcode
-      }:
+      }
   }
 }`;
 

package/src/rtk/storeProvider.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { ReactNode } from 'react';
 import { Provider } from 'react-redux';
 
-import { useOrchestratorConfig } from '@/hooks';
 import type { OrchestratorConfig } from '@/types';
 
 import { getOrchestratorStore } from './store';
@@ -16,11 +15,8 @@ export const StoreProvider = ({
     initialOrchestratorConfig,
     children,
 }: StoreProviderProps) => {
-    const { orchestratorConfig } = useOrchestratorConfig(
-        initialOrchestratorConfig,
-    );
+    const store = getOrchestratorStore(initialOrchestratorConfig);
+    const [orchestratorStore] = useState(store);
 
-    const store = getOrchestratorStore(orchestratorConfig);
-
-    return <Provider store={store}>{children}</Provider>;
+    return <Provider store={orchestratorStore}>{children}</Provider>;
 };

package/src/components/WfoPageHeader/WfoPageHeader.tsx

@@ -1,25 +0,0 @@
-import React, { FC, ReactNode } from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiPageHeader } from '@elastic/eui';
-
-export type WfoPageHeaderProps = {
-    pageTitle: string;
-    children?: ReactNode;
-};
-
-export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
-    pageTitle,
-    children,
-}) => (
-    <EuiFlexGroup>
-        <EuiFlexItem>
-            <EuiPageHeader pageTitle={pageTitle}></EuiPageHeader>
-        </EuiFlexItem>
-
-        {children && (
-            <EuiFlexItem>
-                <EuiFlexGroup justifyContent="flexEnd">{children}</EuiFlexGroup>
-            </EuiFlexItem>
-        )}
-    </EuiFlexGroup>
-);