From d9fea2892f55a83abc57f7e4726ea05371954fca Mon Sep 17 00:00:00 2001 From: aldbr Date: Mon, 21 Oct 2024 19:01:37 +0200 Subject: [PATCH] chore(prettier): fix issues --- .../components/JobMonitor/JobDataTable.tsx | 37 ++--------- .../components/shared/DataTable.stories.tsx | 63 ++++++++++--------- .../components/shared/DataTable.tsx | 53 +++++++--------- .../components/shared/FilterForm.stories.tsx | 39 ++++++++++-- .../components/shared/FilterForm.tsx | 2 +- .../shared/FilterToolbar.stories.tsx | 42 ++++++++++--- .../{types/ColumnMetadata.ts => global.d.ts} | 8 ++- packages/diracx-web-components/tsconfig.json | 2 +- packages/diracx-web-components/tsup.config.ts | 7 +-- packages/diracx-web-components/types/index.ts | 1 - .../extensions/src/app/(dashboard)/layout.tsx | 10 +-- 11 files changed, 144 insertions(+), 120 deletions(-) rename packages/diracx-web-components/{types/ColumnMetadata.ts => global.d.ts} (55%) diff --git a/packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx b/packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx index d037acaf..b4bbf6af 100644 --- a/packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx +++ b/packages/diracx-web-components/components/JobMonitor/JobDataTable.tsx @@ -41,7 +41,6 @@ import { rescheduleJobs, useJobs, } from "./JobDataService"; -import { InternalFilter } from "@/types/Filter"; import { JobHistory } from "@/types/JobHistory"; import { Job, SearchBody } from "@/types"; @@ -129,8 +128,6 @@ const headCells: Array< }) as AccessorKeyColumnDef, ]; -type Order = "asc" | "desc"; - /** * The data grid for the jobs */ @@ -147,16 +144,13 @@ export function JobDataTable() { message: "", severity: "success", }); - // State for sorting - const [order, setOrder] = React.useState("asc"); - const [orderBy, setOrderBy] = React.useState("JobID"); // State for pagination const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(25); - // State for filters - const [filters, setFilters] = React.useState([]); // State for search body - const [searchBody, setSearchBody] = React.useState({}); + const [searchBody, setSearchBody] = React.useState({ + sort: [{ parameter: "JobID", direction: "asc" }], + }); // State for job history const [isHistoryDialogOpen, setIsHistoryDialogOpen] = React.useState(false); const [jobHistoryData, setJobHistoryData] = React.useState([]); @@ -171,23 +165,8 @@ export function JobDataTable() { rowsPerPage, ); - const dataHeader = data?.headers; const results = data?.data || []; - // Parse the headers to get the first item, last item and number of items - const contentRange = dataHeader?.get("content-range"); - let totalJobs = 0; - - if (contentRange) { - const match = contentRange.match(/jobs (\d+)-(\d+)\/(\d+)/); - if (match) { - totalJobs = parseInt(match[3]); - } - } else if (results) { - totalJobs = results.length; - } - - const columns = headCells; const clearSelected = () => setSelected([]); /** @@ -364,17 +343,11 @@ export function JobDataTable() { setPage={setPage} rowsPerPage={rowsPerPage} setRowsPerPage={setRowsPerPage} - order={order} - setOrder={setOrder} - orderBy={orderBy} - setOrderBy={setOrderBy} - totalRows={totalJobs} selected={selected} setSelected={setSelected} - filters={filters} - setFilters={setFilters} + searchBody={searchBody} setSearchBody={setSearchBody} - columns={columns} + columns={headCells} rows={results} error={error} isLoading={isLoading} diff --git a/packages/diracx-web-components/components/shared/DataTable.stories.tsx b/packages/diracx-web-components/components/shared/DataTable.stories.tsx index 4db01c0f..d75ab188 100644 --- a/packages/diracx-web-components/components/shared/DataTable.stories.tsx +++ b/packages/diracx-web-components/components/shared/DataTable.stories.tsx @@ -2,6 +2,10 @@ import React from "react"; import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/core/preview-api"; import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles"; +import { + AccessorKeyColumnDef, + createColumnHelper, +} from "@tanstack/react-table"; import { useMUITheme } from "../../hooks/theme"; import { DataTable } from "./DataTable"; @@ -18,15 +22,9 @@ const meta = { setPage: { control: false }, rowsPerPage: { control: "number" }, setRowsPerPage: { control: false }, - order: { control: "radio" }, - setOrder: { control: false }, - orderBy: { control: "text" }, - setOrderBy: { control: false }, - totalRows: { control: "number" }, selected: { control: "object" }, setSelected: { control: false }, - filters: { control: "object" }, - setFilters: { control: false }, + searchBody: { control: false }, setSearchBody: { control: false }, columns: { control: "object" }, rows: { control: "object" }, @@ -51,6 +49,34 @@ const meta = { ], } satisfies Meta; +interface SimpleItem extends Record { + id: number; + name: string; + email: string; + [key: string]: unknown; +} + +const columnHelper = createColumnHelper(); + +const columns: Array< + | AccessorKeyColumnDef, number> + | AccessorKeyColumnDef, string> + | AccessorKeyColumnDef, Date> +> = [ + columnHelper.accessor("id", { + header: "ID", + meta: { type: "number" }, + }) as AccessorKeyColumnDef, number>, + columnHelper.accessor("name", { + header: "Name", + meta: { type: "string" }, + }) as AccessorKeyColumnDef, string>, + columnHelper.accessor("email", { + header: "Email", + meta: { type: "string" }, + }) as AccessorKeyColumnDef, string>, +]; + export default meta; type Story = StoryObj; @@ -68,21 +94,11 @@ export const Default: Story = { setPage: () => {}, rowsPerPage: 25, setRowsPerPage: () => {}, - order: "asc", - setOrder: () => {}, - orderBy: "id", - setOrderBy: () => {}, - totalRows: 1, selected: [], setSelected: () => {}, - filters: [], - setFilters: () => {}, + searchBody: { sort: [{ parameter: "id", direction: "asc" }] }, setSearchBody: () => {}, - columns: [ - { id: "id", label: "ID" }, - { id: "name", label: "Name" }, - { id: "email", label: "Email" }, - ], + columns: columns, rows: [{ id: 1, name: "John Doe", email: "john@example.com" }], error: "", isValidating: false, @@ -103,15 +119,6 @@ export const Default: Story = { newRowsPerPage = newRowsPerPage(props.rowsPerPage); updateArgs({ rowsPerPage: newRowsPerPage }); }; - props.setOrder = (newOrder) => { - if (typeof newOrder === "function") newOrder = newOrder(props.order); - updateArgs({ order: newOrder }); - }; - props.setOrderBy = (newOrderBy) => { - if (typeof newOrderBy === "function") - newOrderBy = newOrderBy(props.orderBy); - updateArgs({ orderBy: newOrderBy }); - }; props.setSelected = (newSelected) => { if (typeof newSelected === "function") newSelected = newSelected(props.selected); diff --git a/packages/diracx-web-components/components/shared/DataTable.tsx b/packages/diracx-web-components/components/shared/DataTable.tsx index 42c03a4b..87b1bd1f 100644 --- a/packages/diracx-web-components/components/shared/DataTable.tsx +++ b/packages/diracx-web-components/components/shared/DataTable.tsx @@ -126,7 +126,7 @@ function DataTableToolbar(props: DataTableToolbarProps) { open={snackbarOpen} autoHideDuration={6000} onClose={() => setSnackbarOpen(false)} - message="Job IDs copied to clipboard" + message="IDs copied to clipboard" /> {toolbarComponents} @@ -146,8 +146,6 @@ function DataTableToolbar(props: DataTableToolbarProps) { * @property {function} setRowsPerPage - the function to call when the rows per page change * @property {number[]} selected - the selected rows * @property {function} setSelected - the function to call when the selected rows change - * @property {Filter[]} filters - the filters to apply - * @property {function} setFilters - the function to call when the filters change * @property {function} setSearchBody - the function to call when the search body changes * @property {AccessorKeyColumnDef[]} columns - the columns of the table * @property {T[]} rows - the rows of the table @@ -168,24 +166,12 @@ interface DataTableProps> { rowsPerPage: number; /** The function to call when the rows per page change */ setRowsPerPage: React.Dispatch>; - /** The order of the table, either "asc" or "desc" */ - order: "asc" | "desc"; - /** The function to call when the order changes */ - setOrder: React.Dispatch>; - /** The column to order by */ - orderBy: string | number; - /** The function to call when the order by changes */ - setOrderBy: React.Dispatch>; - /** The total number of rows */ - totalRows: number; /** The selected rows */ selected: readonly number[]; /** The function to call when the selected rows change */ setSelected: React.Dispatch>; - /** The filters to apply */ - filters: InternalFilter[]; - /** The function to call when the filters change */ - setFilters: React.Dispatch>; + /** The search body to send along with the request */ + searchBody: SearchBody; /** The function to call when the search body changes */ setSearchBody: React.Dispatch>; /** The columns of the table */ @@ -226,15 +212,9 @@ export function DataTable>( setPage, rowsPerPage, setRowsPerPage, - order, - setOrder, - orderBy, - setOrderBy, - totalRows, selected, setSelected, - filters, - setFilters, + searchBody, setSearchBody, columns, rows, @@ -255,6 +235,8 @@ export function DataTable>( const { getParam, setParam } = useSearchParamsUtils(); const appId = getParam("appId"); + // State for filters + const [filters, setFilters] = React.useState([]); const [appliedFilters, setAppliedFilters] = React.useState(filters); @@ -348,9 +330,10 @@ export function DataTable>( _event: React.MouseEvent, property: string, ) => { - const isAsc = orderBy === property && order === "asc"; - setOrder(isAsc ? "desc" : "asc"); - setOrderBy(property); + const isAsc = + searchBody.sort && + searchBody.sort[0]?.parameter === property && + searchBody.sort[0]?.direction === "asc"; setSearchBody((prevState: SearchBody) => ({ ...prevState, sort: [{ parameter: property, direction: isAsc ? "desc" : "asc" }], @@ -559,7 +542,7 @@ export function DataTable>( /> - style={{ flexGrow: 1, width: "100%" }} + style={{ flexGrow: 1, width: "100%", minHeight: "100px" }} data={rows} components={VirtuosoTableComponents} context={{ @@ -593,8 +576,16 @@ export function DataTable>( }} > handleRequestSort(event, header.id)} > {flexRender( @@ -668,7 +659,7 @@ export function DataTable>( ; +interface SimpleItem extends Record { + id: number; + name: string; + email: string; +} + +const columnHelper = createColumnHelper(); + +const columns: Array< + | AccessorKeyColumnDef, number> + | AccessorKeyColumnDef, string> + | AccessorKeyColumnDef, Date> +> = [ + columnHelper.accessor("id", { + header: "ID", + meta: { type: "number" }, + }) as AccessorKeyColumnDef, number>, + columnHelper.accessor("name", { + header: "Name", + meta: { type: "string" }, + }) as AccessorKeyColumnDef, string>, + columnHelper.accessor("email", { + header: "Email", + meta: { type: "string" }, + }) as AccessorKeyColumnDef, string>, +]; + export const Default: Story = { args: { - columns: [ - { id: "id", label: "ID" }, - { id: "name", label: "Name" }, - { id: "age", label: "Age" }, - ], - filters: [{ id: 0, column: "id", operator: "eq", value: "1" }], + columns: columns, + filters: [{ id: 0, parameter: "id", operator: "eq", value: "1" }], setFilters: () => {}, handleFilterChange: () => {}, handleFilterMenuClose: () => {}, diff --git a/packages/diracx-web-components/components/shared/FilterForm.tsx b/packages/diracx-web-components/components/shared/FilterForm.tsx index 99de3177..4b23279c 100644 --- a/packages/diracx-web-components/components/shared/FilterForm.tsx +++ b/packages/diracx-web-components/components/shared/FilterForm.tsx @@ -250,7 +250,7 @@ export function FilterForm>( multiple={isMultiple} sx={{ minWidth: 100 }} > - {selectedColumn?.meta?.values?.map((val) => ( + {selectedColumn?.meta?.values?.map((val: string) => ( {val} diff --git a/packages/diracx-web-components/components/shared/FilterToolbar.stories.tsx b/packages/diracx-web-components/components/shared/FilterToolbar.stories.tsx index 9d90c997..bf38860b 100644 --- a/packages/diracx-web-components/components/shared/FilterToolbar.stories.tsx +++ b/packages/diracx-web-components/components/shared/FilterToolbar.stories.tsx @@ -3,6 +3,10 @@ import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/core/preview-api"; import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles"; import { Paper } from "@mui/material"; +import { + AccessorKeyColumnDef, + createColumnHelper, +} from "@tanstack/react-table"; import { useMUITheme } from "../../hooks/theme"; import { FilterToolbar } from "./FilterToolbar"; @@ -33,23 +37,45 @@ const meta = { ], } satisfies Meta; +interface SimpleItem extends Record { + id: number; + name: string; + email: string; +} + +const columnHelper = createColumnHelper(); +const columns: Array< + | AccessorKeyColumnDef, number> + | AccessorKeyColumnDef, string> + | AccessorKeyColumnDef, Date> +> = [ + columnHelper.accessor("id", { + header: "ID", + meta: { type: "number" }, + }) as AccessorKeyColumnDef, number>, + columnHelper.accessor("name", { + header: "Name", + meta: { type: "string" }, + }) as AccessorKeyColumnDef, string>, + columnHelper.accessor("email", { + header: "Email", + meta: { type: "string" }, + }) as AccessorKeyColumnDef, string>, +]; + export default meta; type Story = StoryObj; export const Default: Story = { args: { - columns: [ - { id: "id", label: "ID" }, - { id: "name", label: "Name" }, - { id: "age", label: "Age" }, - ], + columns: columns, filters: [ - { id: 0, column: "id", operator: "eq", value: "1" }, - { id: 1, column: "id", operator: "neq", value: "2" }, + { id: 0, parameter: "id", operator: "eq", value: "1" }, + { id: 1, parameter: "id", operator: "neq", value: "2" }, ], setFilters: () => {}, handleApplyFilters: () => {}, - appliedFilters: [{ id: 0, column: "id", operator: "eq", value: "1" }], + appliedFilters: [{ id: 0, parameter: "id", operator: "eq", value: "1" }], }, render: (props) => { const [{ filters }, updateArgs] = useArgs(); diff --git a/packages/diracx-web-components/types/ColumnMetadata.ts b/packages/diracx-web-components/global.d.ts similarity index 55% rename from packages/diracx-web-components/types/ColumnMetadata.ts rename to packages/diracx-web-components/global.d.ts index 99d9c468..eba9ac8b 100644 --- a/packages/diracx-web-components/types/ColumnMetadata.ts +++ b/packages/diracx-web-components/global.d.ts @@ -1,9 +1,11 @@ -import { RowData } from "@tanstack/react-table"; +export {}; +import "@tanstack/react-table"; + +/* eslint-disable @typescript-eslint/no-unused-vars */ declare module "@tanstack/react-table" { // Extend ColumnMeta to include custom properties - // eslint-disable-next-line @typescript-eslint/no-unused-vars - export interface ColumnMeta { + interface ColumnMeta { type?: "string" | "number" | "date" | "category"; values?: string[]; // Optional values for category-type fields } diff --git a/packages/diracx-web-components/tsconfig.json b/packages/diracx-web-components/tsconfig.json index e95531ba..3c9772e6 100644 --- a/packages/diracx-web-components/tsconfig.json +++ b/packages/diracx-web-components/tsconfig.json @@ -33,7 +33,7 @@ "@/*": ["./*"] } }, - "include": ["**/*.ts", "**/*.tsx"], + "include": ["global.d.ts", "**/*.ts", "**/*.tsx"], "exclude": [ "app", "node_modules", diff --git a/packages/diracx-web-components/tsup.config.ts b/packages/diracx-web-components/tsup.config.ts index 8cc24d37..e1a1991a 100644 --- a/packages/diracx-web-components/tsup.config.ts +++ b/packages/diracx-web-components/tsup.config.ts @@ -5,6 +5,7 @@ import { defineConfig } from "tsup"; export default defineConfig([ { entry: [ + "global.d.ts", "components/!(index|*.stories).ts?(x)", "components/*/!(index|*.stories).ts?(x)", "hooks/!(index|*.stories).ts?(x)", @@ -19,12 +20,11 @@ export default defineConfig([ async onSuccess() { // recursively go through each js file in dist and add "use client" to the top const distDir = path.join(__dirname, "dist"); - const files = await fs.readdir(distDir); - async function processFilesRecursively(dir: string): Promise { + async function processFilesRecursively(dir: string): Promise { // Read dirents of the current folder const dirents = await fs.readdir(dir, { withFileTypes: true }); - const promises = dirents.map(async (dirent) => { + dirents.map(async (dirent) => { const filePath = dirent.path + "/" + dirent.name; if (dirent.isDirectory()) return processFilesRecursively(filePath); @@ -39,7 +39,6 @@ export default defineConfig([ await fs.writeFile(filePath, newFileContents); } }); - return Promise.all(promises.flat()); } await processFilesRecursively(distDir); }, diff --git a/packages/diracx-web-components/types/index.ts b/packages/diracx-web-components/types/index.ts index 1bc7f7a3..39df68bd 100644 --- a/packages/diracx-web-components/types/index.ts +++ b/packages/diracx-web-components/types/index.ts @@ -1,6 +1,5 @@ export { type default as ApplicationMetadata } from "./ApplicationMetadata"; /* eslint-disable import/export */ -export * from "./ColumnMetadata"; export * from "./Filter"; export * from "./DashboardGroup"; export * from "./DashboardItem"; diff --git a/packages/extensions/src/app/(dashboard)/layout.tsx b/packages/extensions/src/app/(dashboard)/layout.tsx index f12a9cd3..4567776c 100644 --- a/packages/extensions/src/app/(dashboard)/layout.tsx +++ b/packages/extensions/src/app/(dashboard)/layout.tsx @@ -45,12 +45,12 @@ export default function DashboardLayout({ {children}