feat: UI 1.0 CRUD (#1181)

Signed-off-by: bbehnke <bradleybehnke@yahoo.com>

server/apis/v1/handler.go

@@ -215,6 +215,9 @@ func (h *handler) GetPipeline(c *gin.Context) {
 		h.respondWithError(c, fmt.Sprintf("Failed to fetch pipeline %q namespace %q, %s", pipeline, ns, err.Error()))
 		return
 	}
+	// set pl kind and apiVersion
+	pl.Kind = dfv1.PipelineGroupVersionKind.Kind
+	pl.APIVersion = dfv1.SchemeGroupVersion.String()
 
 	// get pipeline source and sink vertex
 	var (

ui/package.json

@@ -66,15 +66,15 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
     "eslint": "^7.19.0",
     "eslint-config-prettier": "7.2.0",
     "eslint-plugin-prettier": "3.3.1",
     "jest-junit": "^12.0.0",
     "prettier": "2.5.1",
-    "react-scripts": "5.0.1",
-    "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2"
+    "react-scripts": "5.0.1"
   },
   "resolutions": {
     "nth-check": "^2.0.1"

ui/src/App.tsx

@@ -11,19 +11,19 @@ import Drawer from "@mui/material/Drawer";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import CircularProgress from "@mui/material/CircularProgress";
-import { Routes, Route } from "react-router-dom";
+import { Routes, Route, useLocation } from "react-router-dom";
 import { Breadcrumbs } from "./components/common/Breadcrumbs";
 import { Cluster } from "./components/pages/Cluster";
 import { Namespaces } from "./components/pages/Namespace";
 import { Pipeline } from "./components/pages/Pipeline";
 import { useSystemInfoFetch } from "./utils/fetchWrappers/systemInfoFetch";
 import { notifyError } from "./utils/error";
-import { toast } from "react-toastify";
 import {
   SlidingSidebar,
   SlidingSidebarProps,
 } from "./components/common/SlidingSidebar";
-import { AppContextProps } from "./types/declarations/app";
+import { ErrorDisplay } from "./components/common/ErrorDisplay";
+import { AppContextProps, AppError } from "./types/declarations/app";
 import logo from "./images/icon.png";
 import textLogo from "./images/text-icon.png";
 
@@ -33,8 +33,17 @@ import "react-toastify/dist/ReactToastify.css";
 export const AppContext = React.createContext<AppContextProps>({
   systemInfo: undefined,
   systemInfoError: undefined,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setSidebarProps: () => {},
+  errors: [],
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  addError: () => {},
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  clearErrors: () => {},
 });
 
+const MAX_ERRORS = 6;
+
 function App() {
   // TODO remove, used for testing ns only installation
   // const { systemInfo, error: systemInfoError } = {
@@ -49,7 +58,17 @@ function App() {
   const [sidebarProps, setSidebarProps] = useState<
     SlidingSidebarProps | undefined
   >();
+  const [sidebarCloseIndicator, setSidebarCloseIndicator] = useState<
+    string | undefined
+  >();
+  const [errors, setErrors] = useState<AppError[]>([]);
   const { systemInfo, error: systemInfoError, loading } = useSystemInfoFetch();
+  const location = useLocation();
+
+  useEffect(() => {
+    // Route changed
+    setErrors([]);
+  }, [location]);
 
   // Resize observer to keep page width in state. To be used by other dependent components.
   useEffect(() => {
@@ -78,25 +97,58 @@ function App() {
   }, [systemInfoError]);
 
   const handleSideBarClose = useCallback(() => {
-    setSidebarProps(undefined);
-    // remove all toast when sidebar is closed
-    toast.dismiss();
+    setSidebarCloseIndicator("id" + Math.random().toString(16).slice(2));
+  }, []);
+
+  const handleAddError = useCallback((error: string) => {
+    setErrors((prev) => {
+      prev.unshift({
+        message: error,
+        date: new Date(),
+      });
+      return prev.slice(0, MAX_ERRORS);
+    });
+  }, []);
+
+  const handleClearErrors = useCallback(() => {
+    setErrors([]);
   }, []);
 
   const routes = useMemo(() => {
     if (loading) {
       // System info loading
       return (
-        <Box sx={{ display: "flex", justifyContent: "center" }}>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
           <CircularProgress />
         </Box>
       );
     }
     if (systemInfoError) {
       // System info load error
       return (
-        <Box sx={{ display: "flex", justifyContent: "center" }}>
-          {`Error loading System Info: ${systemInfoError}`}
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <ErrorDisplay
+            title="Error loading system info"
+            message={systemInfoError}
+          />
         </Box>
       );
     }
@@ -146,6 +198,9 @@ function App() {
           systemInfoError,
           sidebarProps,
           setSidebarProps,
+          errors,
+          addError: handleAddError,
+          clearErrors: handleClearErrors,
         }}
       >
         <ScopedCssBaseline>
@@ -214,7 +269,7 @@ function App() {
             <SlidingSidebar
               {...sidebarProps}
               pageWidth={pageWidth}
-              onClose={handleSideBarClose}
+              parentCloseIndicator={sidebarCloseIndicator}
             />
           )}
         </Drawer>

ui/src/components/common/DebouncedSearchInput/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useState, useEffect } from "react";
 import TextField from "@mui/material/TextField";
-import { styled } from "@mui/material/styles";
 import InputAdornment from "@mui/material/InputAdornment";
 import SearchIcon from "@mui/icons-material/Search";
 
@@ -12,29 +11,6 @@ export interface DebouncedSearchInputProps {
   onChange: (value: string) => void;
 }
 
-const CssTextField = styled(TextField)({
-  background: "#FFFFFF !important",
-  border:
-    "1px solid var(--neutral-peppercorn-a-30, rgba(36, 28, 21, 0.30)) !important",
-  "& label.Mui-focused": {
-    border: 0,
-  },
-  "& .MuiInput-underline:after": {
-    border: 0,
-  },
-  "& .MuiOutlinedInput-root": {
-    "& fieldset": {
-      border: 0,
-    },
-    "&:hover fieldset": {
-      border: 0,
-    },
-    "&.Mui-focused fieldset": {
-      border: 0,
-    },
-  },
-});
-
 export function DebouncedSearchInput({
   disabled = false,
   placeHolder,
@@ -69,11 +45,13 @@ export function DebouncedSearchInput({
   }, [timerId]);
 
   return (
-    <CssTextField
+    <TextField
       sx={{
         background: "#FFFFFF",
         width: "50%",
         maxWidth: "39.375rem",
+        border: "1px solid #6B6C72",
+        borderRadius: "0.25rem",
       }}
       variant="outlined"
       placeholder={placeHolder}

ui/src/components/common/ErrorDisplay/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import ErrorIcon from "../../../images/warning-triangle.png";
+
+import "./style.css";
+
+export interface ErrorDisplayProps {
+  title: string;
+  message: string;
+}
+
+export function ErrorDisplay({ title, message }: ErrorDisplayProps) {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        maxWidth: "37.5rem",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+      >
+        <img src={ErrorIcon} alt="Error" className="error-display-icon" />
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            marginLeft: "0.5rem",
+          }}
+        >
+          <span className="error-display-title">{title}</span>
+          <span className="error-display-message">{message}</span>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

ui/src/components/common/ErrorDisplay/style.css

@@ -0,0 +1,9 @@
+.error-display-title {
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.error-display-icon {
+  width: 5.625rem;
+}

ui/src/components/common/ErrorIndicator/index.tsx

@@ -0,0 +1,43 @@
+import React, { useContext, useCallback } from "react";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import { AppContextProps } from "../../../types/declarations/app";
+import { AppContext } from "../../../App";
+import { SidebarType } from "../SlidingSidebar";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import ErrorIcon from "@mui/icons-material/Error";
+
+import "./style.css";
+
+export function ErrorIndicator() {
+  const { errors, setSidebarProps } = useContext<AppContextProps>(AppContext);
+
+  const onErrorClick = useCallback(() => {
+    setSidebarProps({
+      type: SidebarType.ERRORS,
+      slide: false,
+    });
+  }, []);
+
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        cursor: "pointer",
+        padding: "0.25rem 0.5rem",
+      }}
+      onClick={onErrorClick}
+    >
+      <Box sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+        {errors && errors.length ? (
+          <ErrorIcon sx={{ color: "#D52B1E" }} />
+        ) : (
+          <ErrorOutlineIcon sx={{ color: "#6B6C72" }} />
+        )}
+        {errors.length ? (
+          <span className="error-indicator-text">Error occurred</span>
+        ) : undefined}
+      </Box>
+    </Paper>
+  );
+}

ui/src/components/common/ErrorIndicator/style.css

@@ -0,0 +1,4 @@
+.error-indicator-text {
+  margin-left: 0.5rem;
+  min-width: 6.5625rem;
+}