@orchestrator-ui/orchestrator-ui-components 0.11.0 → 0.12.0

package/src/pages/processes/WfoProcessDetail.tsx

@@ -17,14 +17,17 @@ import {
     PATH_TASKS,
     PATH_WORKFLOWS,
     TimelineItem,
+    WfoIsAllowedToRender,
     WfoLoading,
     WfoTimeline,
 } from '@/components';
+import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import {
     useCheckEngineStatus,
     useMutateProcess,
     useOrchestratorTheme,
+    usePolicy,
 } from '@/hooks';
 import { WfoRefresh, WfoXCircleFill } from '@/icons';
 import { ProcessDetail, ProcessStatus } from '@/types';
@@ -101,6 +104,7 @@ export const WfoProcessDetail = ({
     const { deleteProcess, abortProcess, retryProcess } = useMutateProcess();
     const router = useRouter();
     const { isEngineRunningNow } = useCheckEngineStatus();
+    const { isAllowed } = usePolicy();
 
     const listIncludesStatus = (
         processStatusesForDisabledState: ProcessStatus[],
@@ -195,55 +199,65 @@ export const WfoProcessDetail = ({
                     css={{ flexGrow: 0 }}
                     gutterSize="s"
                 >
-                    <EuiButton
-                        onClick={handleActionButtonClick(retryAction)}
-                        iconType={() => (
-                            <WfoRefresh
-                                color={
-                                    retryButtonIsDisabled
-                                        ? theme.colors.subduedText
-                                        : theme.colors.link
-                                }
-                            />
-                        )}
-                        isDisabled={retryButtonIsDisabled}
+                    <WfoIsAllowedToRender
+                        resource={PolicyResource.PROCESS_RETRY}
                     >
-                        {t('retry')}
-                    </EuiButton>
-                    <EuiButton
-                        onClick={handleActionButtonClick(abortAction)}
-                        iconType={() => (
-                            <WfoXCircleFill
-                                color={
-                                    abortButtonIsDisabled
-                                        ? theme.colors.subduedText
-                                        : theme.colors.danger
-                                }
-                            />
-                        )}
-                        color="danger"
-                        isDisabled={abortButtonIsDisabled}
+                        <EuiButton
+                            onClick={handleActionButtonClick(retryAction)}
+                            iconType={() => (
+                                <WfoRefresh
+                                    color={
+                                        retryButtonIsDisabled
+                                            ? theme.colors.subduedText
+                                            : theme.colors.link
+                                    }
+                                />
+                            )}
+                            isDisabled={retryButtonIsDisabled}
+                        >
+                            {t('retry')}
+                        </EuiButton>
+                    </WfoIsAllowedToRender>
+                    <WfoIsAllowedToRender
+                        resource={PolicyResource.PROCESS_ABORT}
                     >
-                        {t('abort')}
-                    </EuiButton>
-                    {processDetail && processIsTask && (
                         <EuiButton
-                            onClick={handleActionButtonClick(deleteAction)}
+                            onClick={handleActionButtonClick(abortAction)}
                             iconType={() => (
                                 <WfoXCircleFill
                                     color={
-                                        deleteButtonIsDisabled
+                                        abortButtonIsDisabled
                                             ? theme.colors.subduedText
                                             : theme.colors.danger
                                     }
                                 />
                             )}
                             color="danger"
-                            isDisabled={deleteButtonIsDisabled}
+                            isDisabled={abortButtonIsDisabled}
                         >
-                            {t('delete')}
+                            {t('abort')}
                         </EuiButton>
-                    )}
+                    </WfoIsAllowedToRender>
+                    {processDetail &&
+                        processIsTask &&
+                        isAllowed(PolicyResource.PROCESS_DELETE) && (
+                            <EuiButton
+                                onClick={handleActionButtonClick(deleteAction)}
+                                iconType={() => (
+                                    <WfoXCircleFill
+                                        color={
+                                            deleteButtonIsDisabled
+                                                ? theme.colors.subduedText
+                                                : theme.colors.danger
+                                        }
+                                    />
+                                )}
+                                color="danger"
+                                isDisabled={deleteButtonIsDisabled}
+                            >
+                                {t('delete')}
+                            </EuiButton>
+                        )}
                 </EuiFlexGroup>
             </EuiFlexGroup>
             <EuiSpacer />
@@ -295,47 +309,51 @@ export const WfoProcessDetail = ({
                                         : ''
                                 }
                             />
-                            {process && processDetail.subscriptions && (
-                                <EuiFlexGroup
-                                    gutterSize="xs"
-                                    direction="column"
-                                    css={{
-                                        flex: 1,
-                                        overflow: 'hidden',
-                                    }}
-                                >
-                                    <EuiText size="xs">
-                                        {t('relatedSubscriptions')}
-                                    </EuiText>
-                                    <EuiText
+                            {process &&
+                                isAllowed(
+                                    PolicyResource.PROCESS_RELATED_SUBSCRIPTIONS,
+                                ) &&
+                                processDetail.subscriptions && (
+                                    <EuiFlexGroup
+                                        gutterSize="xs"
+                                        direction="column"
                                         css={{
                                             flex: 1,
-                                            whiteSpace: 'nowrap',
                                             overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            fontSize: theme.size.m,
                                         }}
                                     >
-                                        <WfoProcessListSubscriptionsCell
-                                            subscriptions={
-                                                (process &&
-                                                    processDetail?.subscriptions?.page.map(
-                                                        (subscription) => ({
-                                                            subscriptionId:
-                                                                subscription.subscriptionId,
-                                                            description:
-                                                                subscription.description,
-                                                        }),
-                                                    )) ||
-                                                []
-                                            }
-                                            renderDirection={
-                                                RenderDirection.VERTICAL
-                                            }
-                                        />
-                                    </EuiText>
-                                </EuiFlexGroup>
-                            )}
+                                        <EuiText size="xs">
+                                            {t('relatedSubscriptions')}
+                                        </EuiText>
+                                        <EuiText
+                                            css={{
+                                                flex: 1,
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                fontSize: theme.size.m,
+                                            }}
+                                        >
+                                            <WfoProcessListSubscriptionsCell
+                                                subscriptions={
+                                                    (process &&
+                                                        processDetail?.subscriptions?.page.map(
+                                                            (subscription) => ({
+                                                                subscriptionId:
+                                                                    subscription.subscriptionId,
+                                                                description:
+                                                                    subscription.description,
+                                                            }),
+                                                        )) ||
+                                                    []
+                                                }
+                                                renderDirection={
+                                                    RenderDirection.VERTICAL
+                                                }
+                                            />
+                                        </EuiText>
+                                    </EuiFlexGroup>
+                                )}
                         </EuiFlexGroup>
                     ))}
             </EuiPanel>

package/src/pages/startPage/WfoStartPage.tsx

@@ -36,6 +36,14 @@ export const WfoStartPage = () => {
         subscriptionsListSummaryQueryVariables,
         ['subscriptions', 'startPage'],
     );
+    const {
+        data: outOfSyncSubscriptionsSummaryResult,
+        isLoading: outOfSyncsubscriptionsSummaryIsFetching,
+    } = useQueryWithGraphql(
+        getSubscriptionsListSummaryGraphQlQuery(),
+        outOfSyncSubscriptionsListSummaryQueryVariables,
+        ['subscriptions', 'startPage'],
+    );
     const {
         data: processesSummaryResult,
         isLoading: processesSummaryIsFetching,
@@ -82,6 +90,28 @@ export const WfoStartPage = () => {
         isLoading: subscriptionsSummaryIsFetching,
     };
 
+    const latestOutOfSyncSubscriptionsSummaryCard: SummaryCard = {
+        headerTitle: t('outOfSyncSubscriptions.headerTitle'),
+        headerValue:
+            outOfSyncSubscriptionsSummaryResult?.subscriptions.pageInfo
+                .totalItems ?? 0,
+        headerStatus: SummaryCardStatus.Error,
+        listTitle: t('outOfSyncSubscriptions.listTitle'),
+        listItems:
+            outOfSyncSubscriptionsSummaryResult?.subscriptions.page.map(
+                (subscription) => ({
+                    title: subscription.description,
+                    value: formatDate(subscription.startDate),
+                    url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
+                }),
+            ) ?? [],
+        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 latestWorkflowsSummaryCard: SummaryCard = {
         headerTitle: t('activeWorkflows.headerTitle'),
         headerValue: processesSummaryResult?.processes.pageInfo.totalItems ?? 0,
@@ -155,6 +185,7 @@ export const WfoStartPage = () => {
             <WfoSummaryCards
                 summaryCards={[
                     failedTasksSummaryCard,
+                    latestOutOfSyncSubscriptionsSummaryCard,
                     latestWorkflowsSummaryCard,
                     latestActiveSubscriptionsSummaryCard,
                     productsSummaryCard,
@@ -180,6 +211,23 @@ const subscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription
         ],
     };
 
+const outOfSyncSubscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription> =
+    {
+        first: 5,
+        after: 0,
+        sortBy: {
+            field: 'startDate',
+            order: SortOrder.ASC,
+        },
+        query: 'insync:false',
+        filterBy: [
+            {
+                field: 'status',
+                value: 'Active-Provisioning',
+            },
+        ],
+    };
+
 const processListSummaryQueryVariables: GraphqlQueryVariables<Process> = {
     first: 5,
     after: 0,

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -19,6 +19,7 @@ import {
     DEFAULT_PAGE_SIZE,
     StoredTableConfig,
     WfoFilterTabs,
+    WfoIsAllowedToRender,
     WfoStartTaskButtonComboBox,
     WfoTableColumns,
 } from '@/components';
@@ -27,6 +28,7 @@ import {
     ProcessListItem,
     WfoProcessesList,
 } from '@/components/WfoProcessList/WfoProcessesList';
+import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import {
     useCheckEngineStatus,
@@ -150,15 +152,25 @@ export const WfoTasksListPage = () => {
                 <EuiFlexItem>
                     <EuiFlexGroup justifyContent="flexEnd">
                         {' '}
-                        <EuiButton
-                            onClick={handleRerunAllButtonClick}
-                            iconType={() => (
-                                <WfoRefresh color={theme.colors.primaryText} />
-                            )}
+                        <WfoIsAllowedToRender
+                            resource={PolicyResource.TASKS_RETRY_ALL}
                         >
-                            {t('rerunAll')}
-                        </EuiButton>
-                        <WfoStartTaskButtonComboBox />
+                            <EuiButton
+                                onClick={handleRerunAllButtonClick}
+                                iconType={() => (
+                                    <WfoRefresh
+                                        color={theme.colors.primaryText}
+                                    />
+                                )}
+                            >
+                                {t('rerunAll')}
+                            </EuiButton>
+                        </WfoIsAllowedToRender>
+                        <WfoIsAllowedToRender
+                            resource={PolicyResource.TASKS_CREATE}
+                        >
+                            <WfoStartTaskButtonComboBox />
+                        </WfoIsAllowedToRender>
                     </EuiFlexGroup>
                 </EuiFlexItem>
             </EuiFlexGroup>

package/src/types/index.ts

@@ -1 +1,2 @@
 export * from './types';
+export * from './forms';

package/src/utils/string.spec.ts

@@ -1,4 +1,10 @@
-import { camelToHuman, removeSuffix, upperCaseFirstChar } from './strings';
+import {
+    camelToHuman,
+    removeSuffix,
+    snakeToHuman,
+    snakeToKebab,
+    upperCaseFirstChar,
+} from './strings';
 
 describe('upperCaseFirstChar()', () => {
     it("Doesn't crash on an empty string but returns empty string", () => {
@@ -68,3 +74,33 @@ describe('camelToHuman()', () => {
         expect(result).toEqual('A Quick Brown Fox');
     });
 });
+
+describe('snakeToHuman()', () => {
+    it('Returns an empty string when input is an empty string', () => {
+        const result = snakeToHuman('');
+        expect(result).toEqual('');
+    });
+    it('Returns two words from a single underscore snake case word', () => {
+        const result = snakeToHuman('hello_world');
+        expect(result).toEqual('hello world');
+    });
+    it('Returns multiple words from a multiple underscore snake case word', () => {
+        const result = snakeToHuman('quick_brown_fox');
+        expect(result).toEqual('quick brown fox');
+    });
+});
+
+describe('snakeToKebab()', () => {
+    it('Returns an empty string when input is an empty string', () => {
+        const result = snakeToKebab('');
+        expect(result).toEqual('');
+    });
+    it('Returns kebab case word from a single underscore snake case word', () => {
+        const result = snakeToKebab('hello_world');
+        expect(result).toEqual('hello-world');
+    });
+    it('Returns kebab case word from a multiple underscore snake case word', () => {
+        const result = snakeToKebab('quick_brown_fox');
+        expect(result).toEqual('quick-brown-fox');
+    });
+});

package/src/utils/strings.ts

@@ -13,3 +13,12 @@ export const camelToHuman = (value: string): string => {
     const result = value.replace(/([A-Z])/g, ' $1').trimStart();
     return result.charAt(0).toUpperCase() + result.slice(1);
 };
+
+export const snakeToHuman = (value: string): string => {
+    const result = value.replace(/_/g, ' ');
+    return result.charAt(0) + result.slice(1);
+};
+
+export const snakeToKebab = (value: string): string => {
+    return value.replace(/_/g, '-');
+};