@orchestrator-ui/orchestrator-ui-components 7.4.0 → 7.5.0

package/src/pages/settings/WfoSettingsPage.tsx

@@ -3,196 +3,166 @@ import React, { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import {
-    EuiCodeBlock,
-    EuiFlexItem,
-    EuiPanel,
-    EuiSpacer,
-    EuiTab,
-    EuiTabs,
-    EuiText,
-} from '@elastic/eui';
+import { EuiCodeBlock, EuiFlexItem, EuiPanel, EuiSpacer, EuiTab, EuiTabs, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
 
-import {
-    WfoEngineStatus,
-    WfoFlushSettings,
-    WfoModifySettings,
-    WfoWorkerStatus,
-} from '@/components';
+import { WfoEngineStatus, WfoFlushSettings, WfoModifySettings, WfoWorkerStatus } from '@/components';
 import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { getStyles } from '@/components/WfoFilterTabs/styles';
 import { WfoAoStackStatus } from '@/components/WfoSettings/WfoAoStackStatus';
-import {
-    useGetOrchestratorConfig,
-    useOrchestratorTheme,
-    useWithOrchestratorTheme,
-} from '@/hooks';
+import { useGetOrchestratorConfig, useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
 import { useGetEnvironmentVariablesQuery } from '@/rtk';
 import { EnvironmentVariable, EnvironmentVariables } from '@/types';
 
 export enum WfoSettingsTab {
-    ACTIONS = 'ACTIONS',
-    ENV_SETTINGS = 'ENV_SETTINGS',
+  ACTIONS = 'ACTIONS',
+  ENV_SETTINGS = 'ENV_SETTINGS',
 }
 
 export const WfoActionSettings = () => {
-    const { theme } = useOrchestratorTheme();
-    const { enableAoStackStatus } = useGetOrchestratorConfig();
-
-    return (
-        <>
-            <div css={{ maxWidth: theme.base * 40 }}>
-                <WfoFlushSettings />
-                <EuiSpacer />
-                <WfoModifySettings />
-                <EuiSpacer />
-                <WfoEngineStatus />
-                {enableAoStackStatus && (
-                    <>
-                        <EuiSpacer />
-                        <WfoAoStackStatus />
-                    </>
-                )}
-                <EuiSpacer />
-                <WfoWorkerStatus />
-            </div>
-        </>
-    );
+  const { theme } = useOrchestratorTheme();
+  const { enableAoStackStatus } = useGetOrchestratorConfig();
+
+  return (
+    <>
+      <div css={{ maxWidth: theme.base * 40 }}>
+        <WfoFlushSettings />
+        <EuiSpacer />
+        <WfoModifySettings />
+        <EuiSpacer />
+        <WfoEngineStatus />
+        {enableAoStackStatus && (
+          <>
+            <EuiSpacer />
+            <WfoAoStackStatus />
+          </>
+        )}
+        <EuiSpacer />
+        <WfoWorkerStatus />
+      </div>
+    </>
+  );
 };
 
 export const WfoEnvSettings = () => {
-    const t = useTranslations('settings.page');
-    const { theme } = useOrchestratorTheme();
-    const { data } = useGetEnvironmentVariablesQuery();
+  const t = useTranslations('settings.page');
+  const { theme } = useOrchestratorTheme();
+  const { data } = useGetEnvironmentVariablesQuery();
 
-    const mapToRepresentableVariables = (variables: EnvironmentVariable[]) => {
-        return variables
-            .map(({ env_name, env_value }) => `${env_name}=${env_value}`)
-            .join('\n');
-    };
+  const mapToRepresentableVariables = (variables: EnvironmentVariable[]) => {
+    return variables.map(({ env_name, env_value }) => `${env_name}=${env_value}`).join('\n');
+  };
 
-    const renderEnvSettings = () => {
-        return (
-            data &&
-            data.map(({ name, variables }: EnvironmentVariables) => {
-                const showVariables = mapToRepresentableVariables(variables);
-
-                return (
-                    <>
-                        <EuiFlexItem>
-                            <EuiPanel
-                                hasShadow={false}
-                                color="subdued"
-                                paddingSize="l"
-                            >
-                                <EuiText size="s">
-                                    <h2>
-                                        {name.replace('_', ' ').toUpperCase()}
-                                    </h2>
-                                </EuiText>
-
-                                <EuiSpacer />
-
-                                <EuiCodeBlock
-                                    fontSize="m"
-                                    paddingSize="m"
-                                    css={css({
-                                        background:
-                                            theme.colors.borderBaseSubdued,
-                                    })}
-                                >
-                                    {showVariables}
-                                </EuiCodeBlock>
-                            </EuiPanel>
-                        </EuiFlexItem>
-                        <EuiSpacer />
-                    </>
-                );
-            })
-        );
-    };
+  const renderEnvSettings = () => {
+    return (
+      data
+      && data.map(({ name, variables }: EnvironmentVariables) => {
+        const showVariables = mapToRepresentableVariables(variables);
 
-    const emptyEnvSettings = () => {
         return (
+          <>
             <EuiFlexItem>
-                <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
-                    <EuiText size="s">
-                        <h2>
-                            {t('noSettingsExposed')}{' '}
-                            <a
-                                href="https://workfloworchestrator.org/orchestrator-core/reference-docs/app/settings-overview/"
-                                target="_blank"
-                            >
-                                {t('settingsOverviewLink')}
-                            </a>
-                        </h2>
-                    </EuiText>
-                </EuiPanel>
+              <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+                <EuiText size="s">
+                  <h2>{name.replace('_', ' ').toUpperCase()}</h2>
+                </EuiText>
+
+                <EuiSpacer />
+
+                <EuiCodeBlock
+                  fontSize="m"
+                  paddingSize="m"
+                  css={css({
+                    background: theme.colors.borderBaseSubdued,
+                  })}
+                >
+                  {showVariables}
+                </EuiCodeBlock>
+              </EuiPanel>
             </EuiFlexItem>
+            <EuiSpacer />
+          </>
         );
-    };
+      })
+    );
+  };
 
+  const emptyEnvSettings = () => {
     return (
-        <div css={{ maxWidth: theme.base * 45 }}>
-            {data?.length ? renderEnvSettings() : emptyEnvSettings()}
-        </div>
+      <EuiFlexItem>
+        <EuiPanel hasShadow={false} color="subdued" paddingSize="l">
+          <EuiText size="s">
+            <h2>
+              {t('noSettingsExposed')}{' '}
+              <a
+                href="https://workfloworchestrator.org/orchestrator-core/reference-docs/app/settings-overview/"
+                target="_blank"
+              >
+                {t('settingsOverviewLink')}
+              </a>
+            </h2>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
     );
+  };
+
+  return <div css={{ maxWidth: theme.base * 45 }}>{data?.length ? renderEnvSettings() : emptyEnvSettings()}</div>;
 };
 
 export const settingsTabs = [
-    {
-        id: WfoSettingsTab.ACTIONS,
-        translationKey: 'actions',
-        content: <WfoActionSettings />,
-    },
-    {
-        id: WfoSettingsTab.ENV_SETTINGS,
-        translationKey: 'envSettings',
-        content: <WfoEnvSettings />,
-    },
+  {
+    id: WfoSettingsTab.ACTIONS,
+    translationKey: 'actions',
+    content: <WfoActionSettings />,
+  },
+  {
+    id: WfoSettingsTab.ENV_SETTINGS,
+    translationKey: 'envSettings',
+    content: <WfoEnvSettings />,
+  },
 ];
 
 export const WfoSettingsPage = () => {
-    const t = useTranslations('main');
-    const tabTranslations = useTranslations('settings.tabs');
-    const { tabStyle } = useWithOrchestratorTheme(getStyles);
-
-    const [selectedTabId, setSelectedTabId] = useQueryParam(
-        'activeTab',
-        withDefault(StringParam, WfoSettingsTab.ACTIONS),
-    );
-
-    const selectedTabContent = useMemo(() => {
-        return settingsTabs.find((obj) => obj.id === selectedTabId)?.content;
-    }, [selectedTabId]);
-
-    const onSelectedTabChanged = (id: string) => {
-        setSelectedTabId(id);
-    };
-
-    const renderTabs = () => {
-        return settingsTabs.map((tab, index) => (
-            <EuiTab
-                css={tabStyle}
-                key={index}
-                onClick={() => onSelectedTabChanged(tab.id)}
-                isSelected={tab.id === selectedTabId}
-            >
-                {tabTranslations(tab.translationKey)}
-            </EuiTab>
-        ));
-    };
-
-    return (
-        <>
-            <WfoContentHeader title={t('settings')} />
-
-            <EuiTabs>{renderTabs()}</EuiTabs>
-
-            <EuiSpacer size="xxl" />
-
-            {selectedTabContent}
-        </>
-    );
+  const t = useTranslations('main');
+  const tabTranslations = useTranslations('settings.tabs');
+  const { tabStyle } = useWithOrchestratorTheme(getStyles);
+
+  const [selectedTabId, setSelectedTabId] = useQueryParam(
+    'activeTab',
+    withDefault(StringParam, WfoSettingsTab.ACTIONS),
+  );
+
+  const selectedTabContent = useMemo(() => {
+    return settingsTabs.find((obj) => obj.id === selectedTabId)?.content;
+  }, [selectedTabId]);
+
+  const onSelectedTabChanged = (id: string) => {
+    setSelectedTabId(id);
+  };
+
+  const renderTabs = () => {
+    return settingsTabs.map((tab, index) => (
+      <EuiTab
+        css={tabStyle}
+        key={index}
+        onClick={() => onSelectedTabChanged(tab.id)}
+        isSelected={tab.id === selectedTabId}
+      >
+        {tabTranslations(tab.translationKey)}
+      </EuiTab>
+    ));
+  };
+
+  return (
+    <>
+      <WfoContentHeader title={t('settings')} />
+
+      <EuiTabs>{renderTabs()}</EuiTabs>
+
+      <EuiSpacer size="xxl" />
+
+      {selectedTabContent}
+    </>
+  );
 };

package/src/pages/startPage/WfoStartPage.tsx

@@ -5,13 +5,13 @@ import { useTranslations } from 'next-intl';
 import { EuiPageHeader } from '@elastic/eui';
 
 import {
-    WfoActiveWorkflowsSummaryCard,
-    WfoFailedTasksSummaryCard,
-    WfoLatestActiveSubscriptionsSummaryCard,
-    WfoLatestOutOfSyncSubscriptionSummaryCard,
-    WfoMyWorkflowsSummaryCard,
-    WfoProductsSummaryCard,
-    WfoSummaryCards,
+  WfoActiveWorkflowsSummaryCard,
+  WfoFailedTasksSummaryCard,
+  WfoLatestActiveSubscriptionsSummaryCard,
+  WfoLatestOutOfSyncSubscriptionSummaryCard,
+  WfoMyWorkflowsSummaryCard,
+  WfoProductsSummaryCard,
+  WfoSummaryCards,
 } from '@/components';
 import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { PolicyResource } from '@/configuration';
@@ -21,42 +21,33 @@ import { toOptionalArrayEntry } from '@/utils';
 import { useStartPageSummaryCardConfigurationOverride } from './useStartPageSummaryCardConfigurationOverride';
 
 export const WfoStartPage = () => {
-    const t = useTranslations('main');
-
-    const { overrideSummaryCards } =
-        useStartPageSummaryCardConfigurationOverride();
-
-    const { isAllowed } = usePolicy();
-    const { session } = useWfoSession();
-    const username = session?.user?.name ?? '';
-
-    // 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={username} />,
-            !!username,
-        ),
-        <WfoActiveWorkflowsSummaryCard key="activeWorkflows" />,
-        ...toOptionalArrayEntry(
-            <WfoFailedTasksSummaryCard key="failedTasks" />,
-            isAllowed(PolicyResource.NAVIGATION_TASKS),
-        ),
-        <WfoLatestOutOfSyncSubscriptionSummaryCard key="latestOutOfSyncSubscription" />,
-        <WfoLatestActiveSubscriptionsSummaryCard key="latestActiveSubscriptions" />,
-        <WfoProductsSummaryCard key="products" />,
-    ];
-
-    const summaryCards =
-        overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
-
-    return (
-        <>
-            <WfoContentHeader
-                title={
-                    <EuiPageHeader pageTitle={`${t('welcome')} ${username}`} />
-                }
-            />
-            <WfoSummaryCards>{summaryCards}</WfoSummaryCards>
-        </>
-    );
+  const t = useTranslations('main');
+
+  const { overrideSummaryCards } = useStartPageSummaryCardConfigurationOverride();
+
+  const { isAllowed } = usePolicy();
+  const { session } = useWfoSession();
+  const username = session?.user?.name ?? '';
+
+  // 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={username} />, !!username),
+    <WfoActiveWorkflowsSummaryCard key="activeWorkflows" />,
+    ...toOptionalArrayEntry(
+      <WfoFailedTasksSummaryCard key="failedTasks" />,
+      isAllowed(PolicyResource.NAVIGATION_TASKS),
+    ),
+    <WfoLatestOutOfSyncSubscriptionSummaryCard key="latestOutOfSyncSubscription" />,
+    <WfoLatestActiveSubscriptionsSummaryCard key="latestActiveSubscriptions" />,
+    <WfoProductsSummaryCard key="products" />,
+  ];
+
+  const summaryCards = overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
+
+  return (
+    <>
+      <WfoContentHeader title={<EuiPageHeader pageTitle={`${t('welcome')} ${username}`} />} />
+      <WfoSummaryCards>{summaryCards}</WfoSummaryCards>
+    </>
+  );
 };

package/src/pages/startPage/mappers.ts

@@ -4,18 +4,16 @@ import { ProcessSummary } from '@/rtk';
 import { SubscriptionSummary } from '@/types';
 import { formatDate } from '@/utils';
 
-export const mapProcessSummaryToSummaryCardListItem = (
-    processSummary: ProcessSummary,
-): SummaryCardListItem => ({
-    title: processSummary.workflowName,
-    value: formatDate(processSummary?.startedAt),
-    url: `${PATH_WORKFLOWS}/${processSummary.processId}`,
+export const mapProcessSummaryToSummaryCardListItem = (processSummary: ProcessSummary): SummaryCardListItem => ({
+  title: processSummary.workflowName,
+  value: formatDate(processSummary?.startedAt),
+  url: `${PATH_WORKFLOWS}/${processSummary.processId}`,
 });
 
 export const mapSubscriptionSummaryToSummaryCardListItem = (
-    subscription: SubscriptionSummary,
+  subscription: SubscriptionSummary,
 ): SummaryCardListItem => ({
-    title: subscription.description,
-    value: formatDate(subscription.startDate),
-    url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
+  title: subscription.description,
+  value: formatDate(subscription.startDate),
+  url: `${PATH_SUBSCRIPTIONS}/${subscription.subscriptionId}`,
 });

package/src/pages/startPage/queryVariables.ts

@@ -1,120 +1,111 @@
 import { MAXIMUM_ITEMS_FOR_BULK_FETCHING } from '@/configuration';
 import {
-    GraphqlFilter,
-    GraphqlQueryVariables,
-    Process,
-    ProductsSummary,
-    SortOrder,
-    Subscription,
-    SubscriptionStatus,
+  GraphqlFilter,
+  GraphqlQueryVariables,
+  Process,
+  ProductsSummary,
+  SortOrder,
+  Subscription,
+  SubscriptionStatus,
 } from '@/types';
 
 const baseQueryVariables: Partial<GraphqlQueryVariables<unknown>> = {
-    first: 5,
-    after: 0,
+  first: 5,
+  after: 0,
 };
-const baseQueryVariablesForSubscription: Partial<
-    GraphqlQueryVariables<Subscription>
-> = {
-    ...baseQueryVariables,
-    sortBy: {
-        field: 'startDate',
-        order: SortOrder.DESC,
-    },
+const baseQueryVariablesForSubscription: Partial<GraphqlQueryVariables<Subscription>> = {
+  ...baseQueryVariables,
+  sortBy: {
+    field: 'startDate',
+    order: SortOrder.DESC,
+  },
 };
 
 const baseQueryVariablesForProcess: Partial<GraphqlQueryVariables<Process>> = {
-    ...baseQueryVariables,
-    sortBy: {
-        field: 'startedAt',
-        order: SortOrder.DESC,
-    },
+  ...baseQueryVariables,
+  sortBy: {
+    field: 'startedAt',
+    order: SortOrder.DESC,
+  },
 };
 
 const getTaskFilter = (isTask: boolean): GraphqlFilter<Process> => {
-    return {
-        // Todo: isTask is not a key of Process
-        // However, backend still supports it. Field should not be a keyof ProcessListItem (or process)
-        // https://github.com/workfloworchestrator/orchestrator-ui/issues/290
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore waiting for fix in backend
-        field: 'isTask',
-        value: isTask ? 'true' : 'false',
-    };
+  return {
+    // Todo: isTask is not a key of Process
+    // However, backend still supports it. Field should not be a keyof ProcessListItem (or process)
+    // https://github.com/workfloworchestrator/orchestrator-ui/issues/290
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore waiting for fix in backend
+    field: 'isTask',
+    value: isTask ? 'true' : 'false',
+  };
 };
 
-export const subscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription> =
+export const subscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription> = {
+  ...baseQueryVariablesForSubscription,
+  filterBy: [
     {
-        ...baseQueryVariablesForSubscription,
-        filterBy: [
-            {
-                field: 'status',
-                value: 'Active',
-            },
-        ],
-    };
+      field: 'status',
+      value: 'Active',
+    },
+  ],
+};
 
-export const outOfSyncSubscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription> =
+export const outOfSyncSubscriptionsListSummaryQueryVariables: GraphqlQueryVariables<Subscription> = {
+  ...baseQueryVariablesForSubscription,
+  query: 'insync:false',
+  filterBy: [
     {
-        ...baseQueryVariablesForSubscription,
-        query: 'insync:false',
-        filterBy: [
-            {
-                field: 'status',
-                value: 'Active-Provisioning',
-            },
-        ],
-    };
+      field: 'status',
+      value: 'Active-Provisioning',
+    },
+  ],
+};
 
-export const getMyWorkflowListSummaryQueryVariables = (
-    username: string,
-): GraphqlQueryVariables<Process> => ({
-    ...baseQueryVariablesForProcess,
-    filterBy: [
-        getTaskFilter(false),
-        {
-            field: 'createdBy',
-            value: username,
-        },
-    ],
+export const getMyWorkflowListSummaryQueryVariables = (username: string): GraphqlQueryVariables<Process> => ({
+  ...baseQueryVariablesForProcess,
+  filterBy: [
+    getTaskFilter(false),
+    {
+      field: 'createdBy',
+      value: username,
+    },
+  ],
 });
 
-export const activeWorkflowsListSummaryQueryVariables: GraphqlQueryVariables<Process> =
+export const activeWorkflowsListSummaryQueryVariables: GraphqlQueryVariables<Process> = {
+  ...baseQueryVariablesForProcess,
+  filterBy: [
+    getTaskFilter(false),
     {
-        ...baseQueryVariablesForProcess,
-        filterBy: [
-            getTaskFilter(false),
-            {
-                field: 'lastStatus',
-                value: 'created-running-suspended-waiting-failed-resumed-inconsistent_data-api_unavailable-awaiting_callback',
-            },
-        ],
-    };
+      field: 'lastStatus',
+      value: 'created-running-suspended-waiting-failed-resumed-inconsistent_data-api_unavailable-awaiting_callback',
+    },
+  ],
+};
 
 export const taskListSummaryQueryVariables: GraphqlQueryVariables<Process> = {
-    ...baseQueryVariablesForProcess,
-    filterBy: [
-        getTaskFilter(true),
-        {
-            field: 'lastStatus',
-            value: 'failed-inconsistent_data-api_unavailable',
-        },
-    ],
+  ...baseQueryVariablesForProcess,
+  filterBy: [
+    getTaskFilter(true),
+    {
+      field: 'lastStatus',
+      value: 'failed-inconsistent_data-api_unavailable',
+    },
+  ],
 };
 
-export const productsSummaryQueryVariables: GraphqlQueryVariables<
-    ProductsSummary & Subscription
-> = {
-    first: MAXIMUM_ITEMS_FOR_BULK_FETCHING,
-    after: 0,
-    sortBy: {
-        field: 'name',
-        order: SortOrder.ASC,
+export const productsSummaryQueryVariables: GraphqlQueryVariables<ProductsSummary & Subscription> = {
+  first: MAXIMUM_ITEMS_FOR_BULK_FETCHING,
+  after: 0,
+  sortBy: {
+    field: 'name',
+    order: SortOrder.ASC,
+  },
+  filterBy: [
+    {
+      field: 'status',
+      value: `!${SubscriptionStatus.TERMINATED}`,
     },
-    filterBy: [
-        {
-            field: 'status',
-            value: `!${SubscriptionStatus.TERMINATED}`,
-        },
-    ],
+  ],
 };