@orchestrator-ui/orchestrator-ui-components 0.5.0 → 0.5.2

package/package.json

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

package/src/components/WfoDateTime/WfoDateTime.tsx

@@ -1,9 +1,10 @@
 import React, { FC } from 'react';
 
 import {
+    getDate,
     parseDateOrTimeRelativeToToday,
     parseDateToLocaleDateTimeString,
-} from '../../utils';
+} from '@/utils';
 
 export type WfoDateTimeProps = {
     dateOrIsoString: Date | string | null;
@@ -18,11 +19,3 @@ export const WfoDateTime: FC<WfoDateTimeProps> = ({ dateOrIsoString }) => {
         </span>
     );
 };
-
-function getDate(date: Date | string | null) {
-    if (typeof date === 'string') {
-        return new Date(date);
-    }
-
-    return date;
-}

package/src/components/WfoErrorBoundary/WfoErrorBoundary.tsx

@@ -0,0 +1,45 @@
+import React, { ErrorInfo, ReactNode } from 'react';
+
+type ErrorBoundaryProps = {
+    fallback?: ReactNode;
+    children: ReactNode;
+};
+
+type ErrorBoundaryState = {
+    hasError: boolean;
+};
+
+export class WfoErrorBoundary extends React.Component<
+    ErrorBoundaryProps,
+    ErrorBoundaryState
+> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: Error, info: ErrorInfo) {
+        console.error(error, info.componentStack);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            return (
+                <p>
+                    An unexpected error occurred, try to go back to the{' '}
+                    <a href="/">home page</a>
+                </p>
+            );
+        }
+
+        return this.props.children;
+    }
+}

package/src/components/WfoErrorBoundary/index.ts

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

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/WfoSubscriptionGeneral.tsx

@@ -4,7 +4,9 @@ import { useTranslations } from 'next-intl';
 
 import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
 
-import { SubscriptionDetail } from '../../types';
+import { SubscriptionDetail } from '@/types';
+import { formatDate } from '@/utils';
+
 import {
     WfoProductStatusBadge,
     WfoSubscriptionStatusBadge,
@@ -33,18 +35,17 @@ export const WfoSubscriptionGeneral = ({
                 key: t('productName'),
                 value: subscriptionDetail.product.name,
             },
-
             {
                 key: t('description'),
                 value: subscriptionDetail.description,
             },
             {
                 key: t('startDate'),
-                value: subscriptionDetail.startDate,
+                value: formatDate(subscriptionDetail.startDate),
             },
             {
                 key: t('endDate'),
-                value: subscriptionDetail.endDate,
+                value: formatDate(subscriptionDetail.endDate),
             },
             {
                 key: t('status'),
@@ -71,6 +72,7 @@ export const WfoSubscriptionGeneral = ({
                     subscriptionDetail && subscriptionDetail.customer
                         ? `${subscriptionDetail.customer?.customerId}`
                         : '-',
+                textToCopy: subscriptionDetail.customer?.customerId,
             },
             {
                 key: t('note'),
@@ -111,11 +113,11 @@ export const WfoSubscriptionGeneral = ({
             },
             {
                 key: t('created'),
-                value: product.createdAt,
+                value: formatDate(product.createdAt),
             },
             {
                 key: t('endDate'),
-                value: product.endDate,
+                value: formatDate(product.endDate),
             },
         ];
     };

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/components/WfoSubscriptionsList/WfoSubscriptionsList.tsx

@@ -155,7 +155,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
         filterBy: alwaysOnFilters,
         query: queryString || undefined,
     };
-    const { data, isError, isLoading } = useQueryWithGraphql(
+    const { data, isError, isFetching } = useQueryWithGraphql(
         getSubscriptionsListGraphQlQuery<SubscriptionListItem>(),
         graphqlQueryVariables,
         ['subscriptions', 'listPage'],
@@ -205,7 +205,7 @@ export const WfoSubscriptionsList: FC<WfoSubscriptionsListProps> = ({
             defaultHiddenColumns={hiddenColumns}
             dataSorting={dataSorting}
             pagination={pagination}
-            isLoading={isLoading}
+            isLoading={isFetching}
             localStorageKey={SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY}
             detailModalTitle={'Details - Subscription'}
             onUpdatePage={getPageChangeHandler<SubscriptionListItem>(

package/src/components/WfoTable/WfoBasicTable/WfoBasicTable.tsx

@@ -1,5 +1,7 @@
 import React, { ReactNode } from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { SerializedStyles } from '@emotion/react';
@@ -68,6 +70,8 @@ export const WfoBasicTable = <T extends object>({
     const { theme } = useOrchestratorTheme();
     const { basicTableStyle } = getWfoBasicTableStyles(theme);
 
+    const t = useTranslations('common');
+
     const statusColorColumn: WfoTableControlColumnConfig<T> = {
         statusColorField: {
             field: WFO_STATUS_COLOR_FIELD,
@@ -94,6 +98,7 @@ export const WfoBasicTable = <T extends object>({
         <EuiBasicTable
             css={tableStyling}
             items={data}
+            noItemsMessage={isLoading ? t('loading') : t('noItemsFound')}
             columns={mapWfoTableColumnsToEuiColumns(
                 allTableColumns,
                 hiddenColumns,

package/src/components/index.ts

@@ -23,4 +23,5 @@ export * from './WfoDiff';
 export * from './WfoSettings';
 export * from './WfoInsyncIcon';
 export * from './WfoError';
+export * from './WfoErrorBoundary';
 export * from './WfoWorkflowSteps';

package/src/graphqlQueries/subscriptionsListQuery.ts

@@ -71,6 +71,7 @@ export const GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY = parse(gql`
             query: $query
         ) {
             page {
+                startDate
                 description
                 subscriptionId
             }
@@ -93,6 +94,8 @@ export const getSubscriptionsListGraphQlQuery = <
 export const getSubscriptionsListSummaryGraphQlQuery = <
     QueryVariablesType = Subscription,
 >(): TypedDocumentNode<
-    SubscriptionsResult<Pick<Subscription, 'subscriptionId' | 'description'>>,
+    SubscriptionsResult<
+        Pick<Subscription, 'subscriptionId' | 'description' | 'startDate'>
+    >,
     GraphqlQueryVariables<QueryVariablesType>
 > => GET_SUBSCRIPTIONS_LIST_SUMMARY_GRAPHQL_QUERY;

package/src/messages/en-GB.json

@@ -19,9 +19,11 @@
         "deselect": "Deselect",
         "close": "Close",
         "editColumns": "Edit columns",
+        "loading": "Loading",
         "newSubscription": "New subscription",
         "newTask": "New task",
         "noFailedTasks": "No failed tasks!",
+        "noItemsFound": "No items found",
         "search": "Search",
         "errorMessage": "An error occurred",
         "export": "Export"
@@ -60,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

@@ -19,9 +19,11 @@
         "deselect": "Deselecteer",
         "close": "Sluiten",
         "editColumns": "Wijzig kolommen",
+        "loading": "Laden",
         "newSubscription": "Nieuwe subscription",
         "newTask": "Nieuwe task",
         "noFailedTasks": "Geen gefaalde taken!",
+        "noItemsFound": "Geen items gevonden",
         "search": "Zoeken",
         "errorMessage": "Er is een fout opgetreden",
         "export": "Exporteren"
@@ -60,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/metadata/WfoProductBlocksPage.tsx

@@ -201,7 +201,7 @@ export const WfoProductBlocksPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         GET_PRODUCTS_BLOCKS_GRAPHQL_QUERY,
         graphqlQueryVariables,
         ['productBlocks', 'listPage'],
@@ -249,7 +249,7 @@ export const WfoProductBlocksPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={

package/src/pages/metadata/WfoProductsPage.tsx

@@ -170,7 +170,7 @@ export const WfoProductsPage = () => {
         sortBy: sortBy,
         query: queryString || undefined,
     };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         getProductsQuery(),
         graphqlQueryVariables,
         ['products', 'listPage'],
@@ -218,7 +218,7 @@ export const WfoProductsPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY}

package/src/pages/metadata/WfoResourceTypesPage.tsx

@@ -144,7 +144,7 @@ export const WfoResourceTypesPage = () => {
             sortBy: sortBy,
             query: queryString || undefined,
         };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         GET_RESOURCE_TYPES_GRAPHQL_QUERY,
         graphqlQueryVariables,
         ['resourceTypes', 'listPage'],
@@ -192,7 +192,7 @@ export const WfoResourceTypesPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={

package/src/pages/metadata/WfoWorkflowsPage.tsx

@@ -156,7 +156,7 @@ export const WfoWorkflowsPage = () => {
         sortBy: graphQlWorkflowListMapper(sortBy),
         query: queryString || undefined,
     };
-    const { data, isLoading, isError } = useQueryWithGraphql(
+    const { data, isFetching, isError } = useQueryWithGraphql(
         GET_WORKFLOWS_GRAPHQL_QUERY,
         graphqlQueryVariables,
         ['workflows', 'listPage'],
@@ -204,7 +204,7 @@ export const WfoWorkflowsPage = () => {
                     setDataDisplayParam,
                 )}
                 pagination={pagination}
-                isLoading={isLoading}
+                isLoading={isFetching}
                 hasError={isError}
                 queryString={queryString}
                 localStorageKey={METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY}