411 Resolved all comments

apps/wfo-ui-surf/components/WfoServiceTicketsList/WfoServiceTicketsList.tsx

@@ -1,18 +1,13 @@
 import React, { useState } from 'react';
-import {
-    Comparators,
-    Criteria,
-    EuiFlexGroup,
-    EuiFlexItem,
-    EuiTableSortingType,
-} from '@elastic/eui';
+import { Criteria, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import {
     ServiceTicketDefinition,
     ServiceTicketProcessState,
 } from '../../types';
 import { useTranslations } from 'next-intl';
 import {
     DataDisplayParams,
+    DEFAULT_PAGE_SIZES,
     FilterQuery,
     getSortDirectionFromString,
     parseDateToLocaleDateTimeString,
@@ -78,11 +73,13 @@ export const WfoServiceTicketsList = ({
     });
 
     const t = useTranslations('cim.serviceTickets');
-    const { data, isFetching } = useFilterQueryWithRest(
-        CIM_TICKETS_ENDPOINT,
-        'serviceTickets',
-        alwaysOnFilters,
-    );
+
+    const { data, isFetching } =
+        useFilterQueryWithRest<ServiceTicketDefinition>(
+            CIM_TICKETS_ENDPOINT,
+            'serviceTickets',
+            alwaysOnFilters,
+        );
 
     const serviceTicketColorMappings: ColorMappings = {
         [theme.colors.success]: [OPEN, NEW],
@@ -96,7 +93,6 @@ export const WfoServiceTicketsList = ({
             field: SERVICE_TICKET_FIELD_JIRA_ID,
             name: t('jiraTicketId'),
             width: '100',
-            //Todo: Fix styling and add color according to State
             render: (value) => (
                 <EuiFlexGroup>
                     <EuiFlexItem>{value}</EuiFlexItem>
@@ -171,33 +167,17 @@ export const WfoServiceTicketsList = ({
         }
     };
 
-    // Manually handle sorting and pagination of data
-    const findServiceTickets = (
+    const paginateServiceTickets = (
         serviceTickets: ServiceTicketDefinition[],
         pageIndex: number,
         pageSize: number,
-        sortField: keyof ServiceTicketDefinition,
-        sortDirection: 'asc' | 'desc',
     ) => {
-        let items;
-        if (sortField) {
-            items = serviceTickets
-                .slice(0)
-                .sort(
-                    Comparators.property(
-                        sortField,
-                        Comparators.default(sortDirection),
-                    ),
-                );
-        } else {
-            items = serviceTickets;
-        }
         let pageOfItems;
         if (!pageIndex && !pageSize) {
-            pageOfItems = items;
+            pageOfItems = serviceTickets;
         } else {
             const startIndex = pageIndex * pageSize;
-            pageOfItems = items.slice(
+            pageOfItems = serviceTickets.slice(
                 startIndex,
                 Math.min(startIndex + pageSize, serviceTickets.length),
             );
@@ -208,40 +188,54 @@ export const WfoServiceTicketsList = ({
         };
     };
 
-    const { pageOfItems, totalItemCount } = findServiceTickets(
-        data ? data : [],
+    const sortedData = data?.sort((a, b) => {
+        const aValue = a[dataSorting.field];
+        const bValue = b[dataSorting.field];
+        if (aValue === bValue) {
+            return 0;
+        }
+        if (aValue === null || aValue === undefined) {
+            return 1;
+        }
+        if (bValue === null || bValue === undefined) {
+            return -1;
+        }
+        return aValue > bValue
+            ? dataSorting.sortOrder === SortOrder.ASC
+                ? 1
+                : -1
+            : dataSorting.sortOrder === SortOrder.ASC
+            ? -1
+            : 1;
+    });
+
+    const { pageOfItems, totalItemCount } = paginateServiceTickets(
+        sortedData ? sortedData : [],
         pageIndex,
         pageSize,
-        dataSorting.field,
-        dataSorting.sortOrder.toLowerCase() as 'asc' | 'desc',
     );
+
     const pagination = {
         pageIndex: pageIndex,
         pageSize: pageSize,
         totalItemCount: totalItemCount,
-        pageSizeOptions: [5, 10, 20],
-    };
-    const sorting: EuiTableSortingType<ServiceTicketDefinition> = {
-        sort: {
-            field: dataSorting.field,
-            direction: dataSorting.sortOrder.toLowerCase() as 'asc' | 'desc',
-        },
-        enableAllColumns: true,
-        readOnly: false,
+        pageSizeOptions: DEFAULT_PAGE_SIZES,
     };
 
     return (
         <WfoBasicTable
-            data={pageOfItems}
+            data={pageOfItems ? pageOfItems : []}
             isLoading={isFetching}
             columns={tableColumns}
             pagination={pagination}
-            sorting={sorting}
             onCriteriaChange={onCriteriaChange}
             dataSorting={dataSorting}
             getStatusColorForRow={(row) =>
                 getColorForState(serviceTicketColorMappings, row.process_state)
             }
+            onUpdateDataSorting={(currentSort) => {
+                setDataSorting(currentSort);
+            }}
         />
     );
 };

apps/wfo-ui-surf/types/types.ts

@@ -53,7 +53,7 @@ export enum ServiceTicketTransition {
 }
 
 export type ServiceTicketDefinition = {
-    status_color_field?: string;
+    statusColorField?: string;
     jira_ticket_id: string;
     opened_by: string;
     process_state: ServiceTicketProcessState;

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

@@ -1,10 +1,5 @@
 import React, { ReactNode } from 'react';
-import {
-    EuiBasicTable,
-    EuiBasicTableColumn,
-    Pagination,
-    tint,
-} from '@elastic/eui';
+import { EuiBasicTable, EuiBasicTableColumn, Pagination } from '@elastic/eui';
 import { Criteria } from '@elastic/eui/src/components/basic_table/basic_table';
 import { WfoTableHeaderCell } from './WfoTableHeaderCell';
 
@@ -21,7 +16,7 @@ import {
 import { useOrchestratorTheme } from '../../../hooks';
 import { getStyles } from './styles';
 import { SortOrder } from '../../../types';
-import { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
+import { WfoStatusColorField } from './WfoStatusColorField';
 
 export type WfoBasicTableColumns<T> = {
     [Property in keyof T]: WfoTableDataColumnConfig<T, Property> & {
@@ -44,7 +39,6 @@ export type WfoBasicTableProps<T> = {
     onCriteriaChange?: (criteria: Criteria<T>) => void;
     onUpdateDataSorting?: (updatedDataSorting: WfoDataSorting<T>) => void;
     onDataSearch?: (updatedDataSearch: WfoDataSearch<T>) => void;
-    sorting?: EuiTableSortingType<T>;
     getStatusColorForRow?: (row: T) => string;
 };
 
@@ -58,59 +52,46 @@ export const WfoBasicTable = <T,>({
     onCriteriaChange,
     onUpdateDataSorting,
     onDataSearch,
-    sorting,
     getStatusColorForRow,
 }: WfoBasicTableProps<T>) => {
     const { theme } = useOrchestratorTheme();
     const { basicTableStyle, getStatusColumnStyle } = getStyles(theme);
 
-    const toStatusColorFieldColor = (color: string) => tint(color, 0.3);
-
-    const test: WfoTableControlColumnConfig<T> = {
-        status_color_field: {
+    const statusColorColumn: WfoTableControlColumnConfig<T> = {
+        statusColorField: {
             field: WFO_STATUS_COLOR_FIELD,
             name: '',
-            width: '8',
-            render: (_, row) => {
-                const color = getStatusColorForRow?.(row);
-                return (
-                    <>
-                        {color ? (
-                            <div
-                                css={{
-                                    backgroundColor:
-                                        toStatusColorFieldColor(color),
-                                    height: '100%',
-                                    width: '100%',
-                                }}
-                            ></div>
-                        ) : null}
-                    </>
-                    // <WfoStatusColorField
-                    //     colorMappings={serviceTicketColorMappings}
-                    //     state={object.process_state}
-                    // />
-                );
-            },
+            width: theme.size.xs,
+            render: (_, row) =>
+                getStatusColorForRow ? (
+                    <WfoStatusColorField color={getStatusColorForRow(row)} />
+                ) : (
+                    <></>
+                ),
         },
     };
 
-    const newColumns:
+    const allTableColumns:
         | WfoBasicTableColumnsWithControlColumns<T>
-        | WfoBasicTableColumns<T> = { ...test, ...columns };
+        | WfoBasicTableColumns<T> = getStatusColorForRow
+        ? { ...statusColorColumn, ...columns }
+        : { ...columns };
+
+    const tableStyling = getStatusColorForRow
+        ? [basicTableStyle, getStatusColumnStyle(1)]
+        : basicTableStyle;
 
     return (
         <EuiBasicTable
-            css={[basicTableStyle, getStatusColumnStyle(1)]}
+            css={tableStyling}
             items={data}
             columns={mapWfoTableColumnsToEuiColumns(
-                newColumns,
+                allTableColumns,
                 hiddenColumns,
                 dataSorting,
                 onUpdateDataSorting,
                 onDataSearch,
             )}
-            sorting={sorting}
             pagination={pagination}
             onChange={onCriteriaChange}
             loading={isLoading}

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

@@ -1,46 +1,20 @@
 import React from 'react';
 import { EuiFlexItem, tint } from '@elastic/eui';
-import { useOrchestratorTheme } from '../../../hooks';
-import { defaultOrchestratorTheme } from '../../../theme';
-import { WFO_STATUS_COLOR_FIELD } from '../utils/columns';
-
-type ThemeType = typeof defaultOrchestratorTheme;
-
-const toStatusColorFieldColor = (color: string) => tint(color, 0.3);
 
 export type WfoStatusColorFieldProps = {
-    colorMappings: { [key: string]: string[] };
-    state: string;
+    color: string;
 };
 
-export const STATUS_COLOR_FIELD_COLUMN_PROPS = {
-    field: WFO_STATUS_COLOR_FIELD,
-    name: '',
-    width: '1',
-};
-
-export const WfoStatusColorField = ({
-    colorMappings,
-    state,
-}: WfoStatusColorFieldProps) => {
-    const { theme } = useOrchestratorTheme();
-    let color: keyof ThemeType['colors'] =
-        'lightShade' as keyof ThemeType['colors'];
-
-    for (const [colorName, states] of Object.entries(colorMappings)) {
-        if (states.includes(state)) {
-            color = colorName as keyof ThemeType['colors'];
-            break;
-        }
-    }
+const toStatusColorFieldColor = (color: string) => tint(color, 0.3);
 
+export const WfoStatusColorField = ({ color }: WfoStatusColorFieldProps) => {
     return (
         <EuiFlexItem
             css={{
-                paddingInline: theme.base / 4,
-                paddingBlock: theme.base + 4,
-                backgroundColor: toStatusColorFieldColor(theme.colors[color]),
+                backgroundColor: toStatusColorFieldColor(color),
+                height: '100%',
+                width: '100%',
             }}
-        />
+        ></EuiFlexItem>
     );
 };

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

@@ -14,11 +14,7 @@ export type WfoTableDataColumnConfig<T, Property> =
         filterable?: boolean;
     };
 
-export const WFO_STATUS_COLOR_FIELD = 'status_color_field';
-export type WfoTableColorColumnConfig<T> = WfoTableDataColumnConfig<
-    T,
-    typeof WFO_STATUS_COLOR_FIELD
->;
+export const WFO_STATUS_COLOR_FIELD = 'statusColorField';
 
 // Todo need to Pick a few props from EuiBasicTableColumn to prevent none-functioning props (truncateText)
 export type WfoTableColumnsWithExtraNonDataFields<T> = WfoTableColumns<T> & {

packages/orchestrator-ui-components/src/hooks/DataFetchHooks.ts

@@ -110,11 +110,11 @@ export const useFilterQueryWithRest = <Type>(
 
     const fetchFromApi = async () => {
         const response = await fetch(orchestratorApiBaseUrl + endpoint);
-        const data = await response.json();
+        const data = (await response.json()) as Type[];
         return filters ? filterDataByCriteria(data, filters) : data;
     };
 
-    return useQuery(
+    return useQuery<Type[]>(
         filters ? [queryKey, { filters }] : [queryKey],
         fetchFromApi,
         {