Added blank column to take 100% width (#1840)

* Added blank column to take 100% width

* Fix cell separator resets to previous width, code refactor

* linted

* Add changeset

Author: Georgi2704

.changeset/green-planets-change.md

@@ -0,0 +1,5 @@
+---
+'@orchestrator-ui/orchestrator-ui-components': minor
+---
+
+1825 Update WfoDragHandler, make WfoTable 100% width

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoDragHandler.tsx

@@ -22,49 +22,62 @@ export const WfoDragHandler: FC<WfoDragHandlerProps> = ({
     onUpdateColumWidth,
 }) => {
     const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
+
+    const resetPosition = () => {
+        setPosition({ x: 0, y: 0 });
+    };
+
+    const onStart: DraggableEventHandler = () => {
+        setIsDragging(false);
+    };
 
     const onDrag: DraggableEventHandler = (_, data) => {
+        setIsDragging(true);
         setPosition({ x: data.x, y: data.y });
     };
 
-    const resetPosition = () => {
-        setPosition({ x: 0, y: 0 });
-    };
+    const onStop: DraggableEventHandler = (_, data) => {
+        if (headerRowRef.current && isDragging) {
+            const newWidth = startWidth + data.x;
 
-    const { dragAndDropStyle } = useWithOrchestratorTheme(getWfoTableStyles);
+            onUpdateColumWidth(
+                fieldName,
+                newWidth > MINIMUM_COLUMN_WIDTH
+                    ? newWidth
+                    : MINIMUM_COLUMN_WIDTH,
+            );
+            resetPosition();
+            setIsDragging(false);
+        }
+    };
 
     const thElement =
         headerRowRef.current &&
         (headerRowRef.current.querySelector(
             `th[data-field-name="${fieldName}"]`,
         ) as HTMLTableCellElement);
+
     const startWidth =
         thElement?.getBoundingClientRect().width ?? MINIMUM_COLUMN_WIDTH;
 
+    const bounds = {
+        left: MINIMUM_COLUMN_WIDTH - startWidth,
+        top: 0,
+        bottom: 0,
+    };
+
     return (
         <div>
             <Draggable
+                allowAnyClick={false}
                 axis="x"
                 position={position}
+                onStart={onStart}
                 onDrag={onDrag}
-                bounds={{
-                    left: MINIMUM_COLUMN_WIDTH - startWidth,
-                    top: 0,
-                    bottom: 0,
-                }}
-                onStop={(_, data) => {
-                    if (headerRowRef.current) {
-                        const newWidth = startWidth + data.x;
-
-                        onUpdateColumWidth(
-                            fieldName,
-                            newWidth > MINIMUM_COLUMN_WIDTH
-                                ? newWidth
-                                : MINIMUM_COLUMN_WIDTH,
-                        );
-                        resetPosition();
-                    }
-                }}
+                bounds={bounds}
+                onStop={onStop}
             >
                 <div css={dragAndDropStyle} />
             </Draggable>

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoGroupedTable/WfoGroupedTable.tsx

@@ -102,6 +102,7 @@ export const WfoGroupedTable = <T extends object>({
                     uniqueRowIdToExpandedRowMap,
                 }}
                 onRowClick={({ groupName }) => toggleExpandedRow(groupName)}
+                appendFillerColumn={false}
             />
         </>
     );

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/WfoTable.tsx

@@ -16,7 +16,7 @@ import { DEFAULT_PAGE_SIZES } from '../utils/constants';
 import { WfoTableDataRows } from './WfoTableDataRows';
 import { WfoTableHeaderRow } from './WfoTableHeaderRow';
 import { getWfoTableStyles } from './styles';
-import { getSortedVisibleColumns } from './utils';
+import { getColumnWidthsFromConfig, getSortedVisibleColumns } from './utils';
 
 export type Pagination = {
     pageSize: number;
@@ -99,10 +99,11 @@ export type WfoTableProps<T extends object> = {
     onRowClick?: (row: T) => void;
     onUpdateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
     onUpdateDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
+    appendFillerColumn?: boolean;
     className?: string;
 };
 
-type LocalColumnWidths = {
+export type LocalColumnWidths = {
     [key: string]: string;
 };
 
@@ -119,25 +120,24 @@ export const WfoTable = <T extends object>({
     onUpdateDataSorting,
     onUpdateDataSearch,
     onRowClick,
+    appendFillerColumn = true,
     className,
 }: WfoTableProps<T>) => {
-    const getColumnWidthsFromConfig = (
-        columnConfig: WfoTableColumnConfig<T>,
-    ): LocalColumnWidths => {
-        return Object.entries(columnConfig).reduce(
-            (columnWidths, [key, config]) => {
-                if (config.columnType === ColumnType.DATA) {
-                    columnWidths[key] = config.width ?? 'auto';
-                }
-                return columnWidths;
-            },
-            {} as LocalColumnWidths,
-        );
-    };
-
     const [localColumnWidths, setLocalColumnWidths] =
         useState<LocalColumnWidths>(getColumnWidthsFromConfig(columnConfig));
 
+    const columnConfigWithFiller: WfoTableColumnConfig<T> = appendFillerColumn
+        ? {
+              ...columnConfig,
+              filler: {
+                  columnType: ColumnType.CONTROL,
+                  label: '',
+                  width: '100%',
+                  renderControl: () => null,
+              },
+          }
+        : columnConfig;
+
     const {
         tableContainerStyle,
         tableStyle,
@@ -151,7 +151,7 @@ export const WfoTable = <T extends object>({
     const t = useTranslations('common');
 
     const sortedVisibleColumns = getSortedVisibleColumns(
-        columnConfig,
+        columnConfigWithFiller,
         columnOrder,
         hiddenColumns,
     );
@@ -166,7 +166,7 @@ export const WfoTable = <T extends object>({
     };
 
     const configWithLocalWidths: WfoTableColumnConfig<T> = Object.entries(
-        columnConfig,
+        columnConfigWithFiller,
     ).reduce((mergedConfig, [fieldName, fieldConfig]) => {
         const key = fieldName as keyof WfoTableColumnConfig<T>;
         if (fieldConfig.columnType === ColumnType.DATA) {

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/styles.ts

@@ -37,7 +37,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
     });
 
     const tableStyle = css({
-        width: 'auto',
+        width: '100%',
     });
 
     const headerStyle = css({
@@ -136,7 +136,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
         position: 'absolute',
         height: '100%',
         zIndex: theme.levels.menu,
-        '&:hover, &:active': {
+        '&:active, &:focus': {
             transition: 'background-color 0.15s',
             backgroundColor: isDarkThemeActive
                 ? theme.colors.mediumShade
@@ -152,7 +152,7 @@ export const getWfoTableStyles = ({ theme, isDarkThemeActive }: WfoTheme) => {
             opacity: 0.6,
             zIndex: theme.levels.navigation,
         },
-        '&:hover::after, &:active::after': {
+        '&:active::after': {
             transition: 'opacity 0.15s',
             opacity: 0,
         },

packages/orchestrator-ui-components/src/components/WfoTable/WfoTable/utils.ts

@@ -1,4 +1,4 @@
-import { TableColumnKeys } from '@/components';
+import { LocalColumnWidths, TableColumnKeys } from '@/components';
 import { SortOrder } from '@/types';
 import { toObjectWithSortedKeys } from '@/utils';
 
@@ -80,3 +80,16 @@ export function mapSortableAndFilterableValuesToTableColumnConfig<
 
     return Object.fromEntries(tableColumnConfigUpdatedEntries);
 }
+
+export const getColumnWidthsFromConfig = <T extends object>(
+    columnConfig: WfoTableColumnConfig<T>,
+): LocalColumnWidths => {
+    const columnEntries = Object.entries(columnConfig);
+
+    return columnEntries.reduce((columnWidths, [key, config]) => {
+        if (config.columnType === ColumnType.DATA) {
+            columnWidths[key] = config.width ?? 'auto';
+        }
+        return columnWidths;
+    }, {} as LocalColumnWidths);
+};

packages/orchestrator-ui-components/src/icons/WfoQuestionCircle.tsx

@@ -24,8 +24,8 @@ export const WfoQuestionCircle: FC<WfoIconProps> = ({
         >
             <g id="icon/play-circle" fill="none" fillRule="nonzero">
                 <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
                     d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
                 />
             </g>