From 2977f9ec2190c4b9df9adbb534a95a673d651ddc Mon Sep 17 00:00:00 2001 From: John Duprey Date: Wed, 12 Feb 2025 00:06:57 -0500 Subject: [PATCH 1/2] graph explorer and table tweaks --- src/components/CippCards/CippButtonCard.jsx | 7 ++++ .../CippTable/CIPPTableToptoolbar.js | 34 +++++++++++++++++-- .../CippTable/CippGraphExplorerFilter.js | 14 ++++++-- 3 files changed, 50 insertions(+), 5 deletions(-) diff --git a/src/components/CippCards/CippButtonCard.jsx b/src/components/CippCards/CippButtonCard.jsx index d02a21b7a697..73f1009e1ec7 100644 --- a/src/components/CippCards/CippButtonCard.jsx +++ b/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 ( {component === "card" && ( diff --git a/src/components/CippTable/CIPPTableToptoolbar.js b/src/components/CippTable/CIPPTableToptoolbar.js index 75df1edacdf1..fd15416b9082 100644 --- a/src/components/CippTable/CIPPTableToptoolbar.js +++ b/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)} > { 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" /> diff --git a/src/components/CippTable/CippGraphExplorerFilter.js b/src/components/CippTable/CippGraphExplorerFilter.js index 11a1d487efc9..e399b4ce77ca 100644 --- a/src/components/CippTable/CippGraphExplorerFilter.js +++ b/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} From 625974eda4ca57c18cf0945b09cba4168dc051e5 Mon Sep 17 00:00:00 2001 From: John Duprey Date: Wed, 12 Feb 2025 00:51:59 -0500 Subject: [PATCH 2/2] bring back required label on memoized text field --- .../CippComponents/CippAutocomplete.jsx | 7 +++---- .../CippComponents/CippFormComponent.jsx | 2 +- .../tenant/standards/list-standards/index.js | 17 ++++++++++++++--- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/CippComponents/CippAutocomplete.jsx b/src/components/CippComponents/CippAutocomplete.jsx index 3569bdaf3376..8fee074a5cdb 100644 --- a/src/components/CippComponents/CippAutocomplete.jsx +++ b/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) => ( - + {api?.url && api?.showRefresh && ( { defaultValue={field.value} label={label} multiple={false} - onChange={(value) => field.onChange(value.value)} + onChange={(value) => field.onChange(value?.value)} /> )} /> diff --git a/src/pages/tenant/standards/list-standards/index.js b/src/pages/tenant/standards/list-standards/index.js index 40a215deac87..f1725d1402a4 100644 --- a/src/pages/tenant/standards/list-standards/index.js +++ b/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?", },