feat(web): the table skeleton loading #3628

LetItRock · 2023-06-20T15:52:05Z

What change does this PR introduce?

This is a preparation for the new Integrations List Page.

The changes:

updated the react-table minor version which has better types
refactored the Table component to allow having a skeleton loading per cell (according to the latest designs)
when column Cell prop is not overridden it will use the default cell loading component
fixed the Table column prop types
fixed all pages to use the title prop of the PageContainer

Why was this change needed?

Other information (Screenshots)

Screen.Recording.2023-06-20.at.17.24.04.mov

linear · 2023-06-20T15:52:08Z

NV-2425 Implement the Integrations List Page

What?

Implement the new Integrations List page according to the new designs:

loading state - skeleton
the list with the integrations
no pagination - infinite scroll
create integration button

The show sidebar functionality on New provider button click and list item click will be implemented in the separate tickets.

The sorting and filtering functionality is out of scope for this cycle, also the conditions column is out of scope.

Do not remove the old page because we will show/hide the old/new page with the feature flag mechanism.

Definition of Done

The New Integrations List page is implemented according to the design
The old page has not been removed (will be hidden by the feature flag)
Loading state - skeleton
New provider button
E2E tests are implemented

Design spec

List

Integration store / List view - Integration store (Figma)

Starting state

Integration store / List view - Integration store (Figma)

Empty state

Integration store / List view - Integration store (Figma)

Skeleton

Integration store / List view - Integration store (Figma)

Add a provider button

Add a provider/workflow button - Integration store (Figma)

Provider logos

TBD - waiting for Pixel Point. Will be posted here

LetItRock · 2023-06-20T15:52:43Z

apps/web/package.json

@@ -64,7 +64,7 @@
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
-    "@types/react-table": "^7.7.9",
+    "@types/react-table": "^7.7.12",


updated slightly react-table and types package, that have more precise types

LetItRock · 2023-06-20T15:53:59Z

apps/web/src/design-system/table/DefaultCell.tsx

+const DefaultCellComponent = ({ value }: IExtendedCellProps) => {
+  return value ?? '';
+};
+
+export const DefaultCell = withCellLoading(DefaultCellComponent);


This is a default table cell component that will show the loading skeleton then the table is in the loading state. This component will be used if we do not override the column Cell property.

LetItRock · 2023-06-20T15:54:18Z

apps/web/src/design-system/table/Table.stories.tsx

+const Template: ComponentStory<typeof Table> = ({ ...args }) => (
+  <Table columns={columns as any} data={data} {...args} />
+);


fixed some ts issues in the storybook

LetItRock · 2023-06-20T15:54:52Z

apps/web/src/design-system/table/Table.styles.ts

+      '& tbody tr[data-disabled="true"]:hover': {
+        cursor: 'default',
+      },


when the table row is in the disabled state, remove the cursor pointer

LetItRock · 2023-06-20T15:59:05Z

apps/web/src/design-system/table/Table.tsx

+export type IExtendedCellProps<T extends object = {}> = CellProps<T> & { isLoading: boolean };

-export interface ITableProps {
-  columns?: ColumnWithStrictAccessor<Data>[];
-  data?: Data[];
+export type IExtendedColumn<T extends object = {}> = Column<T> & {
+  Cell?: (props: IExtendedCellProps<T>) => React.ReactNode;
+};


Updated the column cell props types. Previously we were only passing the original object and the types were not working when we've been defining the table columns array. Passing only the original object was limiting us, so I've changed it to what the actual library provides + plus additional props like isLoading.

LetItRock · 2023-06-20T16:06:52Z

apps/web/src/pages/brand/tabs/LayoutsListPage.tsx

    {
      accessor: 'name',
      Header: 'Name',
-      Cell: ({ name }: any) => (
-        <Tooltip label={name}>
+      Cell: withCellLoading(({ row: { original } }) => (


When we do override the Cell and want to have a skeleton we would have to wrap the component with the HOC for loading, otherwise we would have to handle the loading state manually, in some cases, it might be useful, for ex. if you want to show the different loading skeletons.

LetItRock · 2023-06-20T16:07:29Z

apps/web/src/pages/brand/tabs/LayoutsListPage.tsx

    },
    {
      accessor: 'createdAt',
      Header: 'Created At',
-      Cell: ({ createdAt }: any) => format(new Date(createdAt), 'dd/MM/yyyy HH:mm'),
+      Cell: withCellLoading(({ row: { original } }) => format(new Date(original.createdAt ?? ''), 'dd/MM/yyyy HH:mm')),


now the types are fixed and we don't need to use any anymore 🎉

LetItRock · 2023-06-20T16:07:55Z

apps/web/src/pages/brand/tabs/LayoutsListPage.tsx

@@ -154,40 +157,39 @@ export function LayoutsListPage({ handleLayoutAnalytics }: LayoutsListPageProps)
        <LayoutEditor goBack={goBack} />
      </When>
      <When truthy={activeScreen === ActivePageEnum.LAYOUTS_LIST}>
-        <LoadingOverlay visible={isLoading || isLoadingDelete}>


removed the loading overlay as the table will show the loading state

LetItRock · 2023-06-20T16:08:21Z

apps/web/src/pages/changes/components/ChangesTableLayout.tsx

@@ -49,79 +48,85 @@ export const ChangesTable = ({
    });
  }, [error]);

-  const columns: ColumnWithStrictAccessor<Data>[] = [
+  const columns: IExtendedColumn<any>[] = [


wasn't able to find the type

LetItRock · 2023-06-20T16:09:02Z

apps/web/src/pages/integrations/IntegrationsStorePage.tsx

+  if (isLoading) {
+    return null;
+  }


moved this statement to outside

Maybe we should show a spinner or something if it takes long time?

sure, we can have a loading overlay that we do show everywhere currently :)

LetItRock · 2023-06-20T16:14:49Z

apps/web/src/App.tsx

@@ -18,7 +18,7 @@ import LoginPage from './pages/auth/LoginPage';
 import SignUpPage from './pages/auth/SignUpPage';
 import HomePage from './pages/HomePage';
 import TemplateEditorPage from './pages/templates/editor/TemplateEditorPage';
-import NotificationList from './pages/templates/TemplatesListPage';
+import WorkflowListPage from './pages/templates/WorkflowListPage';


and renamed this one :P

davidsoderberg · 2023-06-21T08:11:30Z

apps/web/src/utils/channels.ts

@@ -25,6 +25,14 @@ interface IChannelDefinition {
  type: NodeTypeEnum;
 }

+export const CHANNEL_TYPE_TO_STRING: Record<ChannelTypeEnum, string> = {


is it possible to use this one inside of WorkflowNode as well so we have this mapping only once?

yes, just need to lower-case it in the WorkflowNode

davidsoderberg

Looks good 👍

…ggestions from the pr #3628

LetItRock self-assigned this Jun 20, 2023

github-actions bot added the @novu/web label Jun 20, 2023

LetItRock commented Jun 20, 2023

View reviewed changes

feat(web): the table skeleton loading

3227b83

LetItRock force-pushed the nv-2425-refactor-table-with-skeleton-loading branch from 5b527c5 to 3227b83 Compare June 20, 2023 16:14

LetItRock commented Jun 20, 2023

View reviewed changes

davidsoderberg reviewed Jun 21, 2023

View reviewed changes

davidsoderberg approved these changes Jun 21, 2023

View reviewed changes

chore(web): added the loading indicator on the integrations page - su…

0025215

…ggestions from the pr #3628

LetItRock added this pull request to the merge queue Jun 21, 2023

Merged via the queue into next with commit 4c3e90e Jun 21, 2023
32 checks passed

LetItRock deleted the nv-2425-refactor-table-with-skeleton-loading branch June 21, 2023 09:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): the table skeleton loading #3628

feat(web): the table skeleton loading #3628

LetItRock commented Jun 20, 2023 •

edited

Loading

linear bot commented Jun 20, 2023

What?

Definition of Done

Design spec

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

LetItRock Jun 20, 2023

davidsoderberg Jun 21, 2023

LetItRock Jun 21, 2023

LetItRock Jun 20, 2023

davidsoderberg Jun 21, 2023

LetItRock Jun 21, 2023

davidsoderberg left a comment

feat(web): the table skeleton loading #3628

feat(web): the table skeleton loading #3628

Conversation

LetItRock commented Jun 20, 2023 • edited Loading

What change does this PR introduce?

Why was this change needed?

Other information (Screenshots)

linear bot commented Jun 20, 2023

What?

Definition of Done

Design spec

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidsoderberg left a comment

Choose a reason for hiding this comment

LetItRock commented Jun 20, 2023 •

edited

Loading