Route setup and placeholder layouts for Data Files (#1161)

* add skeleton routes for data files

* Update routing for 3rd party apps

* Add boilerplate for _common and datafiles libs

* add workspace layout and side nav

* add placeholder layouts for data depot components

* CSS/layout tweaks

* Working listings for Tapis files

* rename file listing hook

* add hooks for listing params and current user

* support navigation into directories

* update file listing to use infinite scroll

* refactor listing to use callback refs

* handle netxpage tokens; use resize observer to handle scroll

* listing style changes.

* working preview modal

* hook row selection up to global state

* performance tweaks for listing table

* Factor out table component and add performant checkbox

* comments and css refactors

* set up toolbar with preview modal

* refactor modal children setup

* add breadcrumbs

* extract utility type for passing spread params to useQuery

* Add placeholder copy modal

* refactor preview modal to split out content display

* enable override of listing table props

* listings/breadcrumbs work in copy modal

* get copy modal functional within My Data

* Code cleanup and style tweaks

* extract inline styles

client/.eslintrc.base.json

@@ -10,7 +10,11 @@
           "error",
           {
             "enforceBuildableLibDependency": true,
-            "allow": ["@client/hooks", "@client/test-fixtures"],
+            "allow": [
+              "@client/hooks",
+              "@client/test-fixtures",
+              "@client/common-components"
+            ],
             "depConstraints": [
               {
                 "sourceTag": "*",

client/modules/_common_components/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

client/modules/_common_components/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

client/modules/_common_components/README.md

@@ -0,0 +1,7 @@
+# common-components
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test common-components` to execute the unit tests via [Vitest](https://vitest.dev/).

client/modules/_common_components/project.json

@@ -0,0 +1,20 @@
+{
+  "name": "common-components",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "modules/_common_components/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "../../coverage/modules/_common_components"
+      }
+    }
+  }
+}

client/modules/_common_components/src/index.ts

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

client/modules/_common_components/src/lib/common-components.module.css

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

client/modules/_common_components/src/lib/common-components.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import CommonComponents from './common-components';
+
+describe('CommonComponents', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<CommonComponents />);
+    expect(baseElement).toBeTruthy();
+  });
+});

client/modules/_common_components/src/lib/common-components.tsx

@@ -0,0 +1,14 @@
+import styles from './common-components.module.css';
+
+/* eslint-disable-next-line */
+export interface CommonComponentsProps {}
+
+export function CommonComponents(props: CommonComponentsProps) {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to CommonComponents!</h1>
+    </div>
+  );
+}
+
+export default CommonComponents;

client/modules/_common_components/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

client/modules/_common_components/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

client/modules/_common_components/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

client/modules/_common_components/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/modules/_common_components',
+
+  plugins: [react(), nxViteTsPaths()],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  test: {
+    globals: true,
+    cache: { dir: '../../node_modules/.vitest' },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/modules/_common_components',
+      provider: 'v8',
+    },
+  },
+});

client/modules/_hooks/src/apiClient.ts

@@ -1,6 +1,8 @@
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 
-const apiClient = axios.create({
+export type TApiError = AxiosError<{ message?: string }>;
+
+export const apiClient = axios.create({
   timeout: 30000,
   xsrfHeaderName: 'X-CSRFToken',
   xsrfCookieName: 'csrftoken',

client/modules/_hooks/src/datafiles/index.ts

@@ -0,0 +1,20 @@
+export { default as useFileListing } from './useFileListing';
+export type { FileListingResponse, TFileListing } from './useFileListing';
+export { default as useFileListingRouteParams } from './useFileListingRouteParams';
+export { useFilePreview } from './useFilePreview';
+export type {
+  TPreviewParams,
+  TPreviewFileType,
+  TFilePreviewResponse,
+} from './useFilePreview';
+export { useConsumePostit } from './useConsumePostit';
+export {
+  useSelectedFiles,
+  useSelectedFilesForSystem,
+} from './useSelectedFiles';
+
+export { useFileCopy } from './useFileCopy';
+export {
+  usePathDisplayName,
+  getSystemRootDisplayName,
+} from './usePathDisplayName';

client/modules/_hooks/src/datafiles/useConsumePostit.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+import apiClient from '../apiClient';
+import { AxiosError } from 'axios';
+import { TQueryOptionExtras } from '../queryConfig';
+
+type TPostitParams = {
+  href: string;
+  responseType?: 'text' | 'blob';
+  queryOptions: TQueryOptionExtras<string | Blob, AxiosError>;
+};
+
+async function fetchPostit({
+  href,
+  signal,
+  responseType = 'text',
+}: {
+  href: string;
+  signal: AbortSignal;
+  responseType: 'text' | 'blob';
+}) {
+  const resp = await apiClient.get<string | Blob>(href, {
+    signal,
+    responseType,
+  });
+  return resp.data;
+}
+
+export function useConsumePostit({
+  href,
+  responseType = 'text',
+  queryOptions,
+}: TPostitParams) {
+  return useQuery({
+    queryKey: ['datafiles', 'preview', 'postit', href],
+    queryFn: ({ signal }) => fetchPostit({ href, signal, responseType }),
+    ...queryOptions,
+  });
+}

client/modules/_hooks/src/datafiles/useFileCopy.ts

@@ -0,0 +1,27 @@
+import { useMutation } from '@tanstack/react-query';
+import apiClient from '../apiClient';
+
+type TCopyParam = { api: string; system: string; path: string };
+
+function copyFn(src: TCopyParam, dest: TCopyParam, doi?: string) {
+  return apiClient.put(
+    `/api/datafiles/${src.api}/private/copy/${src.system}/${src.path}/${
+      doi ? `?doi=${doi}` : ''
+    }`,
+    { dest_system: dest.system, dest_path: dest.path }
+  );
+}
+
+export function useFileCopy() {
+  return useMutation({
+    mutationFn: ({
+      src,
+      dest,
+      doi,
+    }: {
+      src: TCopyParam;
+      dest: TCopyParam;
+      doi?: string;
+    }) => copyFn(src, dest, doi),
+  });
+}