@orchestrator-ui/orchestrator-ui-components 1.14.0 → 1.14.2

package/src/icons/WfoBoltFill.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoBoltFill: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = '#000000',
+}) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <title>icon/bolt-fill</title>
+            <g
+                id="Symbols"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+            >
+                <g id="icon/bolt-fill" fill={color}>
+                    <path
+                        fill-rule="evenodd"
+                        d="M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z"
+                        clip-rule="evenodd"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};

package/src/icons/WfoBoltSlashFill.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoBoltSlashFill: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = '#000000',
+}) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <title>icon/bolt-fill</title>
+            <g
+                id="Symbols"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+            >
+                <g id="icon/bolt-slash-fill" fill={color}>
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M11.412 15.655 9.75 21.75l3.745-4.012M9.257 13.5H3.75l2.659-2.849m2.048-2.194L14.25 2.25 12 10.5h8.25l-4.707 5.043M8.457 8.457 3 3m5.457 5.457 7.086 7.086m0 0L21 21"
+                    />
+                </g>
+            </g>
+        </svg>
+    );
+};

package/src/icons/index.ts

@@ -8,6 +8,8 @@ export * from './WfoMinusCircleOutline';
 export * from './WfoPlusCircleFill';
 export * from './WfoChevronDown';
 export * from './WfoChevronUp';
+export * from './WfoBoltFill';
+export * from './WfoBoltSlashFill';
 export * from './WfoCubeSolid';
 export * from './WfoArrowNarrowDown';
 export * from './WfoRefresh';

package/src/pages/index.ts

@@ -1,5 +1,6 @@
 export * from './metadata';
 export * from './processes';
+export * from './settings';
 export * from './startPage';
 export * from './subscriptions';
 export * from './tasks';

package/src/pages/processes/WfoProcessDetail.tsx

@@ -123,6 +123,7 @@ export const WfoProcessDetail = ({
                 ProcessStatus.FAILED,
                 ProcessStatus.API_UNAVAILABLE,
                 ProcessStatus.INCONSISTENT_DATA,
+                ProcessStatus.WAITING,
             ],
             processDetail?.lastStatus,
         );

package/src/pages/startPage/WfoStartPage.tsx

@@ -1,212 +1,46 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
-import { useTranslations } from 'next-intl';
-
-import { EuiFlexItem } from '@elastic/eui';
-
-import { PATH_SUBSCRIPTIONS, PATH_TASKS, PATH_WORKFLOWS } from '@/components';
 import {
-    SummaryCard,
-    SummaryCardStatus,
+    WfoActiveWorkflowsSummaryCard,
+    WfoFailedTasksSummaryCard,
+    WfoLatestActiveSubscriptionsSummaryCard,
+    WfoLatestOutOfSyncSubscriptionSummaryCard,
+    WfoMyWorkflowsSummaryCard,
+    WfoProductsSummaryCard,
     WfoSummaryCards,
-} from '@/components/WfoSummary/WfoSummaryCards';
+} from '@/components';
 import { PolicyResource } from '@/configuration';
 import { usePolicy, useWfoSession } from '@/hooks';
-import {
-    useGetProcessListSummaryQuery,
-    useGetProductsSummaryQuery,
-} from '@/rtk';
-import { useGetSubscriptionSummaryListQuery } from '@/rtk/endpoints/subscriptionListSummary';
-import { optionalArrayMapper, toOptionalArrayEntry } from '@/utils';
+import { toOptionalArrayEntry } from '@/utils';
 
-import {
-    mapProcessSummaryToSummaryCardListItem,
-    mapSubscriptionSummaryToSummaryCardListItem,
-} from './mappers';
-import {
-    activeWorkflowsListSummaryQueryVariables,
-    getMyWorkflowListSummaryQueryVariables,
-    outOfSyncSubscriptionsListSummaryQueryVariables,
-    productsSummaryQueryVariables,
-    subscriptionsListSummaryQueryVariables,
-    taskListSummaryQueryVariables,
-} from './queryVariables';
 import { useStartPageSummaryCardConfigurationOverride } from './useStartPageSummaryCardConfigurationOverride';
 
 export const WfoStartPage = () => {
-    const t = useTranslations('startPage');
     const { overrideSummaryCards } =
         useStartPageSummaryCardConfigurationOverride();
+
     const { isAllowed } = usePolicy();
     const { session } = useWfoSession();
     const username = session?.user?.name ?? '';
 
-    const {
-        data: subscriptionsSummaryResult,
-        isLoading: subscriptionsSummaryIsFetching,
-    } = useGetSubscriptionSummaryListQuery(
-        subscriptionsListSummaryQueryVariables,
-    );
-    const {
-        data: outOfSyncSubscriptionsSummaryResult,
-        isLoading: outOfSyncsubscriptionsSummaryIsFetching,
-    } = useGetSubscriptionSummaryListQuery(
-        outOfSyncSubscriptionsListSummaryQueryVariables,
-    );
-    const {
-        data: activeWorkflowsSummaryResponse,
-        isFetching: activeWorkflowsSummaryIsFetching,
-    } = useGetProcessListSummaryQuery(activeWorkflowsListSummaryQueryVariables);
-
-    const {
-        data: myWorkflowsSummaryResponse,
-        isFetching: myWorkflowsSummaryIsFetching,
-    } = useGetProcessListSummaryQuery(
-        getMyWorkflowListSummaryQueryVariables(username),
-    );
-
-    const {
-        data: failedTasksSummaryResponse,
-        isFetching: failedTasksSummaryIsFetching,
-    } = useGetProcessListSummaryQuery(taskListSummaryQueryVariables);
-
-    const {
-        data: productsSummaryResult,
-        isLoading: productsSummaryIsFetching,
-    } = useGetProductsSummaryQuery(productsSummaryQueryVariables);
-
-    const latestActiveSubscriptionsSummaryCard: SummaryCard = {
-        headerTitle: t('activeSubscriptions.headerTitle'),
-        headerValue: subscriptionsSummaryResult?.pageInfo.totalItems ?? 0,
-        headerStatus: SummaryCardStatus.Neutral,
-        listTitle: t('activeSubscriptions.listTitle'),
-        listItems: optionalArrayMapper(
-            subscriptionsSummaryResult?.subscriptions,
-            mapSubscriptionSummaryToSummaryCardListItem,
-        ),
-        button: {
-            name: t('activeSubscriptions.buttonText'),
-            url: PATH_SUBSCRIPTIONS,
-        },
-        isLoading: subscriptionsSummaryIsFetching,
-    };
-
-    const latestOutOfSyncSubscriptionsSummaryCard: SummaryCard = {
-        headerTitle: t('outOfSyncSubscriptions.headerTitle'),
-        headerValue:
-            outOfSyncSubscriptionsSummaryResult?.pageInfo.totalItems ?? 0,
-        headerStatus: SummaryCardStatus.Error,
-        listTitle: t('outOfSyncSubscriptions.listTitle'),
-        listItems: optionalArrayMapper(
-            outOfSyncSubscriptionsSummaryResult?.subscriptions,
-            mapSubscriptionSummaryToSummaryCardListItem,
-        ),
-        button: {
-            name: t('outOfSyncSubscriptions.buttonText'),
-            url: `${PATH_SUBSCRIPTIONS}?activeTab=ALL&sortBy=field-startDate_order-ASC&queryString=status%3A%28provisioning%7Cactive%29+insync%3Afalse`,
-        },
-        isLoading: outOfSyncsubscriptionsSummaryIsFetching,
-    };
-
-    const activeWorkflowsSummaryCard: SummaryCard = {
-        headerTitle: t('activeWorkflows.headerTitle'),
-        headerValue: activeWorkflowsSummaryResponse?.pageInfo.totalItems ?? 0,
-        headerStatus: SummaryCardStatus.Success,
-        listTitle: t('activeWorkflows.listTitle'),
-        listItems: optionalArrayMapper(
-            activeWorkflowsSummaryResponse?.processes,
-            mapProcessSummaryToSummaryCardListItem,
-        ),
-        button: {
-            name: t('activeWorkflows.buttonText'),
-            url: PATH_WORKFLOWS,
-        },
-        isLoading: activeWorkflowsSummaryIsFetching,
-    };
-
-    const myWorkflowsSummaryCard: SummaryCard = {
-        headerTitle: t('myWorkflows.headerTitle'),
-        headerValue: myWorkflowsSummaryResponse?.pageInfo.totalItems ?? 0,
-        headerStatus: SummaryCardStatus.Success,
-        listTitle: t('myWorkflows.listTitle'),
-        listItems: optionalArrayMapper(
-            myWorkflowsSummaryResponse?.processes,
-            mapProcessSummaryToSummaryCardListItem,
-        ),
-        button: username
-            ? {
-                  name: t('myWorkflows.buttonText'),
-                  url: `${PATH_WORKFLOWS}?activeTab=COMPLETED&sortBy=field-lastModifiedAt_order-DESC&queryString=createdBy%3A${username}`,
-              }
-            : undefined,
-        isLoading: myWorkflowsSummaryIsFetching,
-    };
-
-    const failedTasksSummaryCard: SummaryCard = {
-        headerTitle: t('failedTasks.headerTitle'),
-        headerValue: failedTasksSummaryResponse?.pageInfo.totalItems ?? 0,
-        headerStatus: SummaryCardStatus.Error,
-        listTitle: t('failedTasks.listTitle'),
-        listItems: optionalArrayMapper(
-            failedTasksSummaryResponse?.processes,
-            mapProcessSummaryToSummaryCardListItem,
+    // The key can be used to filter or sort on when overriding the cards in the app
+    const defaultSummaryCards: ReactElement[] = [
+        ...toOptionalArrayEntry(
+            <WfoMyWorkflowsSummaryCard key="myWorkflows" username="Todo" />,
+            !!username,
         ),
-        button: {
-            name: t('failedTasks.buttonText'),
-            url: PATH_TASKS,
-        },
-        isLoading: failedTasksSummaryIsFetching,
-    };
-
-    const productsSummaryCard: SummaryCard = {
-        headerTitle: t('products.headerTitle'),
-        headerValue: productsSummaryResult?.pageInfo.totalItems ?? 0,
-        headerStatus: SummaryCardStatus.Neutral,
-        listTitle: t('products.listTitle'),
-        listItems:
-            [...(productsSummaryResult?.products ?? [])]
-                .sort(
-                    (left, right) =>
-                        (right.subscriptions.pageInfo.totalItems ?? 0) -
-                        (left.subscriptions.pageInfo.totalItems ?? 0),
-                )
-                .map((product) => ({
-                    title: '',
-                    value: (
-                        <div
-                            css={{
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                            }}
-                        >
-                            <div>{product.name}</div>
-                            <div>
-                                {product.subscriptions.pageInfo.totalItems || 0}
-                            </div>
-                        </div>
-                    ),
-                })) ?? [],
-        isLoading: productsSummaryIsFetching,
-    };
-
-    const allowedSummaryCards = [
-        ...toOptionalArrayEntry(myWorkflowsSummaryCard, !!username),
-        activeWorkflowsSummaryCard,
+        <WfoActiveWorkflowsSummaryCard key="activeWorkflows" />,
         ...toOptionalArrayEntry(
-            failedTasksSummaryCard,
+            <WfoFailedTasksSummaryCard key="failedTasks" />,
             isAllowed(PolicyResource.NAVIGATION_TASKS),
         ),
-        latestOutOfSyncSubscriptionsSummaryCard,
-        latestActiveSubscriptionsSummaryCard,
-        productsSummaryCard,
+        <WfoLatestOutOfSyncSubscriptionSummaryCard key="latestOutOfSyncSubscription" />,
+        <WfoLatestActiveSubscriptionsSummaryCard key="latestActiveSubscriptions" />,
+        <WfoProductsSummaryCard key="products" />,
     ];
 
     const summaryCards =
-        overrideSummaryCards?.(allowedSummaryCards) || allowedSummaryCards;
+        overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
 
-    return (
-        <EuiFlexItem>
-            <WfoSummaryCards summaryCards={summaryCards} />
-        </EuiFlexItem>
-    );
+    return <WfoSummaryCards>{summaryCards}</WfoSummaryCards>;
 };

package/src/pages/startPage/index.ts

@@ -1 +1,2 @@
 export * from './WfoStartPage';
+export * from './mappers';

package/src/rtk/endpoints/index.ts

@@ -8,8 +8,10 @@ export * from './products';
 export * from './productsSummary';
 export * from './relatedSubscriptions';
 export * from './settings';
+export * from './startOptions';
 export * from './streamMessages';
 export * from './subscriptionDetail';
+export * from './subscriptionInUseByRelationsList';
+export * from './subscriptionList';
+export * from './subscriptionListSummary';
 export * from './subscriptionsDropdownOptions';
-export * from './relatedSubscriptions';
-export * from './startOptions';

package/src/rtk/endpoints/subscriptionInUseByRelationsList.ts

@@ -0,0 +1,67 @@
+import { NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS } from '@/configuration';
+import { CacheTags, orchestratorApi } from '@/rtk';
+import {
+    InUseByRelationDetail,
+    InUseByRelationsDetailResult,
+    SubscriptionStatus,
+} from '@/types';
+
+const nonTerminalSubscriptionStatuses = [
+    SubscriptionStatus.INITIAL,
+    SubscriptionStatus.ACTIVE,
+    SubscriptionStatus.MIGRATING,
+    SubscriptionStatus.DISABLED,
+    SubscriptionStatus.PROVISIONING,
+].join('|');
+
+export const subscriptionInUseByRelationQuery = `
+    query SubscriptionsInUseByRelationsDetails(
+        $subscriptionIds: String!
+    ) {
+        subscriptions(
+            first: ${NUMBER_OF_ITEMS_REPRESENTING_ALL_ITEMS}
+            after: 0
+            filterBy: [{field: "subscriptionId", value: $subscriptionIds},{field: "status", value: ${nonTerminalSubscriptionStatuses}}]
+          ) {
+            page {
+              product {
+                name
+              }
+              description
+              subscriptionId
+              status
+            }
+          }
+    }
+`;
+
+export type InUseByRelationsDetailResponse = {
+    inUseByRelationDetails: InUseByRelationDetail[];
+};
+
+const subscriptionInUseByRelationsListApi = orchestratorApi.injectEndpoints({
+    endpoints: (builder) => ({
+        getInUseByRelationDetails: builder.query<
+            InUseByRelationsDetailResponse,
+            { subscriptionIds: string }
+        >({
+            query: (variables) => ({
+                document: subscriptionInUseByRelationQuery,
+                variables,
+            }),
+            transformResponse: (
+                response: InUseByRelationsDetailResult,
+            ): InUseByRelationsDetailResponse => {
+                const subscriptions = response.subscriptions.page || [];
+
+                return {
+                    inUseByRelationDetails: subscriptions,
+                };
+            },
+            providesTags: [CacheTags.subscriptionList],
+        }),
+    }),
+});
+
+export const { useGetInUseByRelationDetailsQuery } =
+    subscriptionInUseByRelationsListApi;

package/src/rtk/slices/orchestratorComponentOverride.ts

@@ -1,8 +1,7 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { Slice, createSlice } from '@reduxjs/toolkit';
 
-import { SummaryCard } from '@/components/WfoSummary';
 import { FieldValue, SubscriptionDetail } from '@/types';
 
 export type ValueOverrideFunction = (fieldValue: FieldValue) => ReactNode;
@@ -16,8 +15,8 @@ export type WfoSubscriptionDetailGeneralConfiguration = {
 export type OrchestratorComponentOverride = {
     startPage?: {
         summaryCardConfigurationOverride?: (
-            defaultItems: SummaryCard[],
-        ) => SummaryCard[];
+            defaultItems: ReactElement[],
+        ) => ReactElement[];
     };
     subscriptionDetail?: {
         valueOverrides?: ValueOverrideConfiguration;
@@ -32,10 +31,9 @@ type OrchestratorComponentOverrideSlice = Slice<OrchestratorComponentOverride>;
 
 export const getOrchestratorComponentOverrideSlice = (
     config: OrchestratorComponentOverride,
-): OrchestratorComponentOverrideSlice => {
-    return createSlice({
+): OrchestratorComponentOverrideSlice =>
+    createSlice({
         name: 'orchestratorComponentOverride',
         initialState: config,
         reducers: {},
     });
-};

package/src/types/types.ts

@@ -356,6 +356,10 @@ export interface RelatedSubscriptionsResult {
     >;
 }
 
+export interface InUseByRelationsDetailResult {
+    subscriptions: GraphQlSinglePage<InUseByRelationDetail>;
+}
+
 export type StartComboBoxOption = {
     data: {
         workflowName: string;
@@ -480,6 +484,13 @@ export type RelatedSubscription = Pick<
     customer: Pick<Customer, 'fullname'>;
 };
 
+export type InUseByRelationDetail = Pick<
+    Subscription,
+    'subscriptionId' | 'description'
+> & {
+    product: Pick<ProductDefinition, 'name'>;
+};
+
 export type ExternalService = {
     externalServiceKey: string;
     externalServiceId: string;