change: add react-hot-toast

.docker/docker-compose.yml

@@ -61,7 +61,6 @@ services:
       CONNECT_REST_ADVERTISED_HOST_NAME: 127.0.0.1
       CONNECT_REST_ADVERTISED_PORT: 8083
       CONNECT_TASKS_MAX: 1
-
     depends_on:
       - kafka
     restart: on-failure
@@ -87,6 +86,11 @@ services:
       - ALLOW_EMPTY_PASSWORD=yes
     restart: always
 
+  redisinsight:
+    image: redislabs/redisinsight:latest
+    ports:
+      - '8001:8001'
+
   monta_rabbitmq:
     image: rabbitmq:3-management
     container_name: monta-rabbitmq

.pre-commit-config.yaml

@@ -1,5 +1,5 @@
 default_language_version:
-    python: python3.11
+    python: python3.12
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v4.5.0

client/package.json

@@ -34,15 +34,15 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-spring/core": "^9.7.3",
     "@react-spring/web": "^9.7.3",
-    "@storybook/addon-toolbars": "^7.6.4",
-    "@tanstack/react-query": "^5.13.4",
-    "@tanstack/react-query-devtools": "^5.13.5",
-    "@tanstack/react-table": "^8.10.7",
+    "@storybook/addon-toolbars": "^7.6.5",
+    "@tanstack/react-query": "^5.14.1",
+    "@tanstack/react-query-devtools": "^5.14.1",
+    "@tanstack/react-table": "^8.11.0",
     "@types/react-datepicker": "^4.19.4",
+    "@types/react-resizable": "^3.0.7",
     "@use-gesture/react": "^10.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "axios": "^1.6.2",
@@ -51,52 +51,54 @@
     "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "howler": "^2.2.4",
-    "lucide-react": "^0.294.0",
+    "lucide-react": "^0.298.0",
     "path-to-regexp": "^6.2.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-datepicker": "^4.24.0",
     "react-day-picker": "^8.9.1",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^4.0.11",
-    "react-hook-form": "^7.49.1",
-    "react-router-dom": "^6.20.1",
+    "react-error-boundary": "^4.0.12",
+    "react-hook-form": "^7.49.2",
+    "react-hot-toast": "^2.4.1",
+    "react-resizable": "^3.0.5",
+    "react-router-dom": "^6.21.0",
     "react-select": "^5.8.0",
     "recharts": "^2.10.3",
     "simplebar-react": "^3.2.4",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
     "taze": "^0.13.0",
     "typed.js": "^2.1.0",
-    "vite": "^5.0.8",
-    "yup": "^1.3.2",
+    "vite": "^5.0.10",
+    "yup": "^1.3.3",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.5",
+    "@storybook/addon-interactions": "^7.6.5",
+    "@storybook/addon-links": "^7.6.5",
     "@storybook/addon-onboarding": "^1.0.10",
     "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-vite": "^7.6.4",
+    "@storybook/blocks": "^7.6.5",
+    "@storybook/react": "^7.6.5",
+    "@storybook/react-vite": "^7.6.5",
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/eslint-plugin-query": "^5.12.1",
     "@types/howler": "^2.2.11",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.16",
     "cypress": "^13.6.1",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
@@ -105,7 +107,7 @@
     "postcss": "^8.4.32",
     "prettier": "3.0.3",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^7.6.4",
+    "storybook": "^7.6.5",
     "storybook-tailwind-dark-mode": "^1.0.22",
     "tailwindcss": "^3.3.6",
     "typescript": "^5.3.3",

client/src/components/common/fields/input.tsx

@@ -27,7 +27,7 @@ import { Label } from "./label";
 
 export function ErrorMessage({ formError }: { formError?: string }) {
   return (
-    <div className="mt-2 inline-block rounded bg-red-50 px-2 py-1 text-xs leading-tight text-red-500">
+    <div className="mt-2 inline-block rounded bg-red-50 text-red-500 dark:bg-red-300 dark:text-red-800  px-2 py-1 text-xs leading-tight ">
       {formError ? formError : "An Error has occurred. Please try again."}
     </div>
   );

client/src/components/common/fields/select-components.tsx

@@ -202,13 +202,13 @@ export function NoOptionsMessage({
     hasPopoutWindow?: boolean;
   };
 }) {
-  const { formError, popoutLink, hasPopoutWindow } = props.selectProps || {};
+  const { popoutLink, hasPopoutWindow } = props.selectProps || {};
 
   return (
     <components.NoOptionsMessage {...props}>
       <div className="flex flex-col items-center justify-center my-1">
         <p className="text-accent-foreground text-sm my-1">
-          {formError || children || "No options available..."}
+          {children || "No options available..."}
         </p>
         {popoutLink && hasPopoutWindow && (
           <AddNewButton

client/src/components/common/footer.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+
+export function FooterContainer({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("bg-accent", className)}>
+      <div className="flex items-center justify-between gap-2 font-display">
+        <div className="relative">{children}</div>
+      </div>
+    </div>
+  );
+}

client/src/components/common/table/data-table-components.tsx

@@ -14,13 +14,14 @@
  * Change License as the GPL Version 2.0 or a compatible license, specifying an Additional Use
  * Grant, and not modifying the license in any other way.
  */
-import React from "react";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { upperFirst } from "@/lib/utils";
 import { EquipmentStatus } from "@/types/equipment";
-import { IconProps } from "@radix-ui/react-icons/dist/types";
 import { PlusIcon } from "@radix-ui/react-icons";
-import { upperFirst } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { IconProps } from "@radix-ui/react-icons/dist/types";
+import { AlertTriangle } from "lucide-react";
+import React from "react";
 
 /**
  * Component that displays a message when no data is found.
@@ -111,3 +112,17 @@ export function EquipmentStatusBadge({ status }: { status: EquipmentStatus }) {
     </Badge>
   );
 }
+
+export function ErrorLoadingData() {
+  return (
+    <div className="text-center">
+      <AlertTriangle className="mx-auto h-10 w-10 text-accent-foreground" />
+      <p className="mt-2 font-semibold text-accent-foreground">
+        Well, this is embarrassing...
+      </p>
+      <p className="mt-2 text-muted-foreground">
+        We were unable to load the data for this table. Please try again later.
+      </p>
+    </div>
+  );
+}

client/src/components/common/table/data-table-export-modal.tsx

@@ -15,27 +15,14 @@
  * Grant, and not modifying the license in any other way.
  */
 
-import React from "react";
-import { useQuery } from "@tanstack/react-query";
-import { TExportModelFormValues } from "@/types/forms";
-import { getColumns } from "@/services/ReportRequestService";
-import axios from "@/lib/axiosConfig";
-import { ExportModelSchema } from "@/lib/validations/GenericSchema";
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { toast } from "@/components/ui/use-toast";
-import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
-import { DialogTitle } from "@radix-ui/react-dialog";
-import { SelectInput } from "@/components/common/fields/select-input";
+import { Label } from "@/components/common/fields/label";
 import {
   RadioGroup,
   RadioGroupItem,
 } from "@/components/common/fields/radio-group";
-import { Label } from "@/components/common/fields/label";
+import { SelectInput } from "@/components/common/fields/select-input";
 import { Button } from "@/components/ui/button";
-import { StoreType } from "@/lib/useGlobalStore";
-import { TableStoreProps, useTableStore as store } from "@/stores/TableStore";
-import { Loader2 } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -44,7 +31,21 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import axios from "@/lib/axiosConfig";
+import { TOAST_STYLE } from "@/lib/constants";
+import { StoreType } from "@/lib/useGlobalStore";
+import { ExportModelSchema } from "@/lib/validations/GenericSchema";
+import { getColumns } from "@/services/ReportRequestService";
+import { TableStoreProps, useTableStore as store } from "@/stores/TableStore";
+import { TExportModelFormValues } from "@/types/forms";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { DialogTitle } from "@radix-ui/react-dialog";
 import { DotsVerticalIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import React from "react";
+import { Controller, useForm } from "react-hook-form";
+import toast from "react-hot-toast";
 
 interface Props {
   store: StoreType<TableStoreProps>;
@@ -72,7 +73,7 @@ function TableExportModalBody({
     staleTime: Infinity,
   });
 
-  const { control, handleSubmit, reset, watch } =
+  const { control, handleSubmit, reset, watch, setError } =
     useForm<TExportModelFormValues>({
       resolver: yupResolver(ExportModelSchema),
       defaultValues: {
@@ -83,7 +84,7 @@ function TableExportModalBody({
 
   const watchedColumns = watch("columns");
 
-  const columns = columnsData?.map((column: any) => ({
+  const selectColumnData = columnsData?.map((column: any) => ({
     label: column.label,
     value: column.value,
   }));
@@ -100,17 +101,44 @@ function TableExportModalBody({
 
       if (response.status === 202) {
         setShowExportModal(false);
-        toast({
-          title: "Success",
-          description: response.data.results,
-        });
+        toast.success(
+          () => (
+            <div className="flex flex-col space-y-1">
+              <span className="font-semibold">Success</span>
+              <span className="text-xs">{response.data.results}</span>
+            </div>
+          ),
+          {
+            style: TOAST_STYLE,
+            ariaProps: {
+              role: "status",
+              "aria-live": "polite",
+            },
+          },
+        );
         reset();
       }
     } catch (error: any) {
-      toast({
-        title: "Error",
-        description: error.response.data.error,
+      setError("columns", {
+        type: "manual",
+        message: error.response.data.error,
       });
+
+      toast.error(
+        () => (
+          <div className="flex flex-col space-y-1">
+            <span className="font-semibold">{error.response.data.title}</span>
+            <span className="text-xs">{error.response.data.error}</span>
+          </div>
+        ),
+        {
+          style: TOAST_STYLE,
+          ariaProps: {
+            role: "status",
+            "aria-live": "polite",
+          },
+        },
+      );
     } finally {
       setLoading(false);
     }
@@ -119,7 +147,7 @@ function TableExportModalBody({
   return isColumnsLoading ? (
     <>
       <div className="flex flex-col items-center justify-center space-y-2 h-40 w-full">
-        <Loader2 className="animate-spin h-20 w-20 text-muted" />
+        <Loader2 className="animate-spin h-20 w-20 text-foreground" />
         <p className="text-center">
           Fetching columns for {name.toLowerCase()}s...
         </p>
@@ -134,7 +162,7 @@ function TableExportModalBody({
           control={control}
           rules={{ required: true }}
           name="columns"
-          options={columns}
+          options={selectColumnData}
           label="Columns"
           placeholder="Select columns"
           description="A group of columns/fields that will be exported into your specified format."