@orchestrator-ui/orchestrator-ui-components 8.6.0 → 8.7.0

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

@@ -137,23 +137,53 @@ const DatePicker = ({ handleOnChange, rangeIndex, value: currentValue }: WfoRang
   );
 };
 
-export const WfoValueEditor = ({ field: fieldName, context, handleOnChange, operator, value }: ValueEditorProps) => {
+export const WfoValueEditor = ({
+  field: fieldName,
+  context,
+  handleOnChange,
+  operator,
+  value,
+  className,
+}: ValueEditorProps) => {
   const fieldPathInfoMap = context?.fieldPathInfoMap;
 
   const fieldInfo = fieldPathInfoMap && fieldPathInfoMap.has(fieldName) ? fieldPathInfoMap.get(fieldName) : undefined;
   const uiFieldType = fieldInfo?.ui_types[0] || UiFieldType.text;
 
-  if (uiFieldType === UiFieldType.boolean) {
-    return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
-  }
+  const getEditor = () => {
+    if (uiFieldType === UiFieldType.boolean) {
+      return <BooleanEditor handleOnChange={handleOnChange} value={value} />;
+    }
 
-  if (uiFieldType === UiFieldType.datetime) {
-    return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
-  }
+    if (uiFieldType === UiFieldType.datetime) {
+      return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={DatePicker} value={value} />;
+    }
 
-  if (uiFieldType === UiFieldType.number) {
-    return <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />;
-  }
+    if (uiFieldType === UiFieldType.number) {
+      return (
+        <WfoRangeEditor handleOnChange={handleOnChange} operator={operator} Element={NumberEditor} value={value} />
+      );
+    }
+
+    return <TextEditor handleOnChange={handleOnChange} value={value} />;
+  };
 
-  return <TextEditor handleOnChange={handleOnChange} value={value} />;
+  const handleWrapperKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (event.key !== 'Enter') return;
+    // Restrict to the editor inputs: the editors' own Enter handlers have already run
+    // (bubble phase) and committed the value via blur, so the search sees it. Enter on
+    // the boolean buttons means "select" — its click fires only after this keydown, so
+    // searching there would use the pre-toggle value.
+    if (!(event.target instanceof HTMLInputElement)) return;
+    context?.onValueEditorEnter?.();
+  };
+
+  // react-querybuilder delivers the standard `rule-value` class via this prop; the wrapper
+  // makes it queryable in the DOM (WfoFieldSelector relies on it to move focus here).
+  // `display: contents` keeps the children direct participants in the rule's flex row.
+  return (
+    <div className={className} style={{ display: 'contents' }} onKeyDown={handleWrapperKeyDown}>
+      {getEditor()}
+    </div>
+  );
 };

package/src/components/WfoTable/WfoStructuredSearchTable/styles.ts

@@ -107,11 +107,12 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
   });
   const expandingRowBodyStyles = css({
     display: 'flex',
-    gap: theme.base,
-    fontWeight: theme.font.weight.bold,
-    span: {
-      fontWeight: 'bold',
-    },
+    justifyContent: 'space-between',
+    // Size to the visible scroll viewport (minus the td padding) instead of
+    // the full table width, and keep it pinned there on horizontal scroll
+    position: 'sticky',
+    left: theme.base / 2,
+    width: `calc(100cqw - ${theme.base}px)`,
   });
 
   const addRulePlusStyles = css({
@@ -161,6 +162,19 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     },
   });
 
+  const hideExpandedRowStyle = css({
+    display: 'none',
+  });
+  const dotStyles = css({
+    padding: theme.base / 4,
+  });
+
+  const expandingRowFieldStyles = css({
+    display: 'flex',
+    padding: theme.base / 4,
+    alignItems: 'center',
+  });
+
   return {
     toggleButtonStyles,
     queryBuilderContainerStyles,
@@ -178,5 +192,8 @@ export const getWfoStructuredSearchTableStyles = ({ theme }: WfoThemeHelpers) =>
     addGroupStyles,
     inlineCombinatorStyles,
     ruleGroupBodyGridStyles,
+    hideExpandedRowStyle,
+    expandingRowFieldStyles,
+    dotStyles,
   };
 };

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

@@ -82,6 +82,7 @@ export type WfoTableProps<T extends object> = {
   rowExpandingConfiguration?: {
     uniqueRowId: keyof WfoTableColumnConfig<T>;
     uniqueRowIdToExpandedRowMap: Record<string, ReactNode>;
+    shouldOnlyShowOnHover?: boolean;
   };
   pagination?: Pagination;
   overrideHeader?: (

package/src/components/WfoTable/WfoTable/WfoTableDataRows.tsx

@@ -27,8 +27,15 @@ export const WfoTableDataRows = <T extends object>({
   onRowClick,
   className,
 }: WfoTableDataRowsProps<T>) => {
-  const { cellStyle, cellContentStyle, rowStyle, dataRowStyle, clickableStyle, setWidth } =
-    useWithOrchestratorTheme(getWfoTableStyles);
+  const {
+    cellStyle,
+    cellContentStyle,
+    rowStyle,
+    dataRowStyle,
+    clickableStyle,
+    setWidth,
+    toggleExpandedRowOnHoverStyle,
+  } = useWithOrchestratorTheme(getWfoTableStyles);
 
   const sortedVisibleColumns = getSortedVisibleColumns(columnConfig, columnOrder, hiddenColumns);
 
@@ -37,8 +44,13 @@ export const WfoTableDataRows = <T extends object>({
       {data.map((row, index) => (
         <Fragment key={`table-data-row-${index}`}>
           <tr
-            className={`${className} ${DATA_ROW_CLASS}`}
-            css={[rowStyle, dataRowStyle, onRowClick && clickableStyle]}
+            className={className ? `${className} ${DATA_ROW_CLASS}` : DATA_ROW_CLASS}
+            css={[
+              rowStyle,
+              dataRowStyle,
+              onRowClick && clickableStyle,
+              rowExpandingConfiguration?.shouldOnlyShowOnHover && toggleExpandedRowOnHoverStyle,
+            ]}
             onClick={() => onRowClick?.(row)}
           >
             {sortedVisibleColumns.map(([key, columnConfig]) => {

package/src/components/WfoTable/WfoTable/styles.ts

@@ -31,6 +31,9 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
 
   const tableContainerStyle = css({
     overflowX: 'auto',
+    // Query container so descendants (e.g. expanded rows) can size to the
+    // visible table width with cqw units instead of the full table width
+    containerType: 'inline-size',
   });
 
   const tableStyle = css({
@@ -157,6 +160,10 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     '.eui-xScroll': { display: 'flex', justifyContent: 'flex-start' },
   });
 
+  const toggleExpandedRowOnHoverStyle = css({
+    '&:hover + tr, &:focus-within + tr': { display: 'table-row' },
+  });
+
   return {
     tableContainerStyle,
     tableStyle,
@@ -174,5 +181,6 @@ export const getWfoTableStyles = ({ theme, isDarkModeActive }: WfoThemeHelpers)
     dragAndDropStyle,
     paginationStyle,
     setWidth,
+    toggleExpandedRowOnHoverStyle,
   };
 };

package/src/components/WfoTable/WfoTable/utils.spec.ts

@@ -1,7 +1,12 @@
+import { TableColumnKeys } from '@/components';
 import { ColumnType, WfoTableColumnConfig } from '@/components/WfoTable/WfoTable/WfoTable';
 import { SortOrder } from '@/types';
 
-import { getUpdatedSortOrder, mapSortableAndFilterableValuesToTableColumnConfig } from './utils';
+import {
+  getSortedVisibleColumns,
+  getUpdatedSortOrder,
+  mapSortableAndFilterableValuesToTableColumnConfig,
+} from './utils';
 
 type TestObject = {
   name: string;
@@ -19,6 +24,21 @@ const tableColumnConfig: WfoTableColumnConfig<TestObject> = {
   },
 };
 
+const tableColumnConfigWithControlColumn: WfoTableColumnConfig<TestObject> = {
+  actions: {
+    columnType: ColumnType.CONTROL,
+    renderControl: () => null,
+  },
+  name: {
+    columnType: ColumnType.DATA,
+    label: 'testName',
+  },
+  age: {
+    columnType: ColumnType.DATA,
+    label: 'testAge',
+  },
+};
+
 describe('utils', () => {
   describe('getUpdatedSortOrder()', () => {
     it('returns SortOrder.DESC if the currentSortOrder is SortOrder.ASC', () => {
@@ -38,6 +58,47 @@ describe('utils', () => {
     });
   });
 
+  describe('getSortedVisibleColumns()', () => {
+    it('keeps a control column visible even when its key is present in hiddenColumns', () => {
+      // Given a stale hiddenColumns still listing the control column (e.g. from localStorage)
+      const hiddenColumns = ['actions'] as unknown as TableColumnKeys<TestObject>;
+
+      // When
+      const result = getSortedVisibleColumns(tableColumnConfigWithControlColumn, [], hiddenColumns);
+
+      // Then the control column is still rendered
+      const visibleKeys = result.map(([key]) => key);
+      expect(visibleKeys).toContain('actions');
+    });
+
+    it('hides data columns that are listed in hiddenColumns', () => {
+      // Given
+      const hiddenColumns: TableColumnKeys<TestObject> = ['age'];
+
+      // When
+      const result = getSortedVisibleColumns(tableColumnConfigWithControlColumn, [], hiddenColumns);
+
+      // Then
+      const visibleKeys = result.map(([key]) => key);
+      expect(visibleKeys).not.toContain('age');
+      expect(visibleKeys).toContain('name');
+    });
+
+    it('keeps the control column visible while still hiding a hidden data column', () => {
+      // Given both a control key and a data key are marked hidden
+      const hiddenColumns = ['actions', 'age'] as unknown as TableColumnKeys<TestObject>;
+
+      // When
+      const result = getSortedVisibleColumns(tableColumnConfigWithControlColumn, [], hiddenColumns);
+
+      // Then only the data column is hidden; the control column stays visible
+      const visibleKeys = result.map(([key]) => key);
+      expect(visibleKeys).toContain('actions');
+      expect(visibleKeys).toContain('name');
+      expect(visibleKeys).not.toContain('age');
+    });
+  });
+
   describe('mapSortableAndFilterableValuesToTableColumnConfig()', () => {
     it('sets the sortable and filterable properties for the columnConfig object to true when the colum name is specified in the list', () => {
       // Given

package/src/components/WfoTable/WfoTable/utils.ts

@@ -25,7 +25,10 @@ export const getSortedVisibleColumns = <T extends object>(
     ),
   );
 
-  return tableHeadersEntries.filter(([columnId]) => !hiddenColumns.includes(columnId as keyof T));
+  return tableHeadersEntries.filter(
+    ([columnId, columnConfig]) =>
+      columnConfig.columnType === ColumnType.CONTROL || !hiddenColumns.includes(columnId as keyof T),
+  );
 };
 
 export const getUpdatedSortOrder = (currentSortOrder?: SortOrder) =>

package/src/components/WfoTable/WfoTableSettingsModal/WfoTableSettingsModal.spec.ts

@@ -0,0 +1,45 @@
+import { TableColumnKeys } from '@/components';
+import { ColumnType, WfoTableColumnConfig } from '@/components/WfoTable/WfoTable/WfoTable';
+import { getTableSettingsColumns } from '@/components/WfoTable/WfoTableSettingsModal/utils';
+
+type TestObject = {
+  name: string;
+  age: number;
+};
+
+const columnConfig: WfoTableColumnConfig<TestObject> = {
+  actions: {
+    columnType: ColumnType.CONTROL,
+    renderControl: () => null,
+  },
+  name: {
+    columnType: ColumnType.DATA,
+    label: 'Name',
+  },
+  age: {
+    columnType: ColumnType.DATA,
+    label: 'Age',
+  },
+};
+
+describe('getTableSettingsColumns()', () => {
+  it('excludes control columns and keeps only data columns as toggles', () => {
+    const result = getTableSettingsColumns(columnConfig, []);
+    expect(result.map((column) => column.field)).toEqual(['name', 'age']);
+  });
+
+  it('maps each data column label to name and marks all visible when nothing is hidden', () => {
+    const result = getTableSettingsColumns(columnConfig, []);
+    expect(result).toEqual([
+      { field: 'name', name: 'Name', isVisible: true },
+      { field: 'age', name: 'Age', isVisible: true },
+    ]);
+  });
+
+  it('marks a data column as not visible when it is present in hiddenColumns', () => {
+    const hiddenColumns: TableColumnKeys<TestObject> = ['age'];
+    const result = getTableSettingsColumns(columnConfig, hiddenColumns);
+    expect(result.find((column) => column.field === 'age')?.isVisible).toBe(false);
+    expect(result.find((column) => column.field === 'name')?.isVisible).toBe(true);
+  });
+});

package/src/components/WfoTable/WfoTableSettingsModal/index.ts

@@ -1 +1,2 @@
 export * from './WfoTableSettingsModal';
+export * from './utils';

package/src/components/WfoTable/WfoTableSettingsModal/utils.ts

@@ -0,0 +1,17 @@
+import { ColumnType, TableColumnKeys, TableSettingsColumnConfig, WfoTableColumnConfig } from '@/components';
+
+export const getTableSettingsColumns = <T extends object>(
+  columnConfig: WfoTableColumnConfig<T>,
+  hiddenColumns: TableColumnKeys<T>,
+): TableSettingsColumnConfig<T>[] =>
+  Object.entries(columnConfig)
+    .filter(([, columnItemConfig]) => columnItemConfig.columnType === ColumnType.DATA)
+    .map(([key, { label }]): TableSettingsColumnConfig<T> => {
+      const field = key as keyof T;
+
+      return {
+        field,
+        name: label,
+        isVisible: hiddenColumns.indexOf(field) === -1,
+      };
+    });

package/src/configuration/version.ts

@@ -1 +1 @@
-export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.6.0';
+export const ORCHESTRATOR_UI_LIBRARY_VERSION = '8.7.0';

package/src/hooks/index.ts

@@ -15,3 +15,4 @@ export * from './useGetSchedulesForWorkflow';
 export * from './useGetWorkflowNameById';
 export * from './usePathAutoComplete';
 export * from './useGetPydanticFormsConfig';
+export * from './useLanguageCode';

package/src/hooks/useGetPydanticFormsConfig.tsx

@@ -23,6 +23,7 @@ import {
   WfoArrayField,
   WfoCallout,
   WfoCheckbox,
+  WfoCron,
   WfoDivider,
   WfoDropdown,
   WfoInteger,
@@ -181,6 +182,17 @@ const useGetComponentMatcherExtender = (): ComponentMatcherExtender => {
             return type === PydanticFormFieldType.STRING && format === ('callout' as PydanticFormFieldFormat);
           },
         },
+        {
+          id: 'cron',
+          ElementMatch: {
+            isControlledElement: true,
+            Element: WfoCron,
+          },
+          matcher: (field) => {
+            const { type, schema } = field;
+            return type === PydanticFormFieldType.STRING && schema.title === 'Cron';
+          },
+        },
         {
           id: 'markdownField',
           ElementMatch: {

package/src/hooks/useLanguageCode.ts

@@ -0,0 +1,11 @@
+import { useLocale } from 'next-intl';
+
+export const useLanguageCode = () => {
+  const locale = useLocale();
+  if (!locale) return 'en';
+  try {
+    return typeof Intl !== 'undefined' && 'Locale' in Intl ? new Intl.Locale(locale).language : locale.split(/[-_]/)[0];
+  } catch {
+    return locale.split(/[-_]/)[0] || 'en';
+  }
+};

package/src/messages/en-GB.json

@@ -107,6 +107,24 @@
       "contactPersonName": {
         "placeholder": "Search and add contact persons..."
       },
+      "cron": {
+        "second": "second",
+        "minute": "minute",
+        "hour": "hour",
+        "dayOfMonth": "day (month)",
+        "month": "month",
+        "dayOfWeek": "day (week)",
+        "anyValue": "any value",
+        "valueListSeparator": "value list separator",
+        "rangeOfValues": "range of values",
+        "stepValues": "step values",
+        "allowedValues": "allowed values",
+        "alternativeSingleValues": "alternative single values",
+        "sundayNonStandard": "sunday (non-standard)",
+        "invalidExpression": "Invalid cron expression: {error}",
+        "nextOccurrences": "Next: {dates}",
+        "possibleValues": "Possible values for this field"
+      },
       "ipvAnyNetworkField": {
         "manuallySelectedPrefix": "Manually selected prefix"
       },
@@ -347,6 +365,7 @@
       "endDate": "End date",
       "metadata": "Metadata",
       "note": "Note",
+      "customerId": "Customer ID",
       "customerFullname": "Customer",
       "customerShortcode": "Customer abbr",
       "actions": "Actions"

package/src/messages/nl-NL.json

@@ -108,6 +108,24 @@
       "contactPersonName": {
         "placeholder": "Zoek en voeg contactpersonen toe..."
       },
+      "cron": {
+        "second": "seconde",
+        "minute": "minuut",
+        "hour": "uur",
+        "dayOfMonth": "dag (maand)",
+        "month": "maand",
+        "dayOfWeek": "dag (week)",
+        "anyValue": "elke waarde",
+        "valueListSeparator": "scheidingsteken voor waardenlijst",
+        "rangeOfValues": "bereik van waarden",
+        "stepValues": "stapwaarden",
+        "allowedValues": "toegestane waarden",
+        "alternativeSingleValues": "alternatieve losse waarden",
+        "sundayNonStandard": "zondag (niet-standaard)",
+        "invalidExpression": "Ongeldige cron-expressie: {error}",
+        "nextOccurrences": "Volgende: {dates}",
+        "possibleValues": "Mogelijke waarden voor dit veld"
+      },
       "ipvAnyNetworkField": {
         "manuallySelectedPrefix": "Manually selected prefix"
       },
@@ -347,6 +365,7 @@
       "endDate": "Einddatum",
       "note": "Notitie",
       "metadata": "Metadata",
+      "customerId": "Klant ID",
       "customerFullname": "Klant",
       "customerShortcode": "Klantafkorting",
       "actions": "Acties"

package/src/pages/WfoSearchPocPage.tsx

@@ -9,7 +9,7 @@ import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
 import { EuiSpacer } from '@elastic/eui';
 
-import { SearchParams, combineSearchFilters } from '@/components';
+import { SearchParams, addStatusFilterFromTab, removeTabStatusMatchingFields } from '@/components';
 import {
   DEFAULT_PAGE_SIZE,
   StoredTableConfig,
@@ -56,6 +56,7 @@ const getDataFromResponse = <T extends object>(
   data: PaginatedSearchResults,
   resultColumToPropertyMap: ResultColumToPropertyMap<T>,
   uniqueRowId: keyof T,
+  selectedTab: WfoSubscriptionListTab,
 ): {
   items: T[];
   rowExpandingConfiguration?: WfoTableProps<T>['rowExpandingConfiguration'];
@@ -72,18 +73,23 @@ const getDataFromResponse = <T extends object>(
   const rowExpandingConfiguration: WfoTableProps<T>['rowExpandingConfiguration'] = {
     uniqueRowId: uniqueRowId as keyof WfoTableColumnConfig<T>,
     uniqueRowIdToExpandedRowMap: searchResult.reduce(
-      (rowMap, { response_columns, score, perfect_match, matching_field }) => {
+      (rowMap, { response_columns, score, perfect_match, matching_fields }) => {
         const idColumnInResponseColumn = getKeyByValueFromMap<T>(resultColumToPropertyMap, uniqueRowId);
         const rowId = response_columns[idColumnInResponseColumn];
         if (rowId) {
           rowMap[rowId] = (
-            <WfoExpandingSearchRow score={score} matchingField={matching_field} perfectMatch={perfect_match} />
+            <WfoExpandingSearchRow
+              score={score}
+              matchingFields={removeTabStatusMatchingFields(matching_fields, selectedTab, EntityKind.SUBSCRIPTION)}
+              perfectMatch={perfect_match}
+            />
           );
         }
         return rowMap;
       },
       {} as Record<string, ReactNode>,
     ),
+    shouldOnlyShowOnHover: true,
   };
 
   const items: T[] = responseColumns.map((responseColumn) => {
@@ -203,7 +209,7 @@ export const WfoSearchPocPage = () => {
   // Cursor is stripped from the RTK cache key, so a cursor change appends to the accumulated
   // result set instead of creating a new cache entry — see search endpoint's merge() logic.
   const searchPayload: SearchPayload = useMemo(() => {
-    const filters = combineSearchFilters(committedRuleGroup, selectedTab);
+    const filters = addStatusFilterFromTab(committedRuleGroup, selectedTab);
     const order_by = {
       element: getKeyByValueFromMap(resultColumToPropertyMap, dataSorting.field),
       direction: dataSorting.sortOrder.toLowerCase(),
@@ -453,7 +459,9 @@ export const WfoSearchPocPage = () => {
   };
 
   const { items: subscriptionListItems, rowExpandingConfiguration } =
-    data ? getDataFromResponse<SubscriptionListItem>(data, resultColumToPropertyMap, 'subscriptionId') : { items: [] };
+    data ?
+      getDataFromResponse<SubscriptionListItem>(data, resultColumToPropertyMap, 'subscriptionId', selectedTab)
+    : { items: [] };
 
   const totalItems = getTotalItemsFromResponse(data);
   const hasNextPage = data?.page_info?.has_next_page ?? false;
@@ -465,6 +473,7 @@ export const WfoSearchPocPage = () => {
       exportResult,
       resultColumToPropertyMap,
       'subscriptionId',
+      selectedTab,
     );
     if (!exportItems.length) {
       return;

package/src/rtk/endpoints/subscriptionList.ts

@@ -31,6 +31,7 @@ export const subscriptionListQuery = `query SubscriptionsList(
                     productType
                 }
                 customer {
+                    customerId
                     fullname
                     shortcode
                 }

package/src/theme/baseStyles/formFieldsBaseStyle.ts

@@ -10,7 +10,6 @@ export const getFormFieldsBaseStyle = ({ theme }: WfoThemeHelpers) => {
       backgroundColor: theme.colors.backgroundBaseNeutral,
       boxShadow: `0 0 0 1px ${theme.colors.primary}`,
     },
-    // boxShadow: `0 0 0 1px ${theme.colors.borderBaseSubdued} !important`,
   });
 
   return {

package/src/types/search.ts

@@ -24,7 +24,7 @@ export interface SearchResult {
   entity_title: string;
   score: number;
   perfect_match: number;
-  matching_field?: MatchingField | null;
+  matching_fields?: MatchingField[] | null;
   response_columns: Record<string, string | number | null>;
 }
 

package/src/types/types.ts

@@ -471,7 +471,7 @@ export type Subscription = {
   status: SubscriptionStatus;
   product: Pick<ProductDefinition, 'name' | 'tag' | 'productType'>;
   productBlockInstances: ProductBlockInstance[];
-  customer: Pick<Customer, 'fullname' | 'shortcode'>;
+  customer: Pick<Customer, 'customerId' | 'fullname' | 'shortcode'>;
   metadata: object;
 };
 

package/src/utils/getDefaultTableConfig.ts

@@ -95,7 +95,12 @@ export const getDefaultTableConfig = <T>(storageKey: string) => {
       return getTableConfig<T>(completedTasksColumns as (keyof T)[]);
     }
     case SUBSCRIPTIONS_TABLE_LOCAL_STORAGE_KEY: {
-      const subscriptionColumns: (keyof SubscriptionListItem)[] = ['productName', 'customerFullname', 'metadata'];
+      const subscriptionColumns: (keyof SubscriptionListItem)[] = [
+        'productName',
+        'customerId',
+        'customerFullname',
+        'metadata',
+      ];
       return getTableConfig<T>(subscriptionColumns as (keyof T)[]);
     }
     default:

package/src/utils/index.ts

@@ -10,6 +10,7 @@ export * from './getProductNamesFromProcess';
 export * from './getQueryVariablesForExport';
 export * from './getStatusBadgeColor';
 export * from './getTypedFieldFromObject';
+export * from './integer';
 export * from './onlyUnique';
 export * from './optionalArray';
 export * from './resultFlattener';

package/src/utils/integer.spec.ts

@@ -0,0 +1,20 @@
+import { toPercentage } from './integer';
+
+describe('toPercentage()', () => {
+  it('converts a fraction to a percentage string with one decimal', () => {
+    expect(toPercentage(0.5)).toEqual('50.0%');
+  });
+  it('converts 1 to 100.0%', () => {
+    expect(toPercentage(1)).toEqual('100.0%');
+  });
+  it('converts 0 to 0.0%', () => {
+    expect(toPercentage(0)).toEqual('0.0%');
+  });
+  it('rounds to one decimal place', () => {
+    expect(toPercentage(0.12345)).toEqual('12.3%');
+    expect(toPercentage(0.6789)).toEqual('67.9%');
+  });
+  it('handles fractions greater than 1', () => {
+    expect(toPercentage(1.5)).toEqual('150.0%');
+  });
+});

package/src/utils/integer.ts

@@ -0,0 +1,3 @@
+export const toPercentage = (fraction: number): string => {
+  return `${(fraction * 100).toFixed(1)}%`;
+};