@orchestrator-ui/orchestrator-ui-components 8.9.2 → 9.0.0

package/package.json

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

package/src/components/WfoError/WfoError.tsx

@@ -17,7 +17,7 @@ export const WfoError = () => {
   const { theme } = useOrchestratorTheme();
   return (
     <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
-      <WfoXCircleFill color={theme.colors.danger} />
+      <WfoXCircleFill color={theme.colors.danger} width={32} height={32} />
       <h1>{t('errorMessage')}</h1>
     </EuiFlexGroup>
   );
@@ -30,7 +30,7 @@ export const WfoErrorWithMessage = ({ error }: WfoErrorWithMessageProps) => {
   return (
     <>
       <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
-        <WfoXCircleFill color={theme.colors.danger} />
+        <WfoXCircleFill color={theme.colors.danger} width={32} height={32} />
         <EuiText color={theme.colors.textDanger}>
           {t('errorMessage')} ({message})
         </EuiText>

package/src/components/WfoInlineNoteEdit/WfoSubscriptionDetailNoteEdit.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { useGetSubscriptionDetailQuery } from '@/rtk';
 import { useStartProcessMutation } from '@/rtk/endpoints/forms';
-import { useUpdateSubscriptionDetailNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
+import { useUpdateSubscriptionNoteOptimisticMutation } from '@/rtk/endpoints/subscriptionListMutation';
 import { SubscriptionDetail } from '@/types';
 import { INVISIBLE_CHARACTER } from '@/utils';
 
@@ -18,13 +18,13 @@ export const WfoSubscriptionDetailNoteEdit: FC<WfoSubscriptionDetailNoteEditProp
   subscriptionId,
   onlyShowOnHover = false,
 }) => {
-  const { data, endpointName } = useGetSubscriptionDetailQuery({
+  const { data } = useGetSubscriptionDetailQuery({
     subscriptionId,
   });
 
   const selectedItem = data?.subscription ?? { note: '' };
   const [startProcess] = useStartProcessMutation();
-  const [updateSub] = useUpdateSubscriptionDetailNoteOptimisticMutation();
+  const [updateSubscriptionNoteOptimistic] = useUpdateSubscriptionNoteOptimisticMutation();
 
   const triggerNoteModifyWorkflow = (note: string) => {
     const noteModifyPayload = [{ subscription_id: subscriptionId }, { note: note }];
@@ -33,11 +33,7 @@ export const WfoSubscriptionDetailNoteEdit: FC<WfoSubscriptionDetailNoteEditProp
       userInputs: noteModifyPayload,
     });
 
-    updateSub({
-      queryName: endpointName ?? '',
-      subscriptionId: subscriptionId,
-      note: note,
-    });
+    updateSubscriptionNoteOptimistic({ subscriptionId, note });
   };
 
   return (

package/src/components/WfoInlineNoteEdit/WfoSubscriptionNoteEdit.tsx

@@ -8,7 +8,7 @@ import { INVISIBLE_CHARACTER } from '@/utils';
 
 interface WfoSubscriptionNoteEditProps {
   onlyShowOnHover?: boolean;
-  queryVariables: Record<string, unknown>;
+  queryVariables: object;
   endpointName: string | undefined;
   subscriptionId: string;
   note: string | null;
@@ -22,7 +22,7 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
   note,
 }) => {
   const [startProcess] = useStartProcessMutation();
-  const [updateSub] = useUpdateSubscriptionNoteOptimisticMutation();
+  const [updateSubscriptionNoteOptimistic] = useUpdateSubscriptionNoteOptimisticMutation();
 
   const triggerNoteModifyWorkflow = (note: string) => {
     const noteModifyPayload = [{ subscription_id: subscriptionId }, { note: note === INVISIBLE_CHARACTER ? '' : note }];
@@ -31,11 +31,10 @@ export const WfoSubscriptionNoteEdit: FC<WfoSubscriptionNoteEditProps> = ({
       userInputs: noteModifyPayload,
     });
 
-    updateSub({
-      queryName: endpointName ?? '',
-      subscriptionId: subscriptionId,
-      graphQlQueryVariables: queryVariables,
-      note: note,
+    updateSubscriptionNoteOptimistic({
+      subscriptionId,
+      note,
+      listQuery: { queryName: endpointName ?? '', queryVariables },
     });
   };
 

package/src/components/WfoKeyValueTable/styles.ts

@@ -63,8 +63,32 @@ export const getStyles = ({ theme }: WfoThemeHelpers) => {
     color: theme.colors.textParagraph,
     display: 'flex',
     alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: theme.size.s,
     overflowWrap: 'anywhere',
     whiteSpace: 'pre-wrap',
+
+    '& > *': {
+      maxWidth: '100%',
+      flexGrow: 1,
+    },
+
+    '& > .euiBadge + .euiBadge': {
+      marginInlineStart: 0,
+    },
+
+    '&:has(.euiInlineEdit), & > :has(.euiInlineEdit)': {
+      flexGrow: 1,
+    },
+
+    '.euiInlineEditText .euiButtonEmpty': {
+      blockSize: 'auto',
+      whiteSpace: 'normal',
+      textAlign: 'start',
+    },
+    '.euiInlineEditText .eui-textTruncate': {
+      whiteSpace: 'pre-wrap !important',
+    },
   });
 
   const clipboardIconStyle = css({

package/src/components/WfoPageTemplate/paths.ts

@@ -3,7 +3,6 @@ export const PATH_START_NEW_WORKFLOW = '/workflows/new';
 export const PATH_START_NEW_TASK = '/tasks/new';
 export const PATH_WORKFLOWS = '/workflows';
 export const PATH_SUBSCRIPTIONS = '/subscriptions';
-export const PATH_SUBSCRIPTIONS_BETA = '/beta-subscriptions';
 export const PATH_METADATA = '/metadata';
 export const PATH_METADATA_PRODUCTS = '/metadata/products';
 export const PATH_METADATA_PRODUCT_BLOCKS = '/metadata/productblocks';

package/src/components/WfoPydanticForm/fields/WfoLabel.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { PydanticFormElement } from 'pydantic-forms';
 
+import { euiFontSizeFromScale } from '@elastic/eui';
+
 import { useOrchestratorTheme } from '@/hooks';
 
 export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
@@ -11,7 +13,9 @@ export const WfoLabel: PydanticFormElement = ({ pydanticFormField }) => {
     <div data-testid={pydanticFormField.id}>
       <label
         css={{
-          color: theme.colors.textParagraph,
+          fontSize: euiFontSizeFromScale('m', theme),
+          fontWeight: theme.font.weight.semiBold,
+          color: theme.colors.link,
           display: 'block',
         }}
         id={pydanticFormField.id}

package/src/components/WfoPydanticForm/fields/styles.ts

@@ -1,3 +1,4 @@
+import { euiFontSizeFromScale, euiLineHeightFromBaseline } from '@elastic/eui';
 import { css } from '@emotion/react';
 
 import type { WfoThemeHelpers } from '@/hooks';
@@ -114,15 +115,23 @@ export const getCommonFormFieldStyles = ({ theme }: WfoThemeHelpers) => {
       color: theme.colors.textParagraph,
     },
     '.euiFormLabel': {
-      color: theme.colors.textParagraph,
+      fontSize: euiFontSizeFromScale('m', theme),
+      lineHeight: euiLineHeightFromBaseline('m', theme),
+      color: theme.colors.link,
       cursor: 'text',
-      '&.euiFormLabel-isFocused': {
-        color: theme.colors.textPrimary,
+      '&.euiFormLabel-isInvalid': {
+        color: theme.colors.textDanger,
       },
     },
     '.euiFormRow__labelWrapper': {
       display: 'flex',
       flexDirection: 'column',
+      '> .euiText': {
+        fontSize: euiFontSizeFromScale('s', theme),
+        lineHeight: euiLineHeightFromBaseline('s', theme),
+        fontWeight: theme.font.weight.regular,
+        color: theme.colors.textParagraph,
+      },
     },
   });
 

package/src/components/WfoSettingsModal/WfoInformationModal.tsx

@@ -14,11 +14,12 @@ export type WfoInformationModalProps = {
   title: string;
   onClose: () => void;
   children: ReactNode;
+  maxWidth?: number;
 };
 
-export const WfoInformationModal: FC<WfoInformationModalProps> = ({ title, onClose, children }) => {
+export const WfoInformationModal: FC<WfoInformationModalProps> = ({ title, onClose, children, maxWidth }) => {
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} maxWidth={maxWidth}>
       <EuiModalHeader>
         <EuiModalHeaderTitle size="xs">{title}</EuiModalHeaderTitle>
       </EuiModalHeader>

package/src/components/WfoSubscriptionsList/index.ts

@@ -1,3 +1,2 @@
-export * from './subscriptionResultMappers';
+export * from './subscriptionListItem';
 export * from './subscriptionListTabs';
-export * from './WfoSubscriptionsList';

package/src/components/WfoSubscriptionsList/subscriptionListItem.ts

@@ -0,0 +1,14 @@
+import { Subscription } from '@/types';
+
+export type SubscriptionListItem = Pick<
+  Subscription,
+  'subscriptionId' | 'description' | 'status' | 'insync' | 'note'
+> & {
+  startDate: Date | null;
+  endDate: Date | null;
+  productName: string;
+  tag: string | null;
+  customerFullname: string;
+  customerShortcode: string;
+  metadata: object | null;
+};

package/src/components/WfoSubscriptionsList/subscriptionListTabs.ts

@@ -1,5 +1,4 @@
 import { WfoFilterTab } from '../../components';
-import { SubscriptionListItem } from './subscriptionResultMappers';
 
 export enum WfoSubscriptionListTab {
   ACTIVE = 'ACTIVE',
@@ -8,36 +7,18 @@ export enum WfoSubscriptionListTab {
   ALL = 'ALL',
 }
 
-export const subscriptionListTabs: WfoFilterTab<WfoSubscriptionListTab, SubscriptionListItem>[] = [
+export const subscriptionListTabs: WfoFilterTab<WfoSubscriptionListTab>[] = [
   {
     id: WfoSubscriptionListTab.ACTIVE,
     translationKey: 'active',
-    alwaysOnFilters: [
-      {
-        field: 'status',
-        value: 'active',
-      },
-    ],
   },
   {
     id: WfoSubscriptionListTab.TERMINATED,
     translationKey: 'terminated',
-    alwaysOnFilters: [
-      {
-        field: 'status',
-        value: 'terminated',
-      },
-    ],
   },
   {
     id: WfoSubscriptionListTab.TRANSIENT,
     translationKey: 'transient',
-    alwaysOnFilters: [
-      {
-        field: 'status',
-        value: 'initial-provisioning-migrating',
-      },
-    ],
   },
   {
     id: WfoSubscriptionListTab.ALL,

package/src/components/WfoSummary/WfoLatestActiveSubscriptionsSummaryCard.tsx

@@ -3,30 +3,34 @@ 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 { mapSubscriptionSearchResultToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { getSubscriptionSummarySearchPayload } from '@/pages/startPage/searchPayloads';
+import { useSearchQuery } from '@/rtk';
+import { Filter } from '@/types';
 import { optionalArrayMapper } from '@/utils';
 
+// Elasticsearch equivalent of the list page's default Active tab filter
+// (`subscription.status == "active"`), so the count on the card matches the list.
+const activeSubscriptionsFilter = {
+  bool: {
+    must: [{ term: { 'subscription.status': 'active' } }],
+  },
+} as unknown as Filter;
+
+const activeSubscriptionsSearchPayload = getSubscriptionSummarySearchPayload(activeSubscriptionsFilter);
+
 export const WfoLatestActiveSubscriptionsSummaryCard = () => {
   const t = useTranslations('startPage.activeSubscriptions');
 
-  const {
-    data: subscriptionsSummaryResult,
-    isFetching,
-    isLoading,
-  } = useGetSubscriptionSummaryListQuery(subscriptionsListSummaryQueryVariables);
+  const { data, isFetching, isLoading } = useSearchQuery(activeSubscriptionsSearchPayload);
 
   return (
     <WfoSummaryCard
       headerTitle={t('headerTitle')}
-      headerValue={subscriptionsSummaryResult?.pageInfo.totalItems ?? '-'}
+      headerValue={data?.cursor?.total_items ?? '-'}
       headerStatus={SummaryCardStatus.Neutral}
       listTitle={t('listTitle')}
-      listItems={optionalArrayMapper(
-        subscriptionsSummaryResult?.subscriptions,
-        mapSubscriptionSummaryToSummaryCardListItem,
-      )}
+      listItems={optionalArrayMapper(data?.data, mapSubscriptionSearchResultToSummaryCardListItem)}
       button={{ name: t('buttonText'), url: PATH_SUBSCRIPTIONS }}
       isLoading={isLoading}
       isFetching={isFetching}

package/src/components/WfoSummary/WfoLatestOutOfSyncSubscriptionSummaryCard.tsx

@@ -3,37 +3,50 @@ import React from 'react';
 import { useTranslations } from 'next-intl';
 
 import { PATH_SUBSCRIPTIONS, SummaryCardStatus, WfoSubscriptionListTab, WfoSummaryCard } from '@/components';
-import { mapSubscriptionSummaryToSummaryCardListItem } from '@/pages/startPage/mappers';
-import { outOfSyncSubscriptionsListSummaryQueryVariables } from '@/pages/startPage/queryVariables';
-import { useGetSubscriptionSummaryListQuery } from '@/rtk';
+import { mapSubscriptionSearchResultToSummaryCardListItem } from '@/pages/startPage/mappers';
+import { getSubscriptionSummarySearchPayload } from '@/pages/startPage/searchPayloads';
+import { useSearchQuery } from '@/rtk';
+import { Filter } from '@/types';
 import { optionalArrayMapper } from '@/utils';
 import { WfoQueryParams, getUrlWithQueryParams } from '@/utils/getQueryParams';
 
+const OUT_OF_SYNC_CEL =
+  'subscription.insync == false && (subscription.status == "provisioning" || subscription.status == "active")';
+
+// Elasticsearch equivalent of OUT_OF_SYNC_CEL. The list page produces the same clauses from the
+// CEL in the button link, so the count on the card matches the list.
+const outOfSyncSubscriptionsFilter = {
+  bool: {
+    must: [
+      { term: { 'subscription.insync': false } },
+      {
+        bool: {
+          should: [{ term: { 'subscription.status': 'active' } }, { term: { 'subscription.status': 'provisioning' } }],
+        },
+      },
+    ],
+  },
+} as unknown as Filter;
+
+const outOfSyncSubscriptionsSearchPayload = getSubscriptionSummarySearchPayload(outOfSyncSubscriptionsFilter);
+
 export const WfoLatestOutOfSyncSubscriptionSummaryCard = () => {
   const t = useTranslations('startPage.outOfSyncSubscriptions');
 
-  const {
-    data: outOfSyncSubscriptionsSummaryResult,
-    isFetching,
-    isLoading,
-  } = useGetSubscriptionSummaryListQuery(outOfSyncSubscriptionsListSummaryQueryVariables);
+  const { data, isFetching, isLoading } = useSearchQuery(outOfSyncSubscriptionsSearchPayload);
 
   const queryParams = {
     [WfoQueryParams.ACTIVE_TAB]: WfoSubscriptionListTab.ALL,
-    [WfoQueryParams.SORT_BY]: 'field-startDate_order-ASC',
-    [WfoQueryParams.QUERY_STRING]: 'status:(provisioning|active) insync:false',
+    [WfoQueryParams.FILTER_STRING]: OUT_OF_SYNC_CEL,
   };
 
   return (
     <WfoSummaryCard
       headerTitle={t('headerTitle')}
-      headerValue={outOfSyncSubscriptionsSummaryResult?.pageInfo.totalItems ?? '-'}
+      headerValue={data?.cursor?.total_items ?? '-'}
       headerStatus={SummaryCardStatus.Error}
       listTitle={t('listTitle')}
-      listItems={optionalArrayMapper(
-        outOfSyncSubscriptionsSummaryResult?.subscriptions,
-        mapSubscriptionSummaryToSummaryCardListItem,
-      )}
+      listItems={optionalArrayMapper(data?.data, mapSubscriptionSearchResultToSummaryCardListItem)}
       button={{
         name: t('buttonText'),
         url: getUrlWithQueryParams(PATH_SUBSCRIPTIONS, queryParams),

package/src/components/WfoTable/WfoAdvancedTable/WfoAdvancedTable.tsx

@@ -190,7 +190,11 @@ export const WfoAdvancedTable = <T extends object>({
       )}
 
       {rowDetailData && (
-        <WfoInformationModal title={detailModalTitle} onClose={() => setSelectedDataForDetailModal(undefined)}>
+        <WfoInformationModal
+          title={detailModalTitle}
+          onClose={() => setSelectedDataForDetailModal(undefined)}
+          maxWidth={theme.breakpoint.m}
+        >
           <WfoKeyValueTable keyValues={rowDetailData} showCopyToClipboardIcon />
         </WfoInformationModal>
       )}

package/src/components/WfoTable/WfoStructuredSearchTable/WfoApplyFilterButton.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { useTranslations } from 'next-intl';
+
+import { EuiButton } from '@elastic/eui';
+
+import { WfoDebounceCountdown } from '@/components/WfoTable/WfoStructuredSearchTable/WfoDebounceCountdown';
+import { getWfoStructuredSearchTableStyles } from '@/components/WfoTable/WfoStructuredSearchTable/styles';
+import { DebouncedPendingRun, useWithOrchestratorTheme } from '@/hooks';
+
+interface ApplyFilterButtonProps {
+  isDisabled: boolean;
+  pendingSearchRun?: DebouncedPendingRun;
+  onClick: () => void;
+}
+
+export const WfoApplyFilterButton = ({ isDisabled, pendingSearchRun, onClick }: ApplyFilterButtonProps) => {
+  const t = useTranslations('common');
+  const { applyFilterContentStyles } = useWithOrchestratorTheme(getWfoStructuredSearchTableStyles);
+
+  return (
+    <EuiButton
+      onClick={onClick}
+      id={'button-apply-filter'}
+      data-test-id={'button-apply-filter'}
+      fill
+      type="submit"
+      aria-label={t('applyFilter')}
+      disabled={isDisabled}
+    >
+      <span css={applyFilterContentStyles}>
+        {pendingSearchRun && <WfoDebounceCountdown key={pendingSearchRun.id} durationMs={pendingSearchRun.delay} />}
+        {t('applyFilter')}
+      </span>
+    </EuiButton>
+  );
+};

package/src/components/WfoTable/WfoStructuredSearchTable/WfoDebounceCountdown.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import { keyframes } from '@emotion/react';
+
+const SIZE = 14;
+const STROKE_WIDTH = 2;
+const CENTER = SIZE / 2;
+const RADIUS = (SIZE - STROKE_WIDTH) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+const sweep = keyframes({
+  from: { strokeDashoffset: CIRCUMFERENCE },
+  to: { strokeDashoffset: 0 },
+});
+
+interface WfoDebounceCountdownProps {
+  durationMs: number;
+}
+
+/**
+ * Ring that fills over `durationMs`, showing how long is left before the pending search runs.
+ * Render it with a key that changes per scheduled run, so the sweep restarts from empty every
+ * time an edit pushes the debounce back.
+ */
+export const WfoDebounceCountdown = ({ durationMs }: WfoDebounceCountdownProps) => (
+  <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`} aria-hidden="true" css={{ flex: 'none' }}>
+    <circle
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      opacity={0.3}
+    />
+    <circle
+      cx={CENTER}
+      cy={CENTER}
+      r={RADIUS}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeDasharray={CIRCUMFERENCE}
+      // Start the sweep at 12 o'clock instead of 3 o'clock.
+      transform={`rotate(-90 ${CENTER} ${CENTER})`}
+      css={{
+        strokeDashoffset: CIRCUMFERENCE,
+        animation: `${sweep} ${durationMs}ms linear forwards`,
+        // A ring that jumps straight to full is still an honest "a search is queued" marker.
+        '@media (prefers-reduced-motion: reduce)': {
+          animation: 'none',
+          strokeDashoffset: 0,
+        },
+      }}
+    />
+  </svg>
+);