Feat/implement pipingapp (#701)

* feat: initial commit

* update gitignore

* wip

* wip

* wip: garden, sidesheet

* feat: ✨ add workorder tab in sidesheet

* feat: ✨ add Insulation tab

* Insulation table header

* forgot to change to h4

* feat: ✨ add Checklist tab

* need to commit before merge

* feat: ✨ update fusion workspace to 2.1.4

* feat: ✨ update api-calls

* feat: ✨ add the rest of the app

* merge with main

* feat: ✨ connect backend and frontend

* fix pr feedback

* change appname in package.json

apps/piping/CHANGELOG.md

@@ -0,0 +1,3 @@
+## Version 0.0.1
+
+Init app

apps/piping/README.md

@@ -0,0 +1,3 @@
+# piping
+
+Add readme

apps/piping/app.config.js

@@ -0,0 +1,15 @@
+import { readFileSync } from 'fs';
+
+const { name } = JSON.parse(readFileSync('./package.json').toString('utf-8'));
+
+export default () => ({
+  manifest: {
+    key: name,
+    name: name,
+  },
+  environment: {
+    uri: 'https://backend-fusion-data-gateway-test.radix.equinor.com',
+    defaultScopes: ['api://ed6de162-dd30-4757-95eb-0ffc8d34fbe0/access_as_user'],
+  },
+  endpoints: {},
+});

apps/piping/app.config.local.js

@@ -0,0 +1,15 @@
+import { readFileSync } from 'fs';
+
+const { name } = JSON.parse(readFileSync('./package.json').toString('utf-8'));
+
+export default () => ({
+  manifest: {
+    key: name,
+    name: name,
+  },
+  environment: {
+    uri: 'https://localhost:7074',
+    defaultScopes: ['api://ed6de162-dd30-4757-95eb-0ffc8d34fbe0/access_as_user'],
+  },
+  endpoints: {},
+});

apps/piping/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "pipetest",
+  "displayName": "Pipetest",
+  "version": "0.0.1",
+  "main": "/src/main.tsx",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "fusion-framework-cli app dev",
+    "dev:local": "fusion-framework-cli app dev -c app.config.local.js",
+    "build": "tsc -b -f",
+    "pr:deploy": "npx ts-node --esm ../../github-action/src/releasePr.ts release",
+    "fprd:deploy": "npx ts-node --esm ../../github-action/src/releaseMain.ts release"
+  },
+  "dependencies": {
+    "@cc-components/pipingapp": "workspace:^",
+    "@cc-components/shared": "workspace:^"
+  },
+  "files": [
+    "dist/app-bundle.js",
+    "app-manifest.json"
+  ]
+}

apps/piping/src/main.tsx

@@ -0,0 +1,15 @@
+import { configure, WorkspaceWrapper } from '@cc-components/pipingapp';
+import { useHttpClient } from '@equinor/fusion-framework-react-app/http';
+import { createRender, RootAppWrapper } from '@cc-components/shared';
+
+const PipingApp = () => {
+  const client = useHttpClient('cc-api');
+  return (
+    <RootAppWrapper client={client}>
+      <WorkspaceWrapper />
+    </RootAppWrapper>
+  );
+};
+
+export const render = createRender(PipingApp, configure, 'Piping');
+export default render;

apps/piping/tsconfig.app.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "types": ["node"],
+    "rootDir": "."
+  },
+  "exclude": [
+    "jest.config.ts",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "dist",
+    "vite.config.ts"
+  ],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}

apps/piping/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

apps/piping/vite.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import EnvironmentPlugin from 'vite-plugin-environment';
+
+export default defineConfig({
+  plugins: [
+    EnvironmentPlugin({
+      NODE_ENV: 'production',
+    }),
+  ],
+  appType: 'custom',
+  build: {
+    emptyOutDir: true,
+    lib: {
+      entry: './src/main.tsx',
+      fileName: 'app-bundle',
+      formats: ['es'],
+    },
+  },
+});

libs/loopsidesheet/src/lib/ui-sidesheet/LoopSidesheet.tsx

@@ -1,10 +1,8 @@
 import { Loop } from '@cc-components/loopshared';
 import { createWidget } from '@cc-components/shared';
-
 import { useState } from 'react';
 import { DetailsTab } from './DetailsTab';
 import { Tabs } from '@equinor/eds-core-react';
-
 import { useGetWorkorders } from '../utils-sidesheet';
 import { Checklists } from './Checklists';
 import { ContentDetails } from './ContentDetails';

libs/pipingapp/README.md

@@ -0,0 +1,3 @@
+# pipingapp
+
+Add readme

libs/pipingapp/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@cc-components/pipingapp",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "module": "./dist/src/index.js",
+  "main": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "dependencies": {
+    "@cc-components/shared": "workspace:^",
+    "@cc-components/sharedcomponents": "workspace:^",
+    "@cc-components/pipingshared": "workspace:^",
+    "@cc-components/pipingsidesheet": "workspace:^"
+  }
+}

libs/pipingapp/src/index.ts

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

libs/pipingapp/src/lib/config/frameworkConfig.ts

@@ -0,0 +1,41 @@
+import {
+  IAppConfigurator,
+  ComponentRenderArgs,
+} from '@equinor/fusion-framework-react-app';
+import { enableContext } from '@equinor/fusion-framework-react-module-context';
+import buildQuery from 'odata-query';
+import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
+
+export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs) => {
+  enableContext(config, async (builder) => {
+    builder.setContextType(['ProjectMaster']);
+    builder.setContextParameterFn(({ search, type }) => {
+      return buildQuery({
+        search,
+        filter: {
+          type: {
+            in: type,
+          },
+        },
+      });
+    });
+  });
+  // Add more config if needed, e.g. enableAgGrid
+
+  const envConfig: PipingEnvConfig = c.env.config?.environment as PipingEnvConfig;
+
+  if (!envConfig) {
+    throw new Error('Failed to load environemnt config for workorder');
+  }
+  config.configureHttpClient('cc-api', {
+    baseUri: envConfig?.uri,
+    defaultScopes: envConfig?.defaultScopes,
+  });
+
+  enableAgGrid(config);
+};
+
+type PipingEnvConfig = {
+  uri: string;
+  defaultScopes: string[];
+};

libs/pipingapp/src/lib/config/gardenConfig.tsx

@@ -0,0 +1,34 @@
+import { Pipetest } from '@cc-components/pipingshared';
+import { useHttpClient } from '@cc-components/shared';
+import { FilterState } from '@equinor/workspace-fusion/filter';
+import { GardenConfig } from '@equinor/workspace-fusion/garden';
+import { useGardenDataSource } from '@cc-components/shared/workspace-config';
+import { GardenItem } from '../ui-garden';
+
+export const useGardenConfig = (
+  contextId: string
+): GardenConfig<Pipetest, FilterState> => {
+  const client = useHttpClient();
+  const { getBlockAsync, getGardenMeta, getHeader, getSubgroupItems } =
+    useGardenDataSource({
+      getBlockAsync: (req) =>
+        client.fetch(`/api/contexts/${contextId}/pipetest/garden`, req),
+      getGardenMeta: (req) =>
+        client.fetch(`/api/contexts/${contextId}/pipetest/garden-meta`, req),
+      getHeader: (req) => client.fetch(`/api/contexts/${contextId}/pipetest/garden`, req),
+      getSubgroupItems: (req) =>
+        client.fetch(`/api/contexts/${contextId}/pipetest/subgroup-items`, req),
+    });
+
+  return {
+    getBlockAsync,
+    getGardenMeta,
+    getHeader,
+    getSubgroupItems,
+    getDisplayName: (item) => item.id,
+    initialGrouping: ['Priority1'],
+    customViews: {
+      customItemView: GardenItem,
+    },
+  };
+};

libs/pipingapp/src/lib/config/index.ts

@@ -0,0 +1,2 @@
+export { WorkspaceWrapper } from './workspaceConfig';
+export { configure } from './frameworkConfig';

libs/pipingapp/src/lib/config/pipingSidesheet.tsx

@@ -0,0 +1,10 @@
+import { SidesheetConfig } from '@equinor/workspace-fusion/sidesheet';
+import { Pipetest } from '@cc-components/pipingshared';
+import { PipingSidesheet } from '@cc-components/pipingsidesheet';
+
+export const sidesheetConfig: SidesheetConfig<Pipetest> = {
+  type: 'default',
+  DetailsSidesheet: (props) => (
+    <PipingSidesheet.Component id={props.id} item={props.item} close={props.close} />
+  ),
+};

libs/pipingapp/src/lib/config/statusBarConfig.ts

@@ -0,0 +1,20 @@
+import { StatusBarConfig } from '@equinor/workspace-fusion/status-bar';
+import { useHttpClient } from '@equinor/fusion-framework-react-app/http';
+
+export const useStatusBarConfig = (contextId: string): StatusBarConfig => {
+  const client = useHttpClient('cc-api');
+
+  return async (filters, signal) => {
+    const res = await client.fetch(`/api/contexts/${contextId}/pipetest/kpis`, {
+      method: 'POST',
+      body: JSON.stringify({
+        filter: filters,
+      }),
+      signal,
+      headers: {
+        ['content-type']: 'application/json',
+      },
+    });
+    return (await res.json()).map((s: any) => ({ ...s, title: s.name }));
+  };
+};

libs/pipingapp/src/lib/config/tableConfig.tsx

@@ -0,0 +1,92 @@
+import { ColDef, GridConfig, ICellRendererProps } from '@equinor/workspace-fusion/grid';
+import { CheckList, Pipetest } from '@cc-components/pipingshared';
+import { FilterState } from '@equinor/workspace-fusion/filter';
+import {
+  defaultGridOptions,
+  useGridDataSource,
+} from '@cc-components/shared/workspace-config';
+import {
+  DateCell,
+  DescriptionCell,
+  StyledMonospace,
+  useHttpClient,
+} from '@cc-components/shared';
+import { generateCommaSeperatedStringArrayColumn } from '../utils-table/generateCommaSeperatedStringArrayColumn';
+import { getHTList } from '../utils-table/tableHelpers';
+
+export const useTableConfig = (contextId: string): GridConfig<Pipetest, FilterState> => {
+  const client = useHttpClient();
+
+  const { getRows, colDefs } = useGridDataSource<Pipetest>(async (req) => {
+    const res = await client.fetch(`/api/contexts/${contextId}/pipetest/grid`, req);
+    const meta = await res.json();
+
+    return {
+      rowCount: meta.rowCount,
+      items: meta.items,
+      columnDefinitions: meta.columnDefinitions,
+    };
+  }, columnDefinitions);
+  return {
+    gridOptions: {
+      ...defaultGridOptions,
+      onFirstDataRendered: (e) => {
+        e.columnApi.autoSizeColumns(
+          e.columnApi
+            .getAllDisplayedColumns()
+            .filter((column) => column.getColId() !== 'description')
+        );
+      },
+    },
+    getRows: getRows,
+    columnDefinitions: colDefs as [ColDef<Pipetest>, ...ColDef<Pipetest>[]],
+  };
+};
+
+const columnDefinitions: [ColDef<Pipetest>, ...ColDef<Pipetest>[]] = [
+  {
+    headerName: 'Pipetest',
+    valueGetter: (pkg) => pkg.data?.id,
+    cellRenderer: (props: ICellRendererProps<Pipetest, string>) => {
+      return <StyledMonospace>{props.value}</StyledMonospace>;
+    },
+  },
+  {
+    headerName: 'Description',
+    colId: 'description',
+    valueGetter: (pkg) => pkg.data?.description,
+    cellRenderer: (props: ICellRendererProps<Pipetest, string | null>) => {
+      return <DescriptionCell description={props.value} />;
+    },
+    width: 300,
+  },
+  { headerName: 'Priority', valueGetter: (pkg) => pkg.data?.commPkPriority1 },
+  {
+    headerName: 'Location',
+    valueGetter: (pkg) => pkg.data?.location,
+    cellRenderer: (props: ICellRendererProps<Pipetest, string>) => {
+      return <StyledMonospace>{props.value}</StyledMonospace>;
+    },
+  },
+  { headerName: 'Checklist status', valueGetter: (pkg) => 't.b.d :D' },
+  { headerName: 'Current step', valueGetter: (pkg) => 't.b.d :D' },
+  {
+    headerName: 'RFC',
+    valueGetter: (pkg) => pkg.data?.rfccPlanned,
+    cellRenderer: (props: ICellRendererProps<Pipetest, string | null | undefined>) => {
+      return props.value ? <DateCell dateString={props.value} /> : null;
+    },
+  },
+  {
+    headerName: 'HT cables',
+    valueGetter: (pkg) => pkg.data?.checkLists,
+    cellRenderer: (props: ICellRendererProps<Pipetest, CheckList[]>) => {
+      if (!props.value) return null;
+      return (
+        <StyledMonospace>
+          {generateCommaSeperatedStringArrayColumn(getHTList(props.value))}
+        </StyledMonospace>
+      );
+    },
+  },
+];