@orchestrator-ui/orchestrator-ui-components 2.0.0 → 2.1.0

package/src/pages/processes/WfoProcessDetail.tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router';
 import {
     EuiButton,
     EuiFlexGroup,
-    EuiFlexItem,
     EuiPanel,
     EuiSpacer,
     EuiText,
@@ -21,6 +20,7 @@ import {
     WfoTimeline,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { PolicyResource } from '@/configuration/policy-resources';
 import { ConfirmationDialogContext } from '@/contexts';
 import { useCheckEngineStatus, useOrchestratorTheme, usePolicy } from '@/hooks';
@@ -192,63 +192,55 @@ export const WfoProcessDetail = ({
 
     return (
         <>
-            <EuiFlexGroup>
-                <EuiFlexItem>
-                    <WfoTitleWithWebsocketBadge title={pageTitle} />
-                    <EuiSpacer />
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title={pageTitle} />}
+                subtitle={
                     <WfoProductInformationWithLink
                         productNames={productNames}
                         workflowName={processDetail?.workflowName ?? ''}
                     />
-                </EuiFlexItem>
-                <EuiFlexGroup
-                    justifyContent="flexEnd"
-                    direction="row"
-                    css={{ flexGrow: 0 }}
-                    gutterSize="s"
-                >
-                    <WfoIsAllowedToRender
-                        resource={PolicyResource.PROCESS_RETRY}
+                }
+            >
+                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_RETRY}>
+                    <EuiButton
+                        onClick={handleActionButtonClick(retryAction)}
+                        iconType={() => (
+                            <WfoRefresh
+                                color={
+                                    retryButtonIsDisabled
+                                        ? theme.colors.subduedText
+                                        : theme.colors.link
+                                }
+                            />
+                        )}
+                        isDisabled={retryButtonIsDisabled}
                     >
-                        <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('retry')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
+                <WfoIsAllowedToRender resource={PolicyResource.PROCESS_ABORT}>
+                    <EuiButton
+                        onClick={handleActionButtonClick(abortAction)}
+                        iconType={() => (
+                            <WfoXCircleFill
+                                color={
+                                    abortButtonIsDisabled
+                                        ? theme.colors.subduedText
+                                        : theme.colors.danger
+                                }
+                            />
+                        )}
+                        color="danger"
+                        isDisabled={abortButtonIsDisabled}
                     >
-                        <EuiButton
-                            onClick={handleActionButtonClick(abortAction)}
-                            iconType={() => (
-                                <WfoXCircleFill
-                                    color={
-                                        abortButtonIsDisabled
-                                            ? theme.colors.subduedText
-                                            : theme.colors.danger
-                                    }
-                                />
-                            )}
-                            color="danger"
-                            isDisabled={abortButtonIsDisabled}
+                        {t('abort')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
+                <>
+                    {processDetail && processIsTask && (
+                        <WfoIsAllowedToRender
+                            resource={PolicyResource.PROCESS_DELETE}
                         >
-                            {t('abort')}
-                        </EuiButton>
-                    </WfoIsAllowedToRender>
-                    {processDetail &&
-                        processIsTask &&
-                        isAllowed(PolicyResource.PROCESS_DELETE) && (
                             <EuiButton
                                 onClick={handleActionButtonClick(deleteAction)}
                                 iconType={() => (
@@ -265,10 +257,10 @@ export const WfoProcessDetail = ({
                             >
                                 {t('delete')}
                             </EuiButton>
-                        )}
-                </EuiFlexGroup>
-            </EuiFlexGroup>
-            <EuiSpacer />
+                        </WfoIsAllowedToRender>
+                    )}
+                </>
+            </WfoContentHeader>
 
             <EuiPanel
                 hasShadow={false}

package/src/pages/settings/WfoSettingsPage.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { EuiHorizontalRule, EuiPageHeader, EuiSpacer } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
+
+import { EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
 
 import {
     WfoEngineStatus,
@@ -8,17 +10,20 @@ import {
     WfoModifySettings,
     WfoWorkerStatus,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useOrchestratorTheme } from '@/hooks';
 
 export const WfoSettingsPage = () => {
     const { theme } = useOrchestratorTheme();
+    const t = useTranslations('main');
 
     return (
         <>
-            <EuiSpacer />
+            <WfoContentHeader
+                title={t('settings')}
+                subtitle={<EuiHorizontalRule margin="s" />}
+            />
 
-            <EuiPageHeader pageTitle="Settings" />
-            <EuiHorizontalRule />
             <div css={{ maxWidth: theme.base * 40 }}>
                 <WfoFlushSettings />
                 <EuiSpacer />

package/src/pages/startPage/WfoStartPage.tsx

@@ -1,5 +1,9 @@
 import React, { ReactElement } from 'react';
 
+import { useTranslations } from 'next-intl';
+
+import { EuiPageHeader } from '@elastic/eui';
+
 import {
     WfoActiveWorkflowsSummaryCard,
     WfoFailedTasksSummaryCard,
@@ -9,6 +13,7 @@ import {
     WfoProductsSummaryCard,
     WfoSummaryCards,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { PolicyResource } from '@/configuration';
 import { usePolicy, useWfoSession } from '@/hooks';
 import { toOptionalArrayEntry } from '@/utils';
@@ -16,6 +21,8 @@ import { toOptionalArrayEntry } from '@/utils';
 import { useStartPageSummaryCardConfigurationOverride } from './useStartPageSummaryCardConfigurationOverride';
 
 export const WfoStartPage = () => {
+    const t = useTranslations('main');
+
     const { overrideSummaryCards } =
         useStartPageSummaryCardConfigurationOverride();
 
@@ -42,5 +49,14 @@ export const WfoStartPage = () => {
     const summaryCards =
         overrideSummaryCards?.(defaultSummaryCards) || defaultSummaryCards;
 
-    return <WfoSummaryCards>{summaryCards}</WfoSummaryCards>;
+    return (
+        <>
+            <WfoContentHeader
+                title={
+                    <EuiPageHeader pageTitle={`${t('welcome')} ${username}`} />
+                }
+            />
+            <WfoSummaryCards>{summaryCards}</WfoSummaryCards>
+        </>
+    );
 };

package/src/pages/subscriptions/WfoSubscriptionsListPage.tsx

@@ -18,6 +18,7 @@ import {
     WfoTitleWithWebsocketBadge,
     subscriptionListTabs,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
 import { SortOrder } from '@/types';
 
@@ -77,11 +78,9 @@ export const WfoSubscriptionsListPage = () => {
 
     return (
         <>
-            <EuiSpacer />
-
-            <WfoTitleWithWebsocketBadge title={t('title')} />
-
-            <EuiSpacer size="m" />
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title={t('title')} />}
+            />
 
             <WfoFilterTabs
                 tabs={subscriptionListTabs}

package/src/pages/tasks/WfoTasksListPage.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiButton, EuiSpacer } from '@elastic/eui';
 
 import {
     ACTIVE_TASKS_LIST_TABLE_LOCAL_STORAGE_KEY,
@@ -23,6 +23,7 @@ import {
     WfoProcessesList,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { toSortedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/';
 import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { PolicyResource } from '@/configuration/policy-resources';
@@ -143,38 +144,23 @@ export const WfoTasksListPage = () => {
 
     return (
         <>
-            <EuiSpacer />
-
-            <EuiFlexGroup>
-                <EuiFlexItem>
-                    <WfoTitleWithWebsocketBadge title="Tasks" />
-                </EuiFlexItem>
-
-                <EuiFlexItem>
-                    <EuiFlexGroup justifyContent="flexEnd">
-                        {' '}
-                        <WfoIsAllowedToRender
-                            resource={PolicyResource.TASKS_RETRY_ALL}
-                        >
-                            <EuiButton
-                                onClick={handleRerunAllButtonClick}
-                                iconType={() => (
-                                    <WfoRefresh
-                                        color={theme.colors.primaryText}
-                                    />
-                                )}
-                            >
-                                {t('rerunAll')}
-                            </EuiButton>
-                        </WfoIsAllowedToRender>
-                        <WfoIsAllowedToRender
-                            resource={PolicyResource.TASKS_CREATE}
-                        >
-                            <WfoStartTaskButtonComboBox />
-                        </WfoIsAllowedToRender>
-                    </EuiFlexGroup>
-                </EuiFlexItem>
-            </EuiFlexGroup>
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title="Tasks" />}
+            >
+                <WfoIsAllowedToRender resource={PolicyResource.TASKS_RETRY_ALL}>
+                    <EuiButton
+                        onClick={handleRerunAllButtonClick}
+                        iconType={() => (
+                            <WfoRefresh color={theme.colors.primaryText} />
+                        )}
+                    >
+                        {t('rerunAll')}
+                    </EuiButton>
+                </WfoIsAllowedToRender>
+                <WfoIsAllowedToRender resource={PolicyResource.TASKS_CREATE}>
+                    <WfoStartTaskButtonComboBox />
+                </WfoIsAllowedToRender>
+            </WfoContentHeader>
 
             <WfoFilterTabs
                 tabs={defaultTasksListTabs}

package/src/pages/workflows/WfoWorkflowsListPage.tsx

@@ -19,6 +19,7 @@ import {
     WfoProcessesList,
     WfoTitleWithWebsocketBadge,
 } from '@/components';
+import { WfoContentHeader } from '@/components/WfoContentHeader/WfoContentHeader';
 import { useDataDisplayParams, useStoredTableConfig } from '@/hooks';
 import { SortOrder } from '@/types';
 
@@ -84,11 +85,9 @@ export const WfoWorkflowsListPage = () => {
 
     return (
         <>
-            <EuiSpacer />
-
-            <WfoTitleWithWebsocketBadge title={t('title')} />
-
-            <EuiSpacer size="m" />
+            <WfoContentHeader
+                title={<WfoTitleWithWebsocketBadge title={t('title')} />}
+            />
 
             <WfoFilterTabs
                 tabs={defaultWorkflowsListTabs}

package/src/rtk/endpoints/index.ts

@@ -15,3 +15,4 @@ export * from './subscriptionInUseByRelationsList';
 export * from './subscriptionList';
 export * from './subscriptionListSummary';
 export * from './subscriptionsDropdownOptions';
+export * from './forms';

package/src/rtk/endpoints/relatedSubscriptions.ts

@@ -60,10 +60,11 @@ export type RelatedSubscriptionsResponse = {
     relatedSubscriptions: RelatedSubscription[];
 } & BaseGraphQlResult;
 
-type RelatedSubscriptionVariables = GraphqlQueryVariables<RelatedSubscription> &
-    Pick<Subscription, 'subscriptionId'> & {
-        terminatedSubscriptionFilter?: GraphqlFilter<RelatedSubscription>;
-    };
+export type RelatedSubscriptionVariables =
+    GraphqlQueryVariables<RelatedSubscription> &
+        Pick<Subscription, 'subscriptionId'> & {
+            terminatedSubscriptionFilter?: GraphqlFilter<RelatedSubscription>;
+        };
 
 const relatedSubscriptionsApi = orchestratorApi.injectEndpoints({
     endpoints: (build) => ({

package/src/rtk/endpoints/subscriptionActions.ts

@@ -1,6 +1,7 @@
 import { SUBSCRIPTION_ACTIONS_ENDPOINT } from '@/configuration';
 import { BaseQueryTypes, orchestratorApi } from '@/rtk';
-import { SubscriptionActions } from '@/types';
+import { CacheTagType, SubscriptionActions } from '@/types';
+import { getCacheTag } from '@/utils/cacheTag';
 
 const subscriptionActionsApi = orchestratorApi.injectEndpoints({
     endpoints: (build) => ({
@@ -13,6 +14,15 @@ const subscriptionActionsApi = orchestratorApi.injectEndpoints({
             extraOptions: {
                 baseQueryType: BaseQueryTypes.fetch,
             },
+            providesTags: (result, error, queryArguments) => {
+                if (!error && result) {
+                    return getCacheTag(
+                        CacheTagType.subscriptions,
+                        queryArguments.subscriptionId,
+                    );
+                }
+                return [];
+            },
         }),
     }),
 });

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+    target: 'es2020',
+    format: ['esm'],
+    splitting: false,
+    sourcemap: true,
+    dts: true,
+    tsconfig: 'tsconfig.build.json',
+});