cell value becomes undefined while rendering row after deployment

[ritikshukla2303]

Which UI Kit version is this bug for?

v5.x

Latest version

• I have tested the latest version

No Hitachi confidential content

• I'm not including any Hitachi confidential content

Current behavior 😯

import { css, keyframes } from '@emotion/css';
import {
baseDropdownClasses,
HvButton,
HvFilterGroup,
HvFilterGroupProps,
HvFilterGroupValue,
HvInput,
HvPagination,
HvTable,
HvTableBody,
HvTableCell,
HvTableColumnConfig,
HvTableContainer,
HvTableHead,
HvTableHeader,
HvTableRow,
HvTableSection,
HvOverflowTooltip,
HvTypography,
theme,
useHvData,
useHvFilters,
useHvGlobalFilter,
useHvSortBy,
useHvPagination,
} from '@hitachivantara/uikit-react-core';
import { Add, Close, Filters, Delete } from '@hitachivantara/uikit-react-icons';
import { getTimeAndDate } from 'common/configs/utils';
import { useMemo, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { isNewWorkflow } from 'Redux/slices/workflowSlice/workflowSlice.selector';
import { CREATE_NEW, DEFAULT_WORKFLOW } from 'shared/constants/constants';

import { setWorkflowById } from '../../../Redux/slices/bpmnSlice/bpmnSlice';
import { setNewWorkflow } from '../../../Redux/slices/workflowSlice/workflowSlice';
import './WorkflowList.css';

const slide = keyframes0% { max-height: 0; } 100% { max-height: 300px; };

const classes = {
filtersContainer: css({
display: 'flex',
width: '100%',
backgroundColor: theme.colors.warning_20,
border: '2px solid black',
overflow: 'hidden',
animation: ${slide} 1.5s ease-in-out,
}),
filters: css({
display: 'flex',
width: '100%',
padding: theme.space.xs,
justifyContent: 'space-between',
alignItems: 'center',
}),
gemsContainer: css({
display: 'flex',
width: '100%',
justifyContent: 'flex-start',
padding: 0px ${theme.space.xs},
flexWrap: 'wrap',
gap: theme.space.xs,
}),
blank_row: css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}),
filterHeader: css({
borderColor: 'transparent',
'&:hover': {
borderColor: 'transparent',
backgroundColor: theme.colors.primary_20,
},
'&:focus-visible': {
borderColor: 'transparent',
},
[&.${baseDropdownClasses.headerOpen}]: {
borderColor: theme.colors.secondary,
'&:hover': {
borderColor: theme.colors.secondary,
},
},
}),
};

const filters: HvFilterGroupProps['filters'] = [
{
id: 'published',
name: 'Published',
data: [
{ id: 'true', name: 'yes' },
{ id: 'false', name: 'No' },
],
},
];

function EmptyRow() {
return (



);
}
function MakeData(initialState: Workflow[]) {
const data = initialState.map((item) => {
return {
...item,
published: item.published ? 'Yes' : 'No',
lastModified: getTimeAndDate(item.lastModified),
};
});
return data;
}

function getColumns() {
return [
{ Header: 'ID', accessor: 'id' },
{ Header: 'Name', accessor: 'name' },
{ Header: 'Description', accessor: 'description', disableSortBy: true },
{ Header: 'Last modified', accessor: 'lastModified' },
{ Header: 'Published', accessor: 'published', disableSortBy: true },
{ Header: 'Action', accessor: 'action', disableSortBy: true },
];
}

interface Workflow {
id: number;
name: string;
description: string;
published: boolean;
lastModified: string;
path: string;
}
interface TableProps {
handleRowClick: (id: number) => void;
workflowData: Workflow[];
}

function WorkflowList({ workflowData, handleRowClick }: TableProps) {
const filterRef = useRef(null);
const [data] = useState(MakeData(workflowData));
const [selectedFilters, setSelectedFilters] = useState();
const navigate = useNavigate();
const dispatch = useDispatch();
const isNewWrkflwValue = useSelector(isNewWorkflow);

const columns: HvTableColumnConfig[] = useMemo(() => {
const cols = getColumns();

return cols;

}, []);

const handleOnClick = () => {
dispatch(
setWorkflowById({
name: '',
description: '',
id: 0,
published: false,
fileObject: DEFAULT_WORKFLOW,
}),
);
dispatch(setNewWorkflow(!isNewWrkflwValue));
navigate('/author/workflow');
};

const processedFilters = useMemo(
() =>
selectedFilters?.flatMap((categoryArray, idx) =>
categoryArray?.map((value) => ({
category: {
label: filters[idx].name,
id: filters[idx].id,
},
value: {
label: filters[idx].data.find((x) => x.id === value)?.name,
id: value,
},
})),
),
[selectedFilters],
);

const {
getTableProps,
getTableBodyProps,
prepareRow,
headerGroups,
page,
getHvPaginationProps,
state: { pageSize },
setAllFilters,
setGlobalFilter,
} = useHvData(
{ columns, data },
useHvFilters,
useHvGlobalFilter,
useHvSortBy,
useHvPagination,
);

const renderTableRow = (i: number) => {
const row = page[i];

if (!row) return <EmptyRow key={i} />;

prepareRow(row);
return (
  <HvTableRow
    {...row.getRowProps()}
    onClick={() => handleRowClick(row.original.id as number)}
  >
    {row.cells.map((cell) => {
      if (cell.column.id === 'description') {
        return (
          <HvTableCell {...cell.getCellProps()}>
            <div style={{ maxWidth: '250px' }}>
              <HvOverflowTooltip data={cell.value} placement="top" />
            </div>
          </HvTableCell>
        );
      }
      if (cell.column.id === 'action') {
        return (
          <HvTableCell>
            <Delete color="secondary" iconSize="S" />
          </HvTableCell>
        );
      }
      return (
        <HvTableCell {...cell.getCellProps()}>{cell.render('Cell')}</HvTableCell>
      );
    })}
  </HvTableRow>
);

};

const handleFilters = (arrays?: HvFilterGroupValue) => {
setSelectedFilters(arrays);
const newFilters =
arrays
?.map((array, idx) => ({
id: filters[idx].id,
value: array
.map((x) => filters[idx].data.find((i) => i.id === x)?.name)
.filter((v) => v),
}))
.flat() || [];
setAllFilters?.(newFilters);
};

return (

Workflows

<HvTableSection
raisedHeader
title={Workflow Details}
actions={
<>
<HvInput
type="search"
placeholder="Search all columns"
onChange={(_e, v) => setGlobalFilter?.(v)}
/>
<HvFilterGroup
ref={filterRef}
filters={filters}
disablePortal={false}
value={selectedFilters}
onChange={(_event, value) => handleFilters(value)}
aria-label="Filters"
filterContentProps={{
adornment: ,
placeholder: null,
classes: {
header: classes.filterHeader,
},
}}
/>

        <HvButton
          className="create_button"
          variant="primaryGhost"
          startIcon={<Add />}
          type="submit"
          form="create-post"
          onClick={handleOnClick}
        >
          {CREATE_NEW}
        </HvButton>
      </>
    }
  >
    {processedFilters && processedFilters.length > 0 && (
      <div className={classes.filtersContainer}>
        <div className={classes.filters}>
          <HvButton
            variant="primaryGhost"
            startIcon={<Add />}
            onClick={() => filterRef.current?.click()}
          >
            Add Filter
          </HvButton>
          <div className={classes.gemsContainer}>
            {processedFilters.map(({ category, value }) => (
              <HvButton
                key={`gem-${category.id}-${value.id}`}
                startIcon={<Close />}
                variant="secondarySubtle"
                onClick={() => {
                  const newFilters = selectedFilters?.map((array, idx) =>
                    idx === filters.findIndex((x) => x.id === category.id)
                      ? array.filter((x) => x !== value.id)
                      : array,
                  );
                  handleFilters(newFilters);
                }}
                aria-label={`Clear filter ${category.label}: ${value.label}`}
              >
                {category.label}: {value.label}
              </HvButton>
            ))}
          </div>
          <HvButton variant="secondaryGhost" onClick={() => handleFilters(undefined)}>
            Clear
          </HvButton>
        </div>
      </div>
    )}
    <HvTableContainer className="HvTableContainer">
      <HvTable {...getTableProps()}>
        <HvTableHead>
          {headerGroups.map((headerGroup) => (
            <HvTableRow {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((col) => {
                let sortIndicator = '';
                if (col.isSorted) {
                  if (col.isSortedDesc) {
                    sortIndicator = '';
                  } else {
                    sortIndicator = '';
                  }
                }
                return (
                  <HvTableHeader {...col.getHeaderProps()}>
                    {col.render('Header')}
                    {sortIndicator}
                  </HvTableHeader>
                );
              })}
            </HvTableRow>
          ))}
        </HvTableHead>
        <HvTableBody {...getTableBodyProps()}>
          {data.length === 0 ? (
            <EmptyRow />
          ) : (
            [...Array(pageSize ?? 0).keys()].map(renderTableRow)
          )}
        </HvTableBody>
      </HvTable>
    </HvTableContainer>
    {page.length > 0 ? (
      <HvPagination
        {...getHvPaginationProps?.()}
        labels={{
          pageSizePrev: '',
          pageSizeEntryName: `of ${data.length}`,
        }}
      />
    ) : undefined}
  </HvTableSection>
</div>

);
}

export default WorkflowList;

cell is showing blank in rows data and data is not coming DOM

Expected behavior 🤔

expected behavior is data cell value should not be undefined and rows should show , the screenshot of table that i attached in expected is working in my local but after deployment cell value coming undefined and data is not coming in DOM

data

Steps to reproduce 🕹

Sandbox link:

Steps to reproduce:

Context 🔦

No response

Your Environment 🌎

Build tool: (e.g. Vite 4, Webpack 5)
Device & OS: (e.g. Windows 11 laptop, iPhone 13 iOS15)
Browser: (e.g. Chrome 112, Safari 15.4)
Other details (e.g. 4K resolution, ...)

[MEsteves22]

Hello @ritikshukla2303 👋

Is this the same issue as this one? If it is, maybe we should close this one since it would be better to keep track of only one issue 🙏
If not, is it possible to create an example with our Stackblitz template, please? Unfortunately, at the moment we are unable to reproduce the issue on our end.

[ritikshukla2303]

close the other one but keep this one open

[MEsteves22]

I closed the issue 🙏

We'll wait for a reproduction sample in our Stackblitz template and/or more information because at the moment we are unable to reproduce the issue.

[MEsteves22]

Hello 👋 Due to inactivity I'll close the issue. Let us know if you still need help 🙏