Merge pull request #93 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

src/components/CippCards/CippButtonCard.jsx

@@ -23,6 +23,7 @@ export default function CippButtonCard({
   variant,
   component = "card",
   accordionExpanded = false,
+  onAccordionChange,
 }) {
   const [cardExpanded, setCardExpanded] = useState(accordionExpanded);
   useEffect(() => {
@@ -31,6 +32,12 @@ export default function CippButtonCard({
     }
   }, [accordionExpanded]);
 
+  useEffect(() => {
+    if (onAccordionChange) {
+      onAccordionChange(cardExpanded);
+    }
+  }, [cardExpanded]);
+
   return (
     <Card variant={variant} sx={cardSx}>
       {component === "card" && (

src/components/CippComponents/CippAutocomplete.jsx

@@ -33,6 +33,7 @@ const MemoTextField = React.memo(function MemoTextField({
         inputLabel: {
           shrink: true,
           sx: { transition: "none" },
+          required: otherProps.required,
         },
         input: {
           ...InputProps,
@@ -176,9 +177,7 @@ export const CippAutoComplete = (props) => {
   const memoizedOptions = useMemo(() => {
     let finalOptions = api ? usedOptions : options;
     if (removeOptions && removeOptions.length) {
-      finalOptions = finalOptions.filter(
-        (o) => !removeOptions.includes(o.value)
-      );
+      finalOptions = finalOptions.filter((o) => !removeOptions.includes(o.value));
     }
     return finalOptions;
   }, [api, usedOptions, options, removeOptions]);
@@ -276,7 +275,7 @@ export const CippAutoComplete = (props) => {
       sx={sx}
       renderInput={(params) => (
         <Stack direction="row" spacing={1}>
-          <MemoTextField params={params} label={label} placeholder={placeholder} {...other} />
+          <MemoTextField params={params} label={label} placeholder={placeholder} required= {...other} />
           {api?.url && api?.showRefresh && (
             <IconButton
               size="small"

src/components/CippComponents/CippFormComponent.jsx

@@ -246,7 +246,7 @@ export const CippFormComponent = (props) => {
                   defaultValue={field.value}
                   label={label}
                   multiple={false}
-                  onChange={(value) => field.onChange(value.value)}
+                  onChange={(value) => field.onChange(value?.value)}
                 />
               )}
             />

src/components/CippTable/CIPPTableToptoolbar.js

@@ -538,13 +538,43 @@ export const CIPPTableToptoolbar = ({
         size="md"
         title="Edit Filters"
         visible={filterCanvasVisible}
-        onClose={() => setFilterCanvasVisible(false)}
+        onClose={() => setFilterCanvasVisible(!filterCanvasVisible)}
       >
         <CippGraphExplorerFilter
           endpointFilter={api?.data?.Endpoint}
           onSubmitFilter={(filter) => {
             setTableFilter(filter, "graph", "Custom Filter");
-            setFilterCanvasVisible(false);
+            if (filter?.$select) {
+              let selectedColumns = [];
+              if (Array.isArray(filter?.$select)) {
+                selectedColumns = filter?.$select;
+              } else {
+                selectedColumns = filter?.$select.split(",");
+              }
+              const setNestedVisibility = (col) => {
+                if (typeof col === "object" && col !== null) {
+                  Object.keys(col).forEach((key) => {
+                    if (usedColumns.includes(key.trim())) {
+                      setColumnVisibility((prev) => ({ ...prev, [key.trim()]: true }));
+                      setNestedVisibility(col[key]);
+                    }
+                  });
+                } else {
+                  if (usedColumns.includes(col.trim())) {
+                    setColumnVisibility((prev) => ({ ...prev, [col.trim()]: true }));
+                  }
+                }
+              };
+              if (selectedColumns.length > 0) {
+                setConfiguredSimpleColumns(selectedColumns);
+                selectedColumns.forEach((col) => {
+                  setNestedVisibility(col);
+                });
+              }
+            } else {
+              setConfiguredSimpleColumns(originalSimpleColumns);
+            }
+            setFilterCanvasVisible(!filterCanvasVisible);
           }}
           component="card"
         />

src/components/CippTable/CippGraphExplorerFilter.js

@@ -68,6 +68,12 @@ const CippGraphExplorerFilter = ({
       IsShared: false,
     },
   });
+  const presetControl = useForm({
+    mode: "onChange",
+    defaultValues: {
+      reportTemplate: null,
+    },
+  });
 
   const defaultGraphExplorerTitle = "Graph Explorer";
 
@@ -185,7 +191,7 @@ const CippGraphExplorerFilter = ({
     });
   };
 
-  const selectedPresets = useWatch({ control, name: "reportTemplate" });
+  const selectedPresets = useWatch({ control: presetControl.control, name: "reportTemplate" });
   useEffect(() => {
     if (selectedPresets?.addedFields?.params) {
       setPresetOwner(selectedPresets?.addedFields?.IsMyPreset ?? false);
@@ -456,9 +462,10 @@ const CippGraphExplorerFilter = ({
       if (presetName) onPresetChange(presetName);
     }
     onSubmitFilter(values);
-    setCardExpanded(false);
+    setCardExpanded(!cardExpanded);
   };
 
+  console.log(cardExpanded);
   const deletePreset = (id) => {
     savePresetApi.mutate({
       url: "/api/ExecGraphExplorerPreset",
@@ -472,6 +479,7 @@ const CippGraphExplorerFilter = ({
         title="Graph Filter"
         component={component}
         accordionExpanded={cardExpanded}
+        onAccordionChange={(expanded) => setCardExpanded(expanded)}
         cardSx={{
           width: "100%",
           height: "100%",
@@ -553,7 +561,7 @@ const CippGraphExplorerFilter = ({
               name="reportTemplate"
               label="Select a preset"
               multiple={false}
-              formControl={formControl}
+              formControl={presetControl}
               options={presetOptions}
               isFetching={presetList.isFetching}
               groupBy={(option) => option.type}

src/pages/tenant/standards/list-standards/index.js

@@ -2,8 +2,7 @@ import { Alert, Button } from "@mui/material";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
 import { Layout as DashboardLayout } from "/src/layouts/index.js"; // had to add an extra path here because I added an extra folder structure. We should switch to absolute pathing so we dont have to deal with relative.
 import Link from "next/link";
-import { EyeIcon } from "@heroicons/react/24/outline";
-import { CopyAll, Delete, PlayArrow, AddBox, Visibility, Edit, GitHub } from "@mui/icons-material";
+import { CopyAll, Delete, PlayArrow, AddBox, Edit, GitHub } from "@mui/icons-material";
 import { ApiGetCall, ApiPostCall } from "../../../../api/ApiCall";
 import { Grid } from "@mui/system";
 import { CippApiResults } from "../../../../components/CippComponents/CippApiResults";
@@ -77,8 +76,20 @@ const Page = () => {
           },
           multiple: false,
           createable: false,
+          required: true,
+          validators: {
+            required: { value: true, message: "This field is required" },
+          },
+        },
+        {
+          label: "Commit Message",
+          placeholder: "Enter a commit message for adding this file to GitHub",
+          name: "Message",
+          type: "textField",
+          multiline: true,
+          required: true,
+          rows: 4,
         },
-
       ],
       confirmText: "Are you sure you want to save this template to the selected repository?",
     },