feat(app-aco): add table columns definition via react-properties (#3756)

Co-authored-by: Pavel Denisjuk <[email protected]>

Author: leopuleo

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityDecorator.ts

@@ -0,0 +1,33 @@
+import { makeAutoObservable } from "mobx";
+import { IColumnsVisibilityRepository } from "./IColumnsVisibilityRepository";
+import { IColumnsRepository } from "../Columns";
+
+export class ColumnsVisibilityDecorator implements IColumnsRepository {
+    private columnsVisibilityRepository: IColumnsVisibilityRepository;
+    private columnsRepository: IColumnsRepository;
+
+    constructor(
+        visibilityRepository: IColumnsVisibilityRepository,
+        columnsRepository: IColumnsRepository
+    ) {
+        this.columnsRepository = columnsRepository;
+        this.columnsVisibilityRepository = visibilityRepository;
+        makeAutoObservable(this);
+    }
+
+    async init() {
+        this.columnsRepository.init();
+        this.columnsVisibilityRepository.init();
+    }
+
+    getColumns() {
+        const columns = this.columnsRepository.getColumns();
+        const visibility = this.columnsVisibilityRepository.getVisibility();
+
+        return visibility
+            ? columns.map(column => {
+                  return { ...column, visible: visibility[column.name] ?? column.visible };
+              })
+            : columns;
+    }
+}

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityPresenter.test.ts

@@ -0,0 +1,156 @@
+import { ColumnsVisibilityPresenter } from "./ColumnsVisibilityPresenter";
+import { IColumnsVisibilityGateway } from "../gateways";
+import { ColumnConfig } from "~/config/table/Column";
+import { Column, ColumnsPresenter, ColumnsRepository } from "../Columns";
+import { ColumnsVisibilityRepository } from "./ColumnsVisibilityRepository";
+import { ColumnsVisibilityDecorator } from "./ColumnsVisibilityDecorator";
+import { ColumnsVisibilityUpdater } from "~/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityUpdater";
+
+const defaultGateway: IColumnsVisibilityGateway = {
+    get: jest.fn(),
+    set: jest.fn()
+};
+
+const createMockGateway = ({
+    get,
+    set
+}: Partial<IColumnsVisibilityGateway>): IColumnsVisibilityGateway => ({
+    ...defaultGateway,
+    ...(get && { get }),
+    ...(set && { set })
+});
+
+describe("ColumnsVisibilityPresenter", () => {
+    const columnConfigs: ColumnConfig[] = [
+        {
+            cell: "Id Cell Content",
+            className: "id-class",
+            header: "Id",
+            hideable: true,
+            name: "id",
+            resizable: true,
+            size: 200,
+            sortable: true,
+            visible: true
+        },
+        {
+            cell: "Title Cell Content",
+            className: "title-class",
+            header: "Title",
+            hideable: true,
+            name: "title",
+            resizable: true,
+            size: 200,
+            sortable: true,
+            visible: true
+        },
+        {
+            cell: "Date Cell Content",
+            className: "date-class",
+            header: "Date",
+            hideable: true,
+            name: "date",
+            resizable: true,
+            size: 200,
+            sortable: true,
+            visible: false
+        }
+    ];
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("should return the columns visibility from the column config", async () => {
+        // Let's create repositories and presenters
+        const columnsRepo = new ColumnsRepository(
+            columnConfigs.map(config => Column.createFromConfig(config))
+        );
+        const visibilityRepo = new ColumnsVisibilityRepository(defaultGateway);
+        const repo = new ColumnsVisibilityDecorator(visibilityRepo, columnsRepo);
+
+        const columnsPresenter = new ColumnsPresenter(repo);
+        const columnsVisibilityPresenter = new ColumnsVisibilityPresenter(columnsPresenter);
+
+        // Let's init the ColumnsPresenter
+        await columnsPresenter.init();
+
+        expect(defaultGateway.get).toBeCalledTimes(1);
+
+        expect(columnsVisibilityPresenter.vm).toEqual({
+            columnsVisibility: {
+                id: true,
+                title: true,
+                date: false
+            }
+        });
+    });
+
+    it("should return the columns visibility from both the column configs and the gateway", async () => {
+        // Let's create a mocked gateway
+        const gateway = createMockGateway({
+            get: jest.fn().mockImplementation(() => ({ title: false }))
+        });
+
+        // Let's create repositories and presenters
+        const columnsRepo = new ColumnsRepository(
+            columnConfigs.map(config => Column.createFromConfig(config))
+        );
+        const visibilityRepo = new ColumnsVisibilityRepository(gateway);
+        const repo = new ColumnsVisibilityDecorator(visibilityRepo, columnsRepo);
+
+        const columnsPresenter = new ColumnsPresenter(repo);
+        const columnsVisibilityPresenter = new ColumnsVisibilityPresenter(columnsPresenter);
+
+        // Let's init the ColumnsPresenter
+        await columnsPresenter.init();
+
+        expect(gateway.get).toBeCalledTimes(1);
+
+        expect(columnsVisibilityPresenter.vm).toEqual({
+            columnsVisibility: {
+                id: true,
+                title: false, // title is defined true in the config, but defined false in the gateway
+                date: false
+            }
+        });
+    });
+
+    it("should be able to update the visibility via `ColumnsVisibilityUpdater`", async () => {
+        // Let's create repositories and presenters
+        const columnsRepo = new ColumnsRepository(
+            columnConfigs.map(config => Column.createFromConfig(config))
+        );
+        const visibilityRepo = new ColumnsVisibilityRepository(defaultGateway);
+        const repo = new ColumnsVisibilityDecorator(visibilityRepo, columnsRepo);
+
+        const columnsPresenter = new ColumnsPresenter(repo);
+        const columnsVisibilityPresenter = new ColumnsVisibilityPresenter(columnsPresenter);
+
+        // Let's create ColumnsVisibilityUpdater
+        const columnsVisibilityUpdater = new ColumnsVisibilityUpdater(visibilityRepo);
+
+        // Let's init the ColumnsPresenter
+        await columnsPresenter.init();
+
+        // Let's check the initial state
+        const initial = columnsVisibilityPresenter.vm.columnsVisibility;
+        expect(initial).toEqual({
+            id: true,
+            title: true,
+            date: false
+        });
+
+        // Let's update the visibility
+        const updater = jest.fn().mockImplementation(current => ({ ...current, title: false }));
+        await columnsVisibilityUpdater.update(updater);
+
+        expect(columnsVisibilityPresenter.vm).toEqual({
+            columnsVisibility: {
+                id: true,
+                title: false,
+                date: false
+            }
+        });
+    });
+});

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityPresenter.ts

@@ -0,0 +1,23 @@
+import { makeAutoObservable } from "mobx";
+import { ColumnsPresenter } from "../Columns/ColumnsPresenter";
+
+export class ColumnsVisibilityPresenter {
+    private columnsPresenter: ColumnsPresenter;
+
+    constructor(columnsPresenter: ColumnsPresenter) {
+        this.columnsPresenter = columnsPresenter;
+        makeAutoObservable(this);
+    }
+
+    get vm() {
+        return {
+            columnsVisibility: this.getColumnsVisibility()
+        };
+    }
+
+    private getColumnsVisibility() {
+        return this.columnsPresenter.vm.columns.reduce((acc, column) => {
+            return { ...acc, [column.name]: column.visible };
+        }, {});
+    }
+}

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityRepository.ts

@@ -0,0 +1,38 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import { IColumnsVisibilityGateway } from "../gateways/IColumnsVisibilityGateway";
+import { IColumnsVisibilityRepository } from "./IColumnsVisibilityRepository";
+
+export class ColumnsVisibilityRepository implements IColumnsVisibilityRepository {
+    private gateway: IColumnsVisibilityGateway;
+    private state: Record<string, boolean>;
+
+    constructor(gateway: IColumnsVisibilityGateway) {
+        this.gateway = gateway;
+        this.state = {};
+        makeAutoObservable(this);
+    }
+
+    async init() {
+        const visibility = await this.gateway.get();
+        runInAction(() => {
+            this.state = visibility ?? {};
+        });
+    }
+
+    getVisibility() {
+        return this.state;
+    }
+
+    async update(value: Record<string, boolean>) {
+        const newState = {
+            ...this.state,
+            ...value
+        };
+
+        await this.gateway.set(newState);
+
+        runInAction(() => {
+            this.state = newState;
+        });
+    }
+}

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityRepositoryFactory.ts

@@ -0,0 +1,22 @@
+import { ColumnsVisibilityRepository } from "./ColumnsVisibilityRepository";
+import { IColumnsVisibilityGateway } from "../gateways/IColumnsVisibilityGateway";
+
+class ColumnsVisibilityRepositoryFactory {
+    private cache: Map<string, ColumnsVisibilityRepository> = new Map();
+
+    getRepository(namespace: string, gateway: IColumnsVisibilityGateway) {
+        const cacheKey = this.getCacheKey(namespace);
+
+        if (!this.cache.has(cacheKey)) {
+            this.cache.set(cacheKey, new ColumnsVisibilityRepository(gateway));
+        }
+
+        return this.cache.get(cacheKey) as ColumnsVisibilityRepository;
+    }
+
+    private getCacheKey(namespace: string) {
+        return namespace;
+    }
+}
+
+export const columnsVisibilityRepositoryFactory = new ColumnsVisibilityRepositoryFactory();

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/ColumnsVisibilityUpdater.ts

@@ -0,0 +1,24 @@
+import { makeAutoObservable } from "mobx";
+import { IColumnsVisibilityRepository } from "./IColumnsVisibilityRepository";
+import { IColumnsVisibilityUpdater } from "./IColumnsVisibilityUpdater";
+import { OnColumnVisibilityChange } from "@webiny/ui/DataTable";
+
+export class ColumnsVisibilityUpdater implements IColumnsVisibilityUpdater {
+    private repository: IColumnsVisibilityRepository;
+
+    constructor(repository: IColumnsVisibilityRepository) {
+        this.repository = repository;
+        makeAutoObservable(this);
+    }
+
+    public update: OnColumnVisibilityChange = async updaterOrValue => {
+        const currentVisibility = this.repository.getVisibility();
+        let newVisibility = currentVisibility;
+
+        if (typeof updaterOrValue === "function") {
+            newVisibility = updaterOrValue(currentVisibility || {});
+        }
+
+        this.repository.update(newVisibility || {});
+    };
+}

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/IColumnsVisibilityRepository.ts

@@ -0,0 +1,5 @@
+export interface IColumnsVisibilityRepository {
+    init(): Promise<void>;
+    getVisibility(): Record<string, boolean> | undefined;
+    update(value: Record<string, boolean>): Promise<void>;
+}

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/IColumnsVisibilityUpdater.ts

@@ -0,0 +1,5 @@
+import { OnColumnVisibilityChange } from "@webiny/ui/DataTable";
+
+export interface IColumnsVisibilityUpdater {
+    update: OnColumnVisibilityChange;
+}

packages/app-aco/src/components/Table/components/Table/ColumnVisibility/index.ts

@@ -0,0 +1,7 @@
+export * from "./IColumnsVisibilityRepository";
+export * from "./IColumnsVisibilityUpdater";
+export * from "./ColumnsVisibilityDecorator";
+export * from "./ColumnsVisibilityPresenter";
+export * from "./ColumnsVisibilityRepository";
+export * from "./ColumnsVisibilityRepositoryFactory";
+export * from "./ColumnsVisibilityUpdater";

packages/app-aco/src/components/Table/components/Table/Columns/Column.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from "react";
+import { ColumnConfig } from "~/config/table/Column";
+
+export interface ColumnDTO {
+    cell: string | ReactElement;
+    className: string;
+    header: string | number | JSX.Element;
+    hideable: boolean;
+    name: string;
+    resizable: boolean;
+    size: number;
+    sortable: boolean;
+    visible: boolean;
+}
+
+export class Column {
+    public cell: string | ReactElement;
+    public className: string;
+    public header: string | number | JSX.Element;
+    public hideable: boolean;
+    public name: string;
+    public resizable: boolean;
+    public size: number;
+    public sortable: boolean;
+    public visible: boolean;
+
+    static createFromConfig(config: ColumnConfig) {
+        return new Column(config);
+    }
+
+    protected constructor(data: {
+        name: string;
+        header: string | number | JSX.Element;
+        cell: string | ReactElement;
+        size?: number;
+        className?: string;
+        hideable?: boolean;
+        sortable?: boolean;
+        resizable?: boolean;
+        visible?: boolean;
+    }) {
+        this.name = data.name;
+        this.header = data.header;
+        this.cell = data.cell;
+        this.size = data.size || 200;
+        this.className = data.className || "";
+        this.hideable = data.hideable ?? true;
+        this.sortable = data.sortable ?? false;
+        this.resizable = data.resizable ?? true;
+        this.visible = data.visible ?? true;
+    }
+}