frontend: use more css modules; small fixes

rr- · Jun 30, 2023 · fa4ebdd · fa4ebdd
1 parent cbd79c4
commit fa4ebdd
Show file tree

Hide file tree

Showing 115 changed files with 1,095 additions and 1,177 deletions.
diff --git a/backend/trcustoms/utils.py b/backend/trcustoms/utils.py
@@ -101,7 +101,6 @@ def parse_date_range(
 ) -> tuple[datetime | None, datetime | None] | None:
     date_min: datetime | None = None
     date_max: datetime | None = None
-    print("source", source, flush=1)
     if source and (
         match := re.match(r"^(?P<year>\d{4})(?:-(?P<month>\d{1,2}))?$", source)
     ):

diff --git a/frontend/src/App.css b/frontend/src/App.css
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,4 +1,3 @@
-import "./App.css";
 import "./themes.css";
 import { useEffect } from "react";
 import { Routes } from "react-router-dom";

diff --git a/frontend/src/components/common/AuditLogSearch/index.tsx b/frontend/src/components/common/AuditLogSearch/index.tsx
@@ -239,14 +239,16 @@ const AuditLogSearch = ({
     >
       {({ submitForm, resetForm }) => (
         <Form className="ChildMarginClear">
-          <SectionHeader className={styles.header}>
-            Search filter
-            <Link
-              className={styles.resetButton}
-              onClick={() => handleClear(resetForm)}
-            >
-              (reset)
-            </Link>
+          <SectionHeader>
+            <span className={styles.header}>
+              Search filter
+              <Link
+                className={styles.resetButton}
+                onClick={() => handleClear(resetForm)}
+              >
+                (reset)
+              </Link>
+            </span>
           </SectionHeader>
 
           <div className={styles.form}>

diff --git a/frontend/src/components/common/AuditLogTable/index.css b/frontend/src/components/common/AuditLogTable/index.css
diff --git a/frontend/src/components/common/AuditLogTable/index.module.css b/frontend/src/components/common/AuditLogTable/index.module.css
@@ -0,0 +1,26 @@
+.table :global td {
+  border-bottom: 1px solid var(--label-bg-color);
+}
+
+.table :global .created,
+.table :global .author {
+  white-space: nowrap;
+  width: 10%;
+}
+
+.table :global .object {
+  width: 40%;
+}
+.table :global .changes {
+  width: 40%;
+}
+
+.changesWrapper {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0 0.5rem;
+}
+.requiresAction {
+  white-space: nowrap;
+}
diff --git a/frontend/src/components/common/AuditLogTable/index.tsx b/frontend/src/components/common/AuditLogTable/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useQuery } from "react-query";
 import type { DataTableColumn } from "src/components/common/DataTable";
 import { DataTable } from "src/components/common/DataTable";
@@ -192,10 +192,10 @@ const AuditLogTable = ({
       name: "changes",
       label: "Changes",
       itemElement: ({ item }) => (
-        <span className="AuditLogTable--changesWrapper">
+        <span className={styles.changesWrapper}>
           {item.changes.join(" ")}
           {item.is_action_required && (
-            <span className="AuditLogTable--requiresAction">
+            <span className={styles.requiresAction}>
               <IconExclamation /> Requires action
             </span>
           )}
@@ -207,17 +207,15 @@ const AuditLogTable = ({
   const itemKey = (auditLog: AuditLogListing) => `${auditLog.id}`;
 
   return (
-    <div className="AuditLogTable">
-      <DataTable
-        className="AuditLogTable"
-        queryName="auditLogs"
-        columns={columns}
-        itemKey={itemKey}
-        searchQuery={searchQuery}
-        searchFunc={AuditLogService.searchAuditLogs}
-        onSearchQueryChange={onSearchQueryChange}
-      />
-    </div>
+    <DataTable
+      className={styles.table}
+      queryName="auditLogs"
+      columns={columns}
+      itemKey={itemKey}
+      searchQuery={searchQuery}
+      searchFunc={AuditLogService.searchAuditLogs}
+      onSearchQueryChange={onSearchQueryChange}
+    />
   );
 };
 

diff --git a/.../src/components/common/Checkbox/index.css → ...mponents/common/Checkbox/index.module.css b/.../src/components/common/Checkbox/index.css → ...mponents/common/Checkbox/index.module.css
@@ -1,8 +1,8 @@
-.Checkbox--label {
+.label {
   cursor: pointer;
 }
 
-.Checkbox--input {
+.input {
   position: relative;
   cursor: pointer;
   width: 20px;
@@ -12,7 +12,7 @@
   margin: 0 0.5rem 0 0;
   display: inline-flex;
 }
-.Checkbox--input:before {
+.input:before {
   content: "";
   display: block;
   position: absolute;
@@ -25,7 +25,7 @@
   color: var(--input-fg-color);
   box-sizing: border-box;
 }
-.Checkbox--input:checked:before {
+.input:checked:before {
   content: "";
   display: block;
   position: absolute;
@@ -36,7 +36,7 @@
   border-color: var(--button-bg-color);
   background-color: var(--button-bg-color);
 }
-.Checkbox--input:checked:after {
+.input:checked:after {
   content: "";
   display: block;
   width: 30%;

diff --git a/frontend/src/components/common/Checkbox/index.tsx b/frontend/src/components/common/Checkbox/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 
 interface CheckboxProps {
   label: string | React.ReactNode;
@@ -9,9 +9,9 @@ interface CheckboxProps {
 
 const Checkbox = ({ label, ...props }: CheckboxProps) => {
   return (
-    <div className="Checkbox">
-      <label className="Checkbox--label">
-        <input type="checkbox" className="Checkbox--input" {...props} />
+    <div>
+      <label className={styles.label}>
+        <input type="checkbox" className={styles.input} {...props} />
         {label}
       </label>
     </div>

diff --git a/.../src/components/common/DataList/index.css → ...mponents/common/DataList/index.module.css b/.../src/components/common/DataList/index.css → ...mponents/common/DataList/index.module.css
@@ -1,3 +1,3 @@
-.DataList--page {
+.page {
   display: contents;
 }
diff --git a/frontend/src/components/common/DataList/index.tsx b/frontend/src/components/common/DataList/index.tsx
@@ -1,4 +1,4 @@
-import "./index.css";
+import styles from "./index.module.css";
 import { useRef } from "react";
 import { Fragment } from "react";
 import { useEffect } from "react";
@@ -17,6 +17,7 @@ interface DataListProps<TItem, TQuery> {
   queryName: string;
   itemKey: (item: TItem) => string;
   itemView: (item: TItem) => React.ReactNode;
+  pageView?: (children: React.ReactNode) => React.ReactNode;
 
   searchQuery: TQuery;
   searchFunc: (
@@ -27,6 +28,11 @@ interface DataListProps<TItem, TQuery> {
   onSearchQueryChange?: ((searchQuery: TQuery) => void) | undefined;
 }
 
+interface ConcreteDataListProps<TItem, TQuery>
+  extends DataListProps<TItem, TQuery> {
+  pageView: (children: React.ReactNode) => React.ReactNode;
+}
+
 const PagedDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   className,
   searchQuery,
@@ -35,8 +41,9 @@ const PagedDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   onSearchQueryChange,
   itemKey,
   itemView,
+  pageView,
   queryName,
-}: DataListProps<TItem, TQuery>) => {
+}: ConcreteDataListProps<TItem, TQuery>) => {
   const result = useQuery<GenericSearchResult<TQuery, TItem>, Error>(
     [queryName, searchFunc, searchQuery],
     async () => searchFunc(searchQuery)
@@ -55,13 +62,13 @@ const PagedDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   }
 
   return (
-    <div className={`DataList ChildMarginClear ${className || ""}`}>
+    <div className={`ChildMarginClear ${className || ""}`}>
       {result.data.results.length ? (
-        <div className="DataList--body">
-          {result.data.results.map((item) => (
+        pageView(
+          result.data.results.map((item) => (
             <Fragment key={itemKey(item)}>{itemView(item)}</Fragment>
-          ))}
-        </div>
+          ))
+        )
       ) : (
         <p>There are no results to show.</p>
       )}
@@ -87,8 +94,9 @@ const InfiniteDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   onResultCountChange,
   itemKey,
   itemView,
+  pageView,
   queryName,
-}: DataListProps<TItem, TQuery>) => {
+}: ConcreteDataListProps<TItem, TQuery>) => {
   const result = useInfiniteQuery<GenericSearchResult<TQuery, TItem>, Error>(
     [queryName, searchQuery],
     async ({ pageParam }) => {
@@ -131,20 +139,20 @@ const InfiniteDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   }, [onResultCountChange, result]);
 
   return (
-    <div className={`DataList ChildMarginClear ${className}`}>
+    <div className={`ChildMarginClear ${className}`}>
       {result.data?.pages?.[0]?.total_count === 0 && (
         <p>There are no results to show.</p>
       )}
 
-      <div className="DataList--body">
-        {result.data?.pages?.map((result, i) => (
-          <div key={`body${i}`} className="DataList--page">
+      {pageView(
+        result.data?.pages?.map((result, i) => (
+          <div key={`body${i}`} className={styles.page}>
             {result.results.map((item) => (
               <Fragment key={itemKey(item)}>{itemView(item)}</Fragment>
             ))}
           </div>
-        ))}
-      </div>
+        ))
+      )}
 
       <span ref={infiniteScrollRef} />
 
@@ -153,14 +161,17 @@ const InfiniteDataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
   );
 };
 
-const DataList = <TItem extends {}, TQuery extends GenericSearchQuery>(
-  props: DataListProps<TItem, TQuery>
-) => {
+const DataList = <TItem extends {}, TQuery extends GenericSearchQuery>({
+  pageView,
+  ...props
+}: DataListProps<TItem, TQuery>) => {
   const { infiniteScroll } = useSettings();
+  pageView ||= (children) => <div>{children}</div>;
+
   if (infiniteScroll) {
-    return <InfiniteDataList {...props} />;
+    return <InfiniteDataList pageView={pageView} {...props} />;
   }
-  return <PagedDataList {...props} />;
+  return <PagedDataList pageView={pageView} {...props} />;
 };
 
 export { PagedDataList, InfiniteDataList, DataList };
diff --git a/frontend/src/components/common/DataTable/index.css b/frontend/src/components/common/DataTable/index.css