@orchestrator-ui/orchestrator-ui-components 0.2.1 → 0.2.3

package/src/components/{Subscription/SubscriptionDetailTree.tsx → WFOSubscription/WFOSubscriptionDetailTree.tsx}

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { ProductBlockBase, ResourceTypeBase, TreeBlock } from '../../types';
-import { ProductBlock } from './ProductBlock';
+import { WFOProductBlock } from './WFOProductBlock';
 import {
     SubscriptionContext,
     SubscriptionContextType,
 } from '../../contexts/SubscriptionContext';
-import { Tree } from '../Tree/Tree';
+import { WFOTree } from '../WFOTree/WFOTree';
 import { TreeContext, TreeContextType } from '../../contexts/TreeContext';
 
 import {
@@ -40,7 +40,7 @@ function getProductBlockTitle(resourceType: ResourceTypeBase): string {
         : resourceType.title;
 }
 
-export const SubscriptionDetailTree = () => {
+export const WFOSubscriptionDetailTree = () => {
     const t = useTranslations('subscriptions.detail');
     const [expandAllActive, setExpandAllActive] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -146,7 +146,7 @@ export const SubscriptionDetailTree = () => {
                     </EuiFlexItem>
                     <EuiFlexItem grow={true}>
                         {!tree && <EuiLoadingContent />}
-                        {tree && <Tree data={[tree]} />}
+                        {tree && <WFOTree data={[tree]} />}
                     </EuiFlexItem>
                 </EuiFlexGroup>
             </EuiFlexItem>
@@ -170,7 +170,7 @@ export const SubscriptionDetailTree = () => {
                         selectedIds
                             .reverse()
                             .map((id, index) =>
-                                ProductBlock(
+                                WFOProductBlock(
                                     subscriptionData.productBlocks[
                                         selectedIds[index]
                                     ].resourceTypes,

package/src/components/{Subscription/SubscriptionGeneral.tsx → WFOSubscription/WFOSubscriptionGeneral.tsx}

@@ -8,12 +8,12 @@ import {
 } from '@elastic/eui';
 // import { useTranslations } from 'next-intl';
 import { SubscriptionContext } from '../../contexts/SubscriptionContext';
-import { SubscriptionBlock } from './SubscriptionBlock';
-import { FixedInputBlock } from './FixedInputBlock';
+import { WFOSubscriptionBlock } from './WFOSubscriptionBlock';
+import { WFOFixedInputBlock } from './WFOFixedInputBlock';
 
 /** TODO: Adding a useTranslations hook here leads to an hooks error. https://github.com/workfloworchestrator/orchestrator-ui/issues/177 */
 
-export const SubscriptionGeneral = () => {
+export const WFOSubscriptionGeneral = () => {
     const { subscriptionData, loadingStatus } =
         React.useContext(SubscriptionContext);
 
@@ -30,19 +30,22 @@ export const SubscriptionGeneral = () => {
         <EuiFlexGrid direction={'row'}>
             <>
                 <EuiFlexItem>
-                    {SubscriptionBlock(
+                    {WFOSubscriptionBlock(
                         'Subscription details',
                         subscriptionData,
                     )}
                 </EuiFlexItem>
                 <EuiFlexItem>
-                    {FixedInputBlock(
+                    {WFOFixedInputBlock(
                         'Fixed Inputs',
                         subscriptionData.fixedInputs,
                     )}
                 </EuiFlexItem>
                 <EuiFlexItem>
-                    {FixedInputBlock('Product Info', subscriptionData.product)}
+                    {WFOFixedInputBlock(
+                        'Product Info',
+                        subscriptionData.product,
+                    )}
                 </EuiFlexItem>
             </>
         </EuiFlexGrid>

package/src/components/WFOSubscription/index.ts

@@ -0,0 +1,7 @@
+export * from './WFOFixedInputBlock';
+export * from './WFOProcessesTimeline';
+export * from './WFOProductBlock';
+export * from './WFOSubscriptionActions';
+export * from './WFOSubscriptionBlock';
+export * from './WFOSubscriptionDetailTree';
+export * from './WFOSubscriptionGeneral';

package/src/components/{Table/DataGridTable/DataGridTable.stories.tsx → WFOTable/WFODataGridTable/WFODataGridTable.stories.tsx}

@@ -1,8 +1,8 @@
 import type { Meta } from '@storybook/react';
 import React, { useState } from 'react';
-import { DataSorting } from '../utils/columns';
+import { WFODataSorting } from '../utils/columns';
 import { SortOrder } from '../../../types';
-import { DataGridTable } from './DataGridTable';
+import { WFODataGridTable } from './WFODataGridTable';
 
 const extractedArr = (arr, start, howMany) =>
     arr.filter((_, index) => index >= start && index < howMany + start);
@@ -32,7 +32,7 @@ const TableWithEvents = (args) => {
         setPageSize(updatedPageSize);
     };
 
-    const updateDataSorting = (dataSorting: DataSorting<unknown>) => {
+    const updateDataSorting = (dataSorting: WFODataSorting<unknown>) => {
         setSorting(dataSorting);
 
         const sortData = args.data.sort((a, b) => {
@@ -46,7 +46,7 @@ const TableWithEvents = (args) => {
         setData(extractedArr(sortData, pageIndex, pageIndex + pageSize));
     };
     return (
-        <DataGridTable
+        <WFODataGridTable
             {...args}
             data={data}
             pagination={{
@@ -62,9 +62,9 @@ const TableWithEvents = (args) => {
     );
 };
 
-const Story: Meta<typeof DataGridTable> = {
+const Story: Meta<typeof WFODataGridTable> = {
     component: TableWithEvents,
-    title: 'Tables/DataGridTable',
+    title: 'Tables/WFODataGridTable',
     parameters: { actions: { argTypesRegex: '^on*' } },
 };
 export default Story;

package/src/components/{Table/DataGridTable/DataGridTable.tsx → WFOTable/WFODataGridTable/WFODataGridTable.tsx}

@@ -7,15 +7,15 @@ import {
 import { useRef, useState } from 'react';
 import {
     mapColumnSortToEuiDataGridSorting,
-    ControlColumn,
+    WFOControlColumn,
     getInitialColumnOrder,
-    DataGridTableColumns,
-} from './dataGridColumns';
+    WFODataGridTableColumns,
+} from './WFOdataGridColumns';
 import {
     EuiDataGridControlColumn,
     EuiDataGridPaginationProps,
 } from '@elastic/eui/src/components/datagrid/data_grid_types';
-import { DataSorting, TableColumnKeys } from '../utils/columns';
+import { WFODataSorting, TableColumnKeys } from '../utils/columns';
 
 // Total height of grid button bar, table header and pagination bar
 const EUI_DATA_GRID_HEIGHT_OFFSET = 103;
@@ -35,19 +35,19 @@ export type Pagination = EuiDataGridPaginationProps & {
     totalRecords: number;
 };
 
-export type DataGridTableProps<T> = {
+export type WFODataGridTableProps<T> = {
     data: T[];
     pagination: Pagination;
-    columns: DataGridTableColumns<T>;
-    leadingControlColumns?: ControlColumn<T>[];
-    trailingControlColumns?: ControlColumn<T>[];
+    columns: WFODataGridTableColumns<T>;
+    leadingControlColumns?: WFOControlColumn<T>[];
+    trailingControlColumns?: WFOControlColumn<T>[];
     initialColumnOrder: TableColumnKeys<T>;
-    dataSorting?: DataSorting<T>;
+    dataSorting?: WFODataSorting<T>;
     handleRowClick?: (row: T) => void;
-    updateDataSorting?: (updatedDataSorting: DataSorting<T>) => void;
+    updateDataSorting?: (updatedDataSorting: WFODataSorting<T>) => void;
 };
 
-export const DataGridTable = <T,>({
+export const WFODataGridTable = <T,>({
     data,
     pagination,
     columns,
@@ -57,7 +57,7 @@ export const DataGridTable = <T,>({
     dataSorting,
     handleRowClick,
     updateDataSorting,
-}: DataGridTableProps<T>) => {
+}: WFODataGridTableProps<T>) => {
     const initialColumnOrderRef = useRef(
         getInitialColumnOrder(columns, initialColumnOrder),
     );
@@ -96,7 +96,7 @@ export const DataGridTable = <T,>({
     };
 
     const mapControlColumnToEuiDataGridControlColumn: (
-        controlColumn: ControlColumn<T>,
+        controlColumn: WFOControlColumn<T>,
     ) => EuiDataGridControlColumn = ({ id, width, rowCellRender }) => ({
         id,
         width,

package/src/components/{Table/DataGridTable/dataGridColumns.spec.ts → WFOTable/WFODataGridTable/WFOdataGridColumns.spec.ts}

@@ -1,9 +1,9 @@
 import {
     getInitialColumnOrder,
     mapColumnSortToEuiDataGridSorting,
-    DataGridTableColumns,
-} from './dataGridColumns';
-import { DataSorting } from '../utils/columns';
+    WFODataGridTableColumns,
+} from './WFOdataGridColumns';
+import { WFODataSorting } from '../utils/columns';
 import { SortOrder } from '../../../types';
 
 interface TestColumn {
@@ -12,7 +12,7 @@ interface TestColumn {
     date: string;
 }
 
-const columns: DataGridTableColumns<TestColumn> = {
+const columns: WFODataGridTableColumns<TestColumn> = {
     id: {
         displayAsText: 'id',
         initialWidth: 100,
@@ -94,11 +94,11 @@ describe('dataGridColumns', () => {
 
     describe('columnSortToEuiDataGridSorting', () => {
         it('should return sort dict with columns and onsort', () => {
-            const sortBy: DataSorting<TestColumn> = {
+            const sortBy: WFODataSorting<TestColumn> = {
                 field: 'id',
                 sortOrder: SortOrder.ASC,
             };
-            const onSort = (dataSorting: DataSorting<TestColumn>) => {
+            const onSort = (dataSorting: WFODataSorting<TestColumn>) => {
                 sortBy.field = dataSorting.field;
                 sortBy.sortOrder = dataSorting.sortOrder;
             };

package/src/components/{Table/DataGridTable/dataGridColumns.ts → WFOTable/WFODataGridTable/WFOdataGridColumns.ts}

@@ -5,17 +5,17 @@ import {
     EuiDataGridSorting,
 } from '@elastic/eui/src/components/datagrid/data_grid_types';
 
-import { DataSorting, TableColumnKeys } from '../utils/columns';
+import { WFODataSorting, TableColumnKeys } from '../utils/columns';
 import { SortOrder } from '../../../types';
 
-export type DataGridTableColumns<T> = {
+export type WFODataGridTableColumns<T> = {
     [Property in keyof T]: Omit<EuiDataGridColumn, 'id'> & {
         renderCell?: (cellValue: T[Property], row: T) => ReactNode;
         isHiddenByDefault?: boolean;
     };
 };
 
-export type ControlColumn<T> = Omit<
+export type WFOControlColumn<T> = Omit<
     EuiDataGridControlColumn,
     | 'rowCellRender'
     | 'headerCellRender'
@@ -27,7 +27,7 @@ export type ControlColumn<T> = Omit<
 };
 
 export const getInitialColumnOrder = <T>(
-    columns: DataGridTableColumns<T>,
+    columns: WFODataGridTableColumns<T>,
     initialColumnOrder: TableColumnKeys<T>,
 ) => {
     const euiDataGridColumns: EuiDataGridColumn[] = Object.keys(columns).map(
@@ -53,8 +53,8 @@ export const getInitialColumnOrder = <T>(
 };
 
 export const mapColumnSortToEuiDataGridSorting = <T>(
-    columnSort?: DataSorting<T>,
-    updateColumnSort?: (columnSort: DataSorting<T>) => void,
+    columnSort?: WFODataSorting<T>,
+    updateColumnSort?: (columnSort: WFODataSorting<T>) => void,
 ): EuiDataGridSorting => ({
     columns: columnSort
         ? [

package/src/components/{Table/SortDirectionIcon.tsx → WFOTable/WFOSortDirectionIcon.tsx}

@@ -1,26 +1,26 @@
 import React, { FC } from 'react';
 import { useOrchestratorTheme } from '../../hooks/useOrchestratorTheme';
-import { ArrowNarrowDown } from '../../icons/ArrowNarrowDown';
-import { ArrowNarrowUp } from '../../icons/ArrowNarrowUp';
+import { WFOArrowNarrowDown } from '../../icons/WFOArrowNarrowDown';
+import { WFOArrowNarrowUp } from '../../icons/WFOArrowNarrowUp';
 import { SortOrder } from '../../types';
 
-export type SortDirectionIconProps = {
+export type WFOSortDirectionIconProps = {
     sortDirection: SortOrder;
 };
 
-export const SortDirectionIcon: FC<SortDirectionIconProps> = ({
+export const WFOSortDirectionIcon: FC<WFOSortDirectionIconProps> = ({
     sortDirection,
 }) => {
     const { theme } = useOrchestratorTheme();
 
     return sortDirection === SortOrder.ASC ? (
-        <ArrowNarrowUp
+        <WFOArrowNarrowUp
             color={theme.colors.subduedText}
             height={24}
             width={24}
         />
     ) : (
-        <ArrowNarrowDown
+        <WFOArrowNarrowDown
             color={theme.colors.subduedText}
             height={24}
             width={24}

package/src/components/{Table/Table.tsx → WFOTable/WFOTable.tsx}

@@ -1,27 +1,27 @@
 import React from 'react';
 import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
-import { TableHeaderCell } from './TableHeaderCell';
+import { WFOTableHeaderCell } from './WFOTableHeaderCell';
 
 import type {
-    DataSorting,
+    WFODataSorting,
     TableColumnKeys,
-    TableColumns,
-    TableColumnsWithControlColumns,
+    WFOTableColumns,
+    WFOTableColumnsWithControlColumns,
 } from './utils/columns';
 
-export type TableProps<T> = {
+export type WFOTableProps<T> = {
     data: T[];
-    columns: TableColumnsWithControlColumns<T> | TableColumns<T>;
+    columns: WFOTableColumnsWithControlColumns<T> | WFOTableColumns<T>;
     hiddenColumns?: TableColumnKeys<T>;
-    dataSorting?: DataSorting<T>;
+    dataSorting?: WFODataSorting<T>;
     pagination: Pagination;
     isLoading?: boolean;
     onCriteriaChange: (criteria: Criteria<T>) => void;
     onDataSort?: (columnId: keyof T) => void;
 };
 
-export const Table = <T,>({
+export const WFOTable = <T,>({
     data,
     columns,
     hiddenColumns,
@@ -30,7 +30,7 @@ export const Table = <T,>({
     isLoading,
     onCriteriaChange,
     onDataSort,
-}: TableProps<T>) => (
+}: WFOTableProps<T>) => (
     <EuiBasicTable
         items={data}
         columns={mapTableColumnsToEuiColumns(
@@ -46,9 +46,9 @@ export const Table = <T,>({
 );
 
 function mapTableColumnsToEuiColumns<T>(
-    columns: TableColumns<T>,
+    columns: WFOTableColumns<T>,
     hiddenColumns?: TableColumnKeys<T>,
-    dataSorting?: DataSorting<T>,
+    dataSorting?: WFODataSorting<T>,
     onDataSort?: (columnId: keyof T) => void,
 ): EuiBasicTableColumn<T>[] {
     function isVisibleColumn(columnKey: string) {
@@ -69,12 +69,12 @@ function mapTableColumnsToEuiColumns<T>(
             ...column,
             field: typedColumnKey,
             name: name && (
-                <TableHeaderCell
+                <WFOTableHeaderCell
                     sortDirection={sortDirection}
                     onClick={handleClick}
                 >
                     {name}
-                </TableHeaderCell>
+                </WFOTableHeaderCell>
             ),
             truncateText: true,
             textOnly: true,

package/src/components/{Table/TableHeaderCell.tsx → WFOTable/WFOTableHeaderCell.tsx}

@@ -1,15 +1,15 @@
 import React, { FC, ReactNode } from 'react';
 
 import { SortOrder } from '../../types';
-import { SortDirectionIcon } from './SortDirectionIcon';
+import { WFOSortDirectionIcon } from './WFOSortDirectionIcon';
 
-export type TableHeaderCellProps = {
+export type WFOTableHeaderCellProps = {
     sortDirection?: SortOrder;
     onClick?: () => void;
     children: ReactNode;
 };
 
-export const TableHeaderCell: FC<TableHeaderCellProps> = ({
+export const WFOTableHeaderCell: FC<WFOTableHeaderCellProps> = ({
     sortDirection,
     children,
     onClick,
@@ -24,7 +24,7 @@ export const TableHeaderCell: FC<TableHeaderCellProps> = ({
     >
         <div>{children}</div>
         {sortDirection ? (
-            <SortDirectionIcon sortDirection={sortDirection} />
+            <WFOSortDirectionIcon sortDirection={sortDirection} />
         ) : null}
     </div>
 );

package/src/components/{Table/TableSettingsModal/TableSettingsModal.tsx → WFOTable/WFOTableSettingsModal/WFOTableSettingsModal.tsx}

@@ -7,7 +7,7 @@ import {
     EuiSpacer,
     EuiSwitch,
 } from '@elastic/eui';
-import { SettingsModal } from '../../SettingsModal';
+import { SettingsModal } from '../../WFOSettingsModal';
 
 export type ColumnConfig<T> = {
     field: keyof T;

package/src/components/WFOTable/WFOTableSettingsModal/index.ts

@@ -0,0 +1 @@
+export * from './WFOTableSettingsModal';

package/src/components/{Table/TableWithFilter/TableWithFilter.tsx → WFOTable/WFOTableWithFilter/WFOTableWithFilter.tsx}

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     Criteria,
     EuiButton,
@@ -8,20 +8,20 @@ import {
     Pagination,
 } from '@elastic/eui';
 import {
-    DataSorting,
+    WFODataSorting,
     TableColumnKeys,
-    TableColumns,
-    TableColumnsWithControlColumns,
-    TableControlColumnConfig,
-    TableDataColumnConfig,
+    WFOTableColumns,
+    WFOTableColumnsWithControlColumns,
+    WFOTableControlColumnConfig,
+    WFOTableDataColumnConfig,
 } from '../utils/columns';
 import {
     ColumnConfig,
     TableConfig,
     TableSettingsModal,
-} from '../TableSettingsModal';
-import { SearchField } from '../../SearchBar';
-import { Table } from '../Table';
+} from '../WFOTableSettingsModal';
+import { WFOSearchField } from '../../WFOSearchBar';
+import { WFOTable } from '../WFOTable';
 import { DEFAULT_PAGE_SIZES } from '../utils/constants';
 import {
     clearTableConfigFromLocalStorage,
@@ -29,13 +29,13 @@ import {
     setTableConfigToLocalStorage,
 } from '../utils/tableConfigPersistence';
 
-export type TableWithFilterProps<T> = {
+export type WFOTableWithFilterProps<T> = {
     data: T[];
-    tableColumns: TableColumns<T>;
-    leadingControlColumns?: TableControlColumnConfig<T>;
-    trailingControlColumns?: TableControlColumnConfig<T>;
+    tableColumns: WFOTableColumns<T>;
+    leadingControlColumns?: WFOTableControlColumnConfig<T>;
+    trailingControlColumns?: WFOTableControlColumnConfig<T>;
     defaultHiddenColumns?: TableColumnKeys<T>;
-    dataSorting: DataSorting<T>;
+    dataSorting: WFODataSorting<T>;
     pagination: Pagination;
     esQueryString?: string;
     isLoading: boolean;
@@ -45,7 +45,7 @@ export type TableWithFilterProps<T> = {
     onUpdateDataSort: (newSortColumnId: keyof T) => void;
 };
 
-export const TableWithFilter = <T,>({
+export const WFOTableWithFilter = <T,>({
     data,
     tableColumns,
     leadingControlColumns,
@@ -59,7 +59,7 @@ export const TableWithFilter = <T,>({
     onUpdateEsQueryString,
     onUpdatePage,
     onUpdateDataSort,
-}: TableWithFilterProps<T>) => {
+}: WFOTableWithFilterProps<T>) => {
     const defaultPageSize = pagination.pageSize;
     const tableConfigFromLocalStorage =
         getTableConfigFromLocalStorage<T>(localStorageKey);
@@ -72,14 +72,21 @@ export const TableWithFilter = <T,>({
 
     const [showSettingsModal, setShowSettingsModal] = useState(false);
 
-    const tableColumnsWithControlColumns: TableColumnsWithControlColumns<T> = {
-        ...leadingControlColumns,
-        ...tableColumns,
-        ...trailingControlColumns,
-    };
+    useEffect(() => {
+        setHiddenColumns(
+            tableConfigFromLocalStorage?.hiddenColumns ?? defaultHiddenColumns,
+        );
+    }, [localStorageKey]);
+
+    const tableColumnsWithControlColumns: WFOTableColumnsWithControlColumns<T> =
+        {
+            ...leadingControlColumns,
+            ...tableColumns,
+            ...trailingControlColumns,
+        };
 
     const tableSettingsColumns: ColumnConfig<T>[] = Object.entries<
-        TableDataColumnConfig<T, keyof T>
+        WFOTableDataColumnConfig<T, keyof T>
     >(tableColumns).map((keyValuePair) => {
         const { field, name } = keyValuePair[1];
         return {
@@ -125,7 +132,7 @@ export const TableWithFilter = <T,>({
         <>
             <EuiFlexGroup>
                 <EuiFlexItem>
-                    <SearchField
+                    <WFOSearchField
                         esQueryString={esQueryString}
                         onUpdateEsQueryString={onUpdateEsQueryString}
                     />
@@ -135,7 +142,7 @@ export const TableWithFilter = <T,>({
                 </EuiButton>
             </EuiFlexGroup>
             <EuiSpacer size="m" />
-            <Table
+            <WFOTable
                 data={data}
                 columns={tableColumnsWithControlColumns}
                 hiddenColumns={hiddenColumns}

package/src/components/WFOTable/WFOTableWithFilter/index.ts

@@ -0,0 +1 @@
+export * from './WFOTableWithFilter';

package/src/components/WFOTable/index.ts

@@ -0,0 +1,14 @@
+export * from './WFODataGridTable/WFODataGridTable';
+export * from './WFODataGridTable/WFOdataGridColumns';
+
+export * from './WFOTableSettingsModal';
+
+export * from './utils/columns';
+export * from './utils/constants';
+
+export * from './utils/tableConfigPersistence';
+export * from './utils/tableUtils';
+
+export * from './WFOTable';
+export * from './WFOTableWithFilter';
+export * from './WFOTableHeaderCell';

package/src/components/{Table → WFOTable}/utils/columns.ts

@@ -4,41 +4,41 @@ import { SortOrder } from '../../../types';
 
 // Todo need to Pick a few more props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
 // https://github.com/workfloworchestrator/orchestrator-ui/issues/130
-export type BasicTableColumn<T> = Omit<EuiBasicTableColumn<T>, 'render'>;
+export type WFOBasicTableColumn<T> = Omit<EuiBasicTableColumn<T>, 'render'>;
 
-export type TableDataColumnConfig<T, Property> = BasicTableColumn<T> & {
+export type WFOTableDataColumnConfig<T, Property> = WFOBasicTableColumn<T> & {
     field: Property;
     name: string;
 };
 
 // Todo need to Pick a few props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
-export type TableColumnsWithExtraNonDataFields<T> = TableColumns<T> & {
+export type WFOTableColumnsWithExtraNonDataFields<T> = WFOTableColumns<T> & {
     [key: string]: EuiBasicTableColumn<T> & {
         field: string;
         name?: string;
     };
 };
 
-export type TableColumns<T> = {
-    [Property in keyof T]: TableDataColumnConfig<T, Property> & {
+export type WFOTableColumns<T> = {
+    [Property in keyof T]: WFOTableDataColumnConfig<T, Property> & {
         render?: (cellValue: T[Property], row: T) => ReactNode;
     };
 };
 
-export type TableControlColumnConfig<T> = {
-    [key: string]: BasicTableColumn<T> & {
+export type WFOTableControlColumnConfig<T> = {
+    [key: string]: WFOBasicTableColumn<T> & {
         field: string;
         name?: string;
         render: (row: T) => ReactNode;
     };
 };
 
-export type TableColumnsWithControlColumns<T> = TableColumns<T> &
-    TableControlColumnConfig<T>;
+export type WFOTableColumnsWithControlColumns<T> = WFOTableColumns<T> &
+    WFOTableControlColumnConfig<T>;
 
 export type TableColumnKeys<T> = Array<keyof T>;
 
-export type DataSorting<T> = {
+export type WFODataSorting<T> = {
     field: keyof T;
     sortOrder: SortOrder;
 };

package/src/components/WFOTable/utils/constants.ts

@@ -0,0 +1,15 @@
+export const DEFAULT_PAGE_SIZES = [5, 10, 15, 20, 25, 100];
+export const DEFAULT_PAGE_SIZE = 10;
+
+export const ACTIVE_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY =
+    'activeProcessesListTable';
+export const COMPLETED_PROCESSES_LIST_TABLE_LOCAL_STORAGE_KEY =
+    'completedProcessesListTable';
+
+export const METADATA_RESOURCE_TYPES_TABLE_LOCAL_STORAGE_KEY =
+    'metadataResourceTypesTable';
+export const METADATA_PRODUCTBLOCKS_TABLE_LOCAL_STORAGE_KEY =
+    'metadataProductBlocksTable';
+export const METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY = 'metadataProductTable';
+export const METADATA_WORKFLOWS_TABLE_LOCAL_STORAGE_KEY =
+    'metadataWorkflowsTable';

package/src/components/{Tree/Tree.tsx → WFOTree/WFOTree.tsx}

@@ -1,16 +1,16 @@
 import React, { FC } from 'react';
 
-import { TreeBranch } from './TreeBranch';
+import { WFOTreeBranch } from './WFOTreeBranch';
 import { TreeBlock } from '../../types';
 
-type TreeProps = {
+type WFOTreeProps = {
     data: TreeBlock[];
 };
 
-export const Tree: FC<TreeProps> = ({ data }) => (
+export const WFOTree: FC<WFOTreeProps> = ({ data }) => (
     <div style={{ width: '500px' }}>
         {data.map((item) => (
-            <TreeBranch key={item.id} item={item} level={0} />
+            <WFOTreeBranch key={item.id} item={item} level={0} />
         ))}
     </div>
 );