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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "1.14.0",
+    "version": "1.14.2",
     "license": "Apache-2.0",
     "description": "Library of UI Components used to display the workflow orchestrator frontend",
     "author": {

package/src/components/WfoSubscription/WfoInUseByRelations.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+import {
+    WfoError,
+    WfoFirstPartUUID,
+    WfoKeyValueTable,
+    WfoLoading,
+} from '@/components';
+import type { WfoKeyValueTableDataType } from '@/components';
+import { PATH_SUBSCRIPTIONS } from '@/components';
+import { useWithOrchestratorTheme } from '@/hooks';
+import { useGetInUseByRelationDetailsQuery } from '@/rtk';
+import { InUseByRelation, InUseByRelationDetail } from '@/types';
+
+import { getStyles } from './styles';
+
+interface WfoInUseByRelationsProps {
+    inUseByRelations: InUseByRelation[];
+}
+
+export const WfoInUseByRelations = ({
+    inUseByRelations,
+}: WfoInUseByRelationsProps) => {
+    const t = useTranslations('subscriptions.detail');
+    const { inUseByRelationDetailsStyle } = useWithOrchestratorTheme(getStyles);
+    const subscriptionIds = inUseByRelations
+        .map((relation) => relation.subscription_id)
+        .join('|');
+    const { data, isLoading, isError } = useGetInUseByRelationDetailsQuery({
+        subscriptionIds,
+    });
+
+    if (isError) {
+        return <WfoError />;
+    }
+
+    if (isLoading) {
+        return <WfoLoading />;
+    }
+
+    const getKeyValues = (
+        inUseByRelationDetails: InUseByRelationDetail,
+    ): WfoKeyValueTableDataType[] => {
+        return [
+            {
+                key: t('subscriptionId'),
+                value: (
+                    <WfoFirstPartUUID
+                        UUID={inUseByRelationDetails.subscriptionId}
+                    />
+                ),
+                textToCopy: inUseByRelationDetails.subscriptionId,
+            },
+            {
+                key: t('description'),
+                value: (
+                    <Link
+                        href={`/${PATH_SUBSCRIPTIONS}/${inUseByRelationDetails.subscriptionId}`}
+                    >
+                        {inUseByRelationDetails.description}
+                    </Link>
+                ),
+                textToCopy: inUseByRelationDetails.description,
+            },
+            {
+                key: t('productName'),
+                value: inUseByRelationDetails.product.name,
+                textToCopy: inUseByRelationDetails.product.name,
+            },
+        ];
+    };
+
+    return (
+        <>
+            {data?.inUseByRelationDetails.map((relation, index) => {
+                const keyValues = getKeyValues(relation);
+
+                return (
+                    <div css={inUseByRelationDetailsStyle} key={index}>
+                        <WfoKeyValueTable
+                            keyValues={keyValues}
+                            showCopyToClipboardIcon={true}
+                        />
+                    </div>
+                );
+            })}
+        </>
+    );
+};

package/src/components/WfoSubscription/WfoSubscriptionProductBlock/WfoSubscriptionProductBlock.tsx

@@ -14,14 +14,11 @@ import {
     EuiText,
 } from '@elastic/eui';
 
-import {
-    PATH_SUBSCRIPTIONS,
-    WfoJsonCodeBlock,
-    WfoProductBlockKeyValueRow,
-} from '@/components';
+import { PATH_SUBSCRIPTIONS, WfoProductBlockKeyValueRow } from '@/components';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { FieldValue, InUseByRelation } from '@/types';
 
+import { WfoInUseByRelations } from '../WfoInUseByRelations';
 import {
     getFieldFromProductBlockInstanceValues,
     getProductBlockTitle,
@@ -143,10 +140,14 @@ export const WfoSubscriptionProductBlock = ({
                                             <b>{t('inUseByRelations')}</b>
                                         </td>
                                         <td css={rightColumnStyle}>
-                                            <WfoJsonCodeBlock
-                                                data={inUseByRelations}
-                                                isBasicStyle
-                                            />
+                                            {(inUseByRelations.length === 0 &&
+                                                'None') || (
+                                                <WfoInUseByRelations
+                                                    inUseByRelations={
+                                                        inUseByRelations
+                                                    }
+                                                />
+                                            )}
                                         </td>
                                     </tr>
                                 </>

package/src/components/WfoSubscription/styles.ts

@@ -43,6 +43,14 @@ export const getStyles = (theme: EuiThemeComputed) => {
         border: 0,
     });
 
+    const inUseByRelationDetailsStyle = css({
+        borderColor: theme.colors.lightShade,
+        borderStyle: 'solid',
+        borderWidth: 'thin',
+        marginBottom: theme.base / 4,
+        borderRadius: theme.border.radius.medium,
+    });
+
     return {
         contentCellStyle,
         headerCellStyle,
@@ -52,5 +60,6 @@ export const getStyles = (theme: EuiThemeComputed) => {
         emptyCellStyle,
         lastContentCellStyle,
         lastHeaderCellStyle,
+        inUseByRelationDetailsStyle,
     };
 };

package/src/components/WfoSummary/WfoActiveWorkflowsSummaryCard.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    PATH_WORKFLOWS,
+    SummaryCardStatus,
+    WfoSummaryCard,
+} from '@/components';
+import { mapProcessSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { activeWorkflowsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
+import { useGetProcessListSummaryQuery } from '@/rtk';
+import { optionalArrayMapper } from '@/utils';
+
+export const WfoActiveWorkflowsSummaryCard = () => {
+    const t = useTranslations('startPage.activeWorkflows');
+
+    const {
+        data: activeWorkflowsSummaryResponse,
+        isFetching: activeWorkflowsSummaryIsFetching,
+    } = useGetProcessListSummaryQuery(activeWorkflowsListSummaryQueryVariables);
+
+    return (
+        <WfoSummaryCard
+            headerTitle={t('headerTitle')}
+            headerValue={
+                activeWorkflowsSummaryResponse?.pageInfo.totalItems ?? 0
+            }
+            headerStatus={SummaryCardStatus.Success}
+            listTitle={t('listTitle')}
+            listItems={optionalArrayMapper(
+                activeWorkflowsSummaryResponse?.processes,
+                mapProcessSummaryToSummaryCardListItem,
+            )}
+            button={{ name: t('buttonText'), url: PATH_WORKFLOWS }}
+            isLoading={activeWorkflowsSummaryIsFetching}
+        />
+    );
+};

package/src/components/WfoSummary/WfoFailedTasksSummaryCard.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { PATH_TASKS, SummaryCardStatus, WfoSummaryCard } from '@/components';
+import { mapProcessSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { taskListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
+import { useGetProcessListSummaryQuery } from '@/rtk';
+import { optionalArrayMapper } from '@/utils';
+
+export const WfoFailedTasksSummaryCard = () => {
+    const t = useTranslations('startPage.failedTasks');
+
+    const {
+        data: failedTasksSummaryResponse,
+        isFetching: failedTasksSummaryIsFetching,
+    } = useGetProcessListSummaryQuery(taskListSummaryQueryVariables);
+
+    return (
+        <WfoSummaryCard
+            headerTitle={t('headerTitle')}
+            headerValue={failedTasksSummaryResponse?.pageInfo.totalItems ?? 0}
+            headerStatus={SummaryCardStatus.Error}
+            listTitle={t('listTitle')}
+            listItems={optionalArrayMapper(
+                failedTasksSummaryResponse?.processes,
+                mapProcessSummaryToSummaryCardListItem,
+            )}
+            button={{ name: t('buttonText'), url: PATH_TASKS }}
+            isLoading={failedTasksSummaryIsFetching}
+        />
+    );
+};

package/src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    PATH_SUBSCRIPTIONS,
+    SummaryCardStatus,
+    WfoSummaryCard,
+} from '@/components';
+import { mapSubscriptionSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { subscriptionsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
+import { useGetSubscriptionSummaryListQuery } from '@/rtk';
+import { optionalArrayMapper } from '@/utils';
+
+export const WfoLatestActiveSubscriptionsSummaryCard = () => {
+    const t = useTranslations('startPage.activeSubscriptions');
+
+    const {
+        data: subscriptionsSummaryResult,
+        isLoading: subscriptionsSummaryIsFetching,
+    } = useGetSubscriptionSummaryListQuery(
+        subscriptionsListSummaryQueryVariables,
+    );
+
+    return (
+        <WfoSummaryCard
+            headerTitle={t('headerTitle')}
+            headerValue={subscriptionsSummaryResult?.pageInfo.totalItems ?? 0}
+            headerStatus={SummaryCardStatus.Neutral}
+            listTitle={t('listTitle')}
+            listItems={optionalArrayMapper(
+                subscriptionsSummaryResult?.subscriptions,
+                mapSubscriptionSummaryToSummaryCardListItem,
+            )}
+            button={{ name: t('buttonText'), url: PATH_SUBSCRIPTIONS }}
+            isLoading={subscriptionsSummaryIsFetching}
+        />
+    );
+};

package/src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    PATH_SUBSCRIPTIONS,
+    SummaryCardStatus,
+    WfoSummaryCard,
+} from '@/components';
+import { mapSubscriptionSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { outOfSyncSubscriptionsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
+import { useGetSubscriptionSummaryListQuery } from '@/rtk';
+import { optionalArrayMapper } from '@/utils';
+
+export const WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
+    const t = useTranslations('startPage.outOfSyncSubscriptions');
+
+    const {
+        data: outOfSyncSubscriptionsSummaryResult,
+        isLoading: outOfSyncsubscriptionsSummaryIsFetching,
+    } = useGetSubscriptionSummaryListQuery(
+        outOfSyncSubscriptionsListSummaryQueryVariables,
+    );
+
+    return (
+        <WfoSummaryCard
+            headerTitle={t('headerTitle')}
+            headerValue={
+                outOfSyncSubscriptionsSummaryResult?.pageInfo.totalItems ?? 0
+            }
+            headerStatus={SummaryCardStatus.Error}
+            listTitle={t('listTitle')}
+            listItems={optionalArrayMapper(
+                outOfSyncSubscriptionsSummaryResult?.subscriptions,
+                mapSubscriptionSummaryToSummaryCardListItem,
+            )}
+            button={{
+                name: t('buttonText'),
+                url: `${PATH_SUBSCRIPTIONS}?activeTab=ALL&sortBy=field-startDate_order-ASC&queryString=status%3A%28provisioning%7Cactive%29+insync%3Afalse`,
+            }}
+            isLoading={outOfSyncsubscriptionsSummaryIsFetching}
+        />
+    );
+};

package/src/components/WfoSummary/WfoMyWorkflowsSummaryCard.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { PATH_WORKFLOWS } from '@/components';
+import {
+    SummaryCardStatus,
+    WfoSummaryCard,
+} from '@/components/WfoSummary/WfoSummaryCard';
+import { mapProcessSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { getMyWorkflowListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
+import { useGetProcessListSummaryQuery } from '@/rtk';
+import { optionalArrayMapper } from '@/utils';
+
+export type WfoMyWorkflowsSummaryCardProps = {
+    username: string;
+};
+
+export const WfoMyWorkflowsSummaryCard: FC<WfoMyWorkflowsSummaryCardProps> = ({
+    username,
+}) => {
+    const t = useTranslations('startPage.myWorkflows');
+
+    const {
+        data: myWorkflowsSummaryResponse,
+        isFetching: myWorkflowsSummaryIsFetching,
+    } = useGetProcessListSummaryQuery(
+        getMyWorkflowListSummaryQueryVariables(username),
+    );
+
+    return (
+        <WfoSummaryCard
+            headerTitle={t('headerTitle')}
+            headerValue={myWorkflowsSummaryResponse?.pageInfo.totalItems ?? 0}
+            headerStatus={SummaryCardStatus.Success}
+            listTitle={t('listTitle')}
+            listItems={optionalArrayMapper(
+                myWorkflowsSummaryResponse?.processes,
+                mapProcessSummaryToSummaryCardListItem,
+            )}
+            button={{
+                name: t('buttonText'),
+                url: `${PATH_WORKFLOWS}?activeTab=COMPLETED&sortBy=field-lastModifiedAt_order-DESC&queryString=createdBy%3A${username}`,
+            }}
+            isLoading={myWorkflowsSummaryIsFetching}
+        />
+    );
+};

package/src/components/WfoSummary/WfoProductsSummaryCard.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import {
+    SummaryCardListItem,
+    SummaryCardStatus,
+    WfoSummaryCard,
+} from '@/components';
+import { productsSummaryQueryVariables } from '@/pages/startPage/queryVariables';
+import { useGetProductsSummaryQuery } from '@/rtk';
+
+export const WfoProductsSummaryCard = () => {
+    const t = useTranslations('startPage.products');
+
+    const {
+        data: productsSummaryResult,
+        isLoading: productsSummaryIsFetching,
+    } = useGetProductsSummaryQuery(productsSummaryQueryVariables);
+
+    const listItems: SummaryCardListItem[] =
+        [...(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>
+                ),
+            })) ?? [];
+
+    return (
+        <WfoSummaryCard
+            headerTitle={t('headerTitle')}
+            headerValue={productsSummaryResult?.pageInfo.totalItems ?? 0}
+            headerStatus={SummaryCardStatus.Neutral}
+            listTitle={t('listTitle')}
+            listItems={listItems}
+            isLoading={productsSummaryIsFetching}
+        />
+    );
+};

package/src/components/WfoSummary/WfoSummaryCard.tsx

@@ -0,0 +1,82 @@
+import React, { FC } from 'react';
+
+import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
+
+import {
+    SummaryCardButtonConfig,
+    SummaryCardListItem,
+    WfoSummaryCardHeader,
+    WfoSummaryCardHeaderProps,
+    WfoSummaryCardList,
+} from '@/components';
+import { getWfoSummaryCardsStyles } from '@/components/WfoSummary/styles';
+import { useOrchestratorTheme } from '@/hooks';
+
+export enum SummaryCardStatus {
+    Success = 'Success',
+    Error = 'Error',
+    Neutral = 'Neutral',
+}
+
+export type WfoSummaryCardProps = {
+    headerTitle: string;
+    headerValue: string | number;
+    headerStatus: SummaryCardStatus;
+    listTitle: string;
+    listItems: SummaryCardListItem[];
+    button?: SummaryCardButtonConfig;
+    isLoading?: boolean;
+};
+
+export const WfoSummaryCard: FC<WfoSummaryCardProps> = ({
+    button,
+    isLoading,
+    headerStatus,
+    headerValue,
+    headerTitle,
+    listTitle,
+    listItems,
+}) => {
+    const { theme } = useOrchestratorTheme();
+    const { cardContainerStyle } = getWfoSummaryCardsStyles(theme);
+
+    const getIconTypeAndColorForHeaderStatus = (
+        status: SummaryCardStatus,
+    ): Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'> => {
+        switch (status) {
+            case SummaryCardStatus.Success:
+                return {
+                    iconType: 'checkInCircleFilled',
+                    iconColor: theme.colors.success,
+                };
+            case SummaryCardStatus.Error:
+                return {
+                    iconType: 'error',
+                    iconColor: theme.colors.danger,
+                };
+            case SummaryCardStatus.Neutral:
+            default:
+                return {
+                    iconType: 'kubernetesPod',
+                    iconColor: theme.colors.primary,
+                };
+        }
+    };
+
+    return (
+        <EuiFlexItem css={cardContainerStyle}>
+            <WfoSummaryCardHeader
+                text={headerTitle}
+                value={headerValue}
+                {...getIconTypeAndColorForHeaderStatus(headerStatus)}
+            />
+            <EuiSpacer size="m" />
+            <WfoSummaryCardList
+                title={listTitle}
+                items={listItems}
+                button={button}
+                isLoading={isLoading}
+            />
+        </EuiFlexItem>
+    );
+};

package/src/components/WfoSummary/WfoSummaryCards.tsx

@@ -1,111 +1,23 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 
-import {
-    EuiFlexGrid,
-    EuiFlexItem,
-    EuiSpacer,
-    useCurrentEuiBreakpoint,
-} from '@elastic/eui';
+import { EuiFlexGrid, useCurrentEuiBreakpoint } from '@elastic/eui';
 
-import {
-    SummaryCardListItem,
-    WfoSummaryCardHeader,
-    WfoSummaryCardHeaderProps,
-} from '@/components/WfoSummary/';
-import { getWfoSummaryCardsStyles } from '@/components/WfoSummary/styles';
-import { useOrchestratorTheme } from '@/hooks';
-
-import {
-    SummaryCardButtonConfig,
-    WfoSummaryCardList,
-} from './WfoSummaryCardList/WfoSummaryCardList';
 import { getNumberOfColumns } from './getNumberOfColumns';
 
-export enum SummaryCardStatus {
-    Success = 'Success',
-    Error = 'Error',
-    Neutral = 'Neutral',
-}
-
-export type SummaryCard = {
-    headerTitle: string;
-    headerValue: string | number;
-    headerStatus: SummaryCardStatus;
-    listTitle: string;
-    listItems: SummaryCardListItem[];
-    button?: SummaryCardButtonConfig;
-    isLoading?: boolean;
-};
-
 export type WfoSummaryCardsProps = {
-    summaryCards: SummaryCard[];
+    children: ReactElement[];
 };
 
-export const WfoSummaryCards: FC<WfoSummaryCardsProps> = ({ summaryCards }) => {
-    const { theme } = useOrchestratorTheme();
-    const { cardContainerStyle } = getWfoSummaryCardsStyles(theme);
+export const WfoSummaryCards: FC<WfoSummaryCardsProps> = ({ children }) => {
     const currentBreakpoint = useCurrentEuiBreakpoint();
 
-    const getIconTypeAndColorForHeaderStatus = (
-        status: SummaryCardStatus,
-    ): Pick<WfoSummaryCardHeaderProps, 'iconType' | 'iconColor'> => {
-        switch (status) {
-            case SummaryCardStatus.Success:
-                return {
-                    iconType: 'checkInCircleFilled',
-                    iconColor: theme.colors.success,
-                };
-            case SummaryCardStatus.Error:
-                return {
-                    iconType: 'error',
-                    iconColor: theme.colors.danger,
-                };
-            case SummaryCardStatus.Neutral:
-            default:
-                return {
-                    iconType: 'kubernetesPod',
-                    iconColor: theme.colors.primary,
-                };
-        }
-    };
-
     return (
         <EuiFlexGrid
             responsive={false}
             columns={getNumberOfColumns(currentBreakpoint)}
             gutterSize="xl"
         >
-            {summaryCards.map(
-                (
-                    {
-                        headerTitle,
-                        headerValue,
-                        headerStatus,
-                        listTitle,
-                        listItems,
-                        button,
-                        isLoading,
-                    },
-                    index,
-                ) => (
-                    <EuiFlexItem key={index} css={cardContainerStyle}>
-                        <WfoSummaryCardHeader
-                            text={headerTitle}
-                            value={headerValue}
-                            {...getIconTypeAndColorForHeaderStatus(
-                                headerStatus,
-                            )}
-                        />
-                        <EuiSpacer size="m" />
-                        <WfoSummaryCardList
-                            title={listTitle}
-                            items={listItems}
-                            button={button}
-                            isLoading={isLoading}
-                        />
-                    </EuiFlexItem>
-                ),
-            )}
+            {children}
         </EuiFlexGrid>
     );
 };

package/src/components/WfoSummary/index.ts

@@ -2,3 +2,11 @@ export * from './getNumberOfColumns';
 export * from './WfoSummaryCardHeader';
 export * from './WfoSummaryCardList';
 export * from './WfoSummaryCards';
+export * from './WfoSummaryCard';
+
+export * from './WfoActiveWorkflowsSummaryCard';
+export * from './WfoFailedTasksSummaryCard';
+export * from './WfoLatestActiveSubscriptionsSummaryCard';
+export * from './WfoLatestOutOfSyncSubscriptionSummaryCard';
+export * from './WfoMyWorkflowsSummaryCard';
+export * from './WfoProductsSummaryCard';

package/src/components/WfoWorkflowSteps/WfoStepStatusIcon/WfoStepStatusIcon.tsx

@@ -82,7 +82,7 @@ export const WfoStepStatusIcon = ({
                     stepStateSuccessIconStyle,
                     theme.colors.primaryText,
                     true,
-                    theme.colors.accent,
+                    theme.colors.darkShade,
                 ];
             case StepStatus.FORM:
                 return [stepStateSuccessIconStyle, theme.colors.link];

package/src/components/index.ts

@@ -6,7 +6,6 @@ export * from './WfoKeyValueTable';
 export * from './WfoPageTemplate';
 export * from './WfoSearchBar';
 export * from './WfoSettingsModal';
-export * from '../pages/settings/WfoSettingsPage';
 export * from './WfoSubscription';
 export * from './WfoTable';
 export * from './WfoTimeline';
@@ -28,3 +27,4 @@ export * from './WfoWorkflowSteps';
 export * from './WfoNoResults';
 export * from './WfoStartButton';
 export * from './WfoSubscriptionsList';
+export * from './WfoSummary';