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

package/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandableRow.tsx

@@ -9,40 +9,36 @@ import { useWithOrchestratorTheme } from '@/hooks';
 import { getWfoGroupedTableStyles } from './styles';
 
 export type WfoExpandableRowProps = {
-    isExpanded: boolean;
-    groupName: string;
-    updateExpandedRows: (groupName: string) => void;
-    numberOfRowsInGroup: number;
+  isExpanded: boolean;
+  groupName: string;
+  updateExpandedRows: (groupName: string) => void;
+  numberOfRowsInGroup: number;
 };
 
 export const WfoExpandableRow: FC<WfoExpandableRowProps> = ({
-    groupName,
-    numberOfRowsInGroup,
-    updateExpandedRows,
-    isExpanded,
+  groupName,
+  numberOfRowsInGroup,
+  updateExpandedRows,
+  isExpanded,
 }) => {
-    const { expandableRowContainerStyle, expandableRowTextStyle } =
-        useWithOrchestratorTheme(getWfoGroupedTableStyles);
-    const t = useTranslations('wfoComponents');
-
-    const hasData = numberOfRowsInGroup > 0;
-
-    return (
-        <div css={expandableRowContainerStyle}>
-            <EuiButtonIcon
-                disabled={!hasData}
-                aria-label={isExpanded ? t('collapse') : t('expand')}
-                iconType={hasData && isExpanded ? 'arrowDown' : 'arrowRight'}
-                onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-                    updateExpandedRows(groupName);
-                    event.stopPropagation();
-                }}
-            />
-
-            <EuiText
-                size="s"
-                css={expandableRowTextStyle}
-            >{`${groupName} (${numberOfRowsInGroup})`}</EuiText>
-        </div>
-    );
+  const { expandableRowContainerStyle, expandableRowTextStyle } = useWithOrchestratorTheme(getWfoGroupedTableStyles);
+  const t = useTranslations('wfoComponents');
+
+  const hasData = numberOfRowsInGroup > 0;
+
+  return (
+    <div css={expandableRowContainerStyle}>
+      <EuiButtonIcon
+        disabled={!hasData}
+        aria-label={isExpanded ? t('collapse') : t('expand')}
+        iconType={hasData && isExpanded ? 'arrowDown' : 'arrowRight'}
+        onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+          updateExpandedRows(groupName);
+          event.stopPropagation();
+        }}
+      />
+
+      <EuiText size="s" css={expandableRowTextStyle}>{`${groupName} (${numberOfRowsInGroup})`}</EuiText>
+    </div>
+  );
 };

package/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoExpandedGroupRow.tsx

@@ -6,66 +6,48 @@ import { WfoTableDataRows } from '../WfoTableDataRows';
 import { WfoTableHeaderRow } from '../WfoTableHeaderRow';
 import { getWfoTableStyles } from '../styles';
 import { GroupedData } from './WfoGroupedTable';
-import {
-    WfoGroupedTableGroups,
-    WfoGroupedTableGroupsProps,
-    WfoGroupedTableGroupsRef,
-} from './WfoGroupedTableGroups';
+import { WfoGroupedTableGroups, WfoGroupedTableGroupsProps, WfoGroupedTableGroupsRef } from './WfoGroupedTableGroups';
 import { getWfoGroupedTableStyles } from './styles';
 
 export type WfoExpandedGroupRowProps<T extends object> = Pick<
-    WfoGroupedTableGroupsProps<T>,
-    'columnConfig' | 'nestingLevel' | 'groupNameLabel'
+  WfoGroupedTableGroupsProps<T>,
+  'columnConfig' | 'nestingLevel' | 'groupNameLabel'
 > & {
-    data: GroupedData<T> | T[];
-    onExpandRowChange: (isAllExpanded: boolean) => void;
+  data: GroupedData<T> | T[];
+  onExpandRowChange: (isAllExpanded: boolean) => void;
 };
 
 export const WfoExpandedGroupRow = React.forwardRef(
-    <T extends object>(
-        {
-            data,
-            columnConfig,
-            nestingLevel = 1,
-            groupNameLabel,
-            onExpandRowChange,
-        }: WfoExpandedGroupRowProps<T>,
-        reference: Ref<WfoGroupedTableGroupsRef>,
-    ) => {
-        const { expandedRowStyle } =
-            useWithOrchestratorTheme(getWfoTableStyles);
-        const { innerTableHeaderStyle, getNestingStyle } =
-            useWithOrchestratorTheme(getWfoGroupedTableStyles);
+  <T extends object>(
+    { data, columnConfig, nestingLevel = 1, groupNameLabel, onExpandRowChange }: WfoExpandedGroupRowProps<T>,
+    reference: Ref<WfoGroupedTableGroupsRef>,
+  ) => {
+    const { expandedRowStyle } = useWithOrchestratorTheme(getWfoTableStyles);
+    const { innerTableHeaderStyle, getNestingStyle } = useWithOrchestratorTheme(getWfoGroupedTableStyles);
 
-        if (Array.isArray(data)) {
-            return (
-                <>
-                    <WfoTableHeaderRow
-                        css={[
-                            innerTableHeaderStyle,
-                            getNestingStyle(nestingLevel),
-                        ]}
-                        columnConfig={columnConfig}
-                    />
-                    <WfoTableDataRows
-                        css={[expandedRowStyle, getNestingStyle(nestingLevel)]}
-                        data={data}
-                        columnConfig={columnConfig}
-                    />
-                </>
-            );
-        }
+    if (Array.isArray(data)) {
+      return (
+        <>
+          <WfoTableHeaderRow css={[innerTableHeaderStyle, getNestingStyle(nestingLevel)]} columnConfig={columnConfig} />
+          <WfoTableDataRows
+            css={[expandedRowStyle, getNestingStyle(nestingLevel)]}
+            data={data}
+            columnConfig={columnConfig}
+          />
+        </>
+      );
+    }
 
-        return (
-            <WfoGroupedTableGroups
-                ref={reference}
-                data={data}
-                columnConfig={columnConfig}
-                groupNameLabel={groupNameLabel}
-                nestingLevel={nestingLevel}
-                onExpandRowChange={onExpandRowChange}
-            />
-        );
-    },
+    return (
+      <WfoGroupedTableGroups
+        ref={reference}
+        data={data}
+        columnConfig={columnConfig}
+        groupNameLabel={groupNameLabel}
+        nestingLevel={nestingLevel}
+        onExpandRowChange={onExpandRowChange}
+      />
+    );
+  },
 );
 WfoExpandedGroupRow.displayName = 'WfoExpandedGroupRow';

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

@@ -11,99 +11,84 @@ import { getWfoTableStyles } from '../styles';
 import { useGroupedTableConfig } from './useGroupedTableConfig';
 
 export type GroupType = {
-    groupName: string;
+  groupName: string;
 };
 
 export type GroupedData<T> = {
-    [Key: string]: T[] | GroupedData<T>;
+  [Key: string]: T[] | GroupedData<T>;
 };
 
 export type WfoGroupedTableProps<T extends object> = Pick<
-    WfoTableProps<T>,
-    'columnConfig' | 'isLoading' | 'className'
+  WfoTableProps<T>,
+  'columnConfig' | 'isLoading' | 'className'
 > & {
-    data: GroupedData<T>;
-    groupNameLabel: string;
-    overrideHeaderSection?: (ExpandButton: ReactElement) => React.ReactNode;
+  data: GroupedData<T>;
+  groupNameLabel: string;
+  overrideHeaderSection?: (ExpandButton: ReactElement) => React.ReactNode;
 };
 
 export const WfoGroupedTable = <T extends object>({
-    data,
-    columnConfig,
-    groupNameLabel,
-    isLoading,
-    overrideHeaderSection,
-    className,
+  data,
+  columnConfig,
+  groupNameLabel,
+  isLoading,
+  overrideHeaderSection,
+  className,
 }: WfoGroupedTableProps<T>) => {
-    const { headerStyle, rowStyle, cellStyle } =
-        useWithOrchestratorTheme(getWfoTableStyles);
+  const { headerStyle, rowStyle, cellStyle } = useWithOrchestratorTheme(getWfoTableStyles);
 
-    const t = useTranslations('wfoComponents.wfoGroupedTable');
+  const t = useTranslations('wfoComponents.wfoGroupedTable');
 
-    const {
-        groups,
-        groupColumnConfig,
-        numberOfColumnsInnerTable,
-        uniqueRowIdToExpandedRowMap,
-        isAllGroupsAndSubgroupsExpanded,
-        toggleExpandedRow,
-        expandAllRows,
-        collapseAllRows,
-    } = useGroupedTableConfig({
-        data,
-        groupNameLabel,
-        columnConfig,
-    });
+  const {
+    groups,
+    groupColumnConfig,
+    numberOfColumnsInnerTable,
+    uniqueRowIdToExpandedRowMap,
+    isAllGroupsAndSubgroupsExpanded,
+    toggleExpandedRow,
+    expandAllRows,
+    collapseAllRows,
+  } = useGroupedTableConfig({
+    data,
+    groupNameLabel,
+    columnConfig,
+  });
 
-    const ExpandCollapseButton: FC = () => (
-        <EuiButtonEmpty
-            size="xs"
-            onClick={() =>
-                isAllGroupsAndSubgroupsExpanded
-                    ? collapseAllRows()
-                    : expandAllRows()
-            }
-        >
-            {isAllGroupsAndSubgroupsExpanded ? t('collapse') : t('expand')}
-        </EuiButtonEmpty>
-    );
+  const ExpandCollapseButton: FC = () => (
+    <EuiButtonEmpty size="xs" onClick={() => (isAllGroupsAndSubgroupsExpanded ? collapseAllRows() : expandAllRows())}>
+      {isAllGroupsAndSubgroupsExpanded ? t('collapse') : t('expand')}
+    </EuiButtonEmpty>
+  );
 
-    return (
-        <>
-            <EuiFlexGroup justifyContent="flexEnd">
-                {overrideHeaderSection ? (
-                    overrideHeaderSection(<ExpandCollapseButton />)
-                ) : (
-                    <ExpandCollapseButton />
-                )}
-            </EuiFlexGroup>
+  return (
+    <>
+      <EuiFlexGroup justifyContent="flexEnd">
+        {overrideHeaderSection ? overrideHeaderSection(<ExpandCollapseButton />) : <ExpandCollapseButton />}
+      </EuiFlexGroup>
 
-            <EuiSpacer size="xs" />
+      <EuiSpacer size="xs" />
 
-            <WfoTable
-                className={className}
-                data={groups}
-                columnConfig={groupColumnConfig}
-                isLoading={isLoading}
-                overrideHeader={() => (
-                    <thead css={headerStyle}>
-                        <tr css={rowStyle}>
-                            <th
-                                colSpan={numberOfColumnsInnerTable}
-                                css={cellStyle}
-                            >
-                                {groupNameLabel}
-                            </th>
-                        </tr>
-                    </thead>
-                )}
-                rowExpandingConfiguration={{
-                    uniqueRowId: 'groupName',
-                    uniqueRowIdToExpandedRowMap,
-                }}
-                onRowClick={({ groupName }) => toggleExpandedRow(groupName)}
-                appendFillerColumn={false}
-            />
-        </>
-    );
+      <WfoTable
+        className={className}
+        data={groups}
+        columnConfig={groupColumnConfig}
+        isLoading={isLoading}
+        overrideHeader={() => (
+          <thead css={headerStyle}>
+            <tr css={rowStyle}>
+              <th colSpan={numberOfColumnsInnerTable} css={cellStyle}>
+                {groupNameLabel}
+              </th>
+            </tr>
+          </thead>
+        )}
+        rowExpandingConfiguration={{
+          uniqueRowId: 'groupName',
+          uniqueRowIdToExpandedRowMap,
+        }}
+        onRowClick={({ groupName }) => toggleExpandedRow(groupName)}
+        appendFillerColumn={false}
+      />
+    </>
+  );
 };

package/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTableGroups.tsx

@@ -9,66 +9,52 @@ import { getWfoGroupedTableStyles } from './styles';
 import { useGroupedTableConfig } from './useGroupedTableConfig';
 
 export type WfoGroupedTableGroupsRef = {
-    expandAllRows: () => void;
+  expandAllRows: () => void;
 };
 
 export type WfoGroupedTableGroupsProps<T extends object> = Pick<
-    WfoGroupedTableProps<T>,
-    'columnConfig' | 'data' | 'groupNameLabel'
+  WfoGroupedTableProps<T>,
+  'columnConfig' | 'data' | 'groupNameLabel'
 > & {
-    nestingLevel?: number;
-    onExpandRowChange: (isAllExpanded: boolean) => void;
+  nestingLevel?: number;
+  onExpandRowChange: (isAllExpanded: boolean) => void;
 };
 
 export const WfoGroupedTableGroups = React.forwardRef(
-    <T extends object>(
-        {
-            data,
-            groupNameLabel,
-            columnConfig,
-            nestingLevel = 1,
-            onExpandRowChange,
-        }: WfoGroupedTableGroupsProps<T>,
-        reference: Ref<WfoGroupedTableGroupsRef>,
-    ) => {
-        const { expandedRowStyle } =
-            useWithOrchestratorTheme(getWfoTableStyles);
-        const { getNestingStyle } = useWithOrchestratorTheme(
-            getWfoGroupedTableStyles,
-        );
-
-        const {
-            groups,
-            groupColumnConfig,
-            uniqueRowIdToExpandedRowMap,
-            toggleExpandedRow,
-            expandAllRows,
-        } = useGroupedTableConfig({
-            data,
-            groupNameLabel,
-            columnConfig,
-            nestingLevel,
-            notifyParent: onExpandRowChange,
-        });
-
-        useImperativeHandle(reference, () => ({
-            expandAllRows: () => {
-                expandAllRows();
-            },
-        }));
-
-        return (
-            <WfoTableDataRows
-                css={[expandedRowStyle, getNestingStyle(nestingLevel)]}
-                data={groups}
-                columnConfig={groupColumnConfig}
-                onRowClick={(row) => toggleExpandedRow(row.groupName)}
-                rowExpandingConfiguration={{
-                    uniqueRowId: 'groupName',
-                    uniqueRowIdToExpandedRowMap,
-                }}
-            />
-        );
-    },
+  <T extends object>(
+    { data, groupNameLabel, columnConfig, nestingLevel = 1, onExpandRowChange }: WfoGroupedTableGroupsProps<T>,
+    reference: Ref<WfoGroupedTableGroupsRef>,
+  ) => {
+    const { expandedRowStyle } = useWithOrchestratorTheme(getWfoTableStyles);
+    const { getNestingStyle } = useWithOrchestratorTheme(getWfoGroupedTableStyles);
+
+    const { groups, groupColumnConfig, uniqueRowIdToExpandedRowMap, toggleExpandedRow, expandAllRows } =
+      useGroupedTableConfig({
+        data,
+        groupNameLabel,
+        columnConfig,
+        nestingLevel,
+        notifyParent: onExpandRowChange,
+      });
+
+    useImperativeHandle(reference, () => ({
+      expandAllRows: () => {
+        expandAllRows();
+      },
+    }));
+
+    return (
+      <WfoTableDataRows
+        css={[expandedRowStyle, getNestingStyle(nestingLevel)]}
+        data={groups}
+        columnConfig={groupColumnConfig}
+        onRowClick={(row) => toggleExpandedRow(row.groupName)}
+        rowExpandingConfiguration={{
+          uniqueRowId: 'groupName',
+          uniqueRowIdToExpandedRowMap,
+        }}
+      />
+    );
+  },
 );
 WfoGroupedTableGroups.displayName = 'WfoGroupedTableGroups';

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

@@ -3,37 +3,37 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getWfoGroupedTableStyles = ({ theme }: WfoThemeHelpers) => {
-    // Matches the default width of a EuiButtonIcon component
-    const expandRowButtonWidth = '24px';
-    const marginBetweenButtonAndGroupLabel = theme.size.m;
+  // Matches the default width of a EuiButtonIcon component
+  const expandRowButtonWidth = '24px';
+  const marginBetweenButtonAndGroupLabel = theme.size.m;
 
-    const innerTableHeaderStyle = css({
-        fontSize: theme.size.m,
-        textAlign: 'left',
-        backgroundColor: theme.colors.backgroundBaseSubdued,
-    });
+  const innerTableHeaderStyle = css({
+    fontSize: theme.size.m,
+    textAlign: 'left',
+    backgroundColor: theme.colors.backgroundBaseSubdued,
+  });
 
-    const expandableRowContainerStyle = css({
-        display: 'flex',
-        alignItems: 'center',
-    });
+  const expandableRowContainerStyle = css({
+    display: 'flex',
+    alignItems: 'center',
+  });
 
-    const expandableRowTextStyle = css({
-        marginLeft: marginBetweenButtonAndGroupLabel,
-        fontWeight: theme.font.weight.medium,
-    });
+  const expandableRowTextStyle = css({
+    marginLeft: marginBetweenButtonAndGroupLabel,
+    fontWeight: theme.font.weight.medium,
+  });
 
-    const getNestingStyle = (nestingLevel: number) =>
-        css({
-            'th:first-child > *:first-child, td:first-child > *:first-child': {
-                marginLeft: `calc(${nestingLevel} * (${expandRowButtonWidth} + ${marginBetweenButtonAndGroupLabel}))`,
-            },
-        });
+  const getNestingStyle = (nestingLevel: number) =>
+    css({
+      'th:first-child > *:first-child, td:first-child > *:first-child': {
+        marginLeft: `calc(${nestingLevel} * (${expandRowButtonWidth} + ${marginBetweenButtonAndGroupLabel}))`,
+      },
+    });
 
-    return {
-        innerTableHeaderStyle,
-        expandableRowContainerStyle,
-        expandableRowTextStyle,
-        getNestingStyle,
-    };
+  return {
+    innerTableHeaderStyle,
+    expandableRowContainerStyle,
+    expandableRowTextStyle,
+    getNestingStyle,
+  };
 };