Merge pull request #4374 from kris6673/app-consent

Fix: Fix broken filters and enhance UI components

Author: KelvinTegelaar

src/pages/tenant/administration/app-consent-requests/index.js

@@ -1,56 +1,155 @@
 import { useState } from "react";
 import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
-import { Button, Accordion, AccordionSummary, AccordionDetails, Typography } from "@mui/material";
+import {
+  Button,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  SvgIcon,
+  Stack,
+} from "@mui/material";
 import { Grid } from "@mui/system";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { Visibility, CheckCircle, ExpandMore, Security } from "@mui/icons-material";
+import { FunnelIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useForm } from "react-hook-form";
 import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
 import { useSettings } from "/src/hooks/use-settings";
 
-const simpleColumns = [
-  "Tenant",
-  "CippStatus",
-  "appDisplayName",
-  "requestUser",
-  "requestReason",
-  "requestStatus",
-  "requestDate",
-];
-
 const apiUrl = "/api/ListAppConsentRequests";
 const pageTitle = "App Consent Requests";
 
 const Page = () => {
   const tenantFilter = useSettings().currentTenant;
   const formControl = useForm({
     defaultValues: {
-      requestStatus: "All",
+      requestStatus: "InProgress",
     },
   });
 
-  const [expanded, setExpanded] = useState(false); // Accordion state
-  const [filterParams, setFilterParams] = useState({}); // Dynamic filter params
+  const [expanded, setExpanded] = useState(true); // Accordion state - start expanded since we have a default filter
+  const [filterEnabled, setFilterEnabled] = useState(true); // State for filter toggle - start with filter enabled
+  const [requestStatus, setRequestStatus] = useState("InProgress"); // State for request status filter - default to InProgress
+  const [requestStatusLabel, setRequestStatusLabel] = useState("Pending"); // State for displaying filter label - default label
 
   const onSubmit = (data) => {
-    // Handle filter application logic
-    const { requestStatus } = data;
-    const filters = {};
+    // Handle the case where requestStatus could be an object {label, value} or a string
+    const statusValue =
+      typeof data.requestStatus === "object" && data.requestStatus?.value
+        ? data.requestStatus.value
+        : data.requestStatus;
+    const statusLabel =
+      typeof data.requestStatus === "object" && data.requestStatus?.label
+        ? data.requestStatus.label
+        : data.requestStatus;
+
+    // Check if any filter is applied
+    const hasFilter = statusValue !== "All";
+    setFilterEnabled(hasFilter);
 
-    if (requestStatus !== "All") {
-      filters.requestStatus = requestStatus;
-    }
+    // Set request status filter if not "All"
+    setRequestStatus(hasFilter ? statusValue : null);
+    setRequestStatusLabel(hasFilter ? statusLabel : null);
 
-    setFilterParams(filters);
+    // Close the accordion after applying filters
+    setExpanded(false);
+  };
+
+  const clearFilters = () => {
+    formControl.reset({
+      requestStatus: "All",
+    });
+    setFilterEnabled(false);
+    setRequestStatus(null);
+    setRequestStatusLabel(null);
+    setExpanded(false); // Close the accordion when clearing filters
+  };
+
+  const actions = [
+    {
+      label: "Review in Entra",
+      link: `https://entra.microsoft.com/${tenantFilter}/#view/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/~/AccessRequests`,
+      color: "info",
+      icon: <Visibility />,
+      target: "_blank",
+      external: true,
+    },
+    {
+      label: "Approve in Entra",
+      link: "[consentUrl]",
+      color: "info",
+      icon: <CheckCircle />,
+      target: "_blank",
+      external: true,
+    },
+  ];
+
+  const simpleColumns = [
+    "requestUser", // Requester
+    "appDisplayName", // Application Name
+    "appId", // Application ID
+    "requestReason", // Reason
+    "requestStatus", // Status
+    "reviewedBy", // Reviewed by
+    "reviewedJustification", // Reviewed Reason
+    "consentUrl", // Consent URL
+  ];
+
+  const filters = [
+    {
+      filterName: "Pending requests",
+      value: [{ id: "requestStatus", value: "InProgress" }],
+      type: "column",
+    },
+    {
+      filterName: "Expired requests",
+      value: [{ id: "requestStatus", value: "Expired" }],
+      type: "column",
+    },
+    {
+      filterName: "Completed requests",
+      value: [{ id: "requestStatus", value: "Completed" }],
+      type: "column",
+    },
+  ];
+
+  const offCanvas = {
+    extendedInfoFields: [
+      "requestUser", // Requester
+      "appDisplayName", // Application Name
+      "appId", // Application ID
+      "requestReason", // Reason
+      "requestStatus", // Status
+      "reviewedBy", // Reviewed by
+      "reviewedJustification", // Reviewed Reason
+      "consentUrl", // Consent URL
+    ],
+    actions: actions,
   };
 
   return (
     <CippTablePage
-      // FIXME: This tableFilter does nothing. It does not change the table data at all, like the code makes it seem like it should. -Bobby
       tableFilter={
         <Accordion expanded={expanded} onChange={() => setExpanded(!expanded)}>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography>Filters</Typography>
+          <AccordionSummary expandIcon={<ExpandMore />}>
+            <Stack direction="row" spacing={1} alignItems="center">
+              <SvgIcon>
+                <FunnelIcon />
+              </SvgIcon>
+              <Typography variant="h6">
+                App Consent Request Filters
+                {filterEnabled ? (
+                  <span style={{ fontSize: "0.8em", marginLeft: "10px", fontWeight: "normal" }}>
+                    ({requestStatusLabel && <>Status: {requestStatusLabel}</>})
+                  </span>
+                ) : (
+                  <span style={{ fontSize: "0.8em", marginLeft: "10px", fontWeight: "normal" }}>
+                    (No filters applied)
+                  </span>
+                )}
+              </Typography>
+            </Stack>
           </AccordionSummary>
           <AccordionDetails>
             <form onSubmit={formControl.handleSubmit(onSubmit)}>
@@ -72,11 +171,34 @@ const Page = () => {
                   />
                 </Grid>
 
-                {/* Submit Button */}
+                {/* Action Buttons */}
                 <Grid size={{ xs: 12 }}>
-                  <Button type="submit" variant="contained" color="primary">
-                    Apply Filters
-                  </Button>
+                  <Stack direction="row" spacing={2}>
+                    <Button
+                      type="submit"
+                      variant="contained"
+                      color="primary"
+                      startIcon={
+                        <SvgIcon>
+                          <FunnelIcon />
+                        </SvgIcon>
+                      }
+                    >
+                      Apply Filters
+                    </Button>
+                    <Button
+                      variant="outlined"
+                      color="primary"
+                      startIcon={
+                        <SvgIcon>
+                          <XMarkIcon />
+                        </SvgIcon>
+                      }
+                      onClick={clearFilters}
+                    >
+                      Clear Filters
+                    </Button>
+                  </Stack>
                 </Grid>
               </Grid>
             </form>
@@ -86,45 +208,14 @@ const Page = () => {
       title={pageTitle}
       apiUrl={apiUrl}
       simpleColumns={simpleColumns}
-      filters={[
-        // Filter for showing only pending requests
-        {
-          filterName: "Pending requests",
-          value: [{ id: "requestStatus", value: "InProgress" }],
-          type: "column",
-        },
-      ]}
-      queryKey={`AppConsentRequests-${JSON.stringify(filterParams)}-${tenantFilter}`}
+      filters={filters}
+      queryKey={`AppConsentRequests-${requestStatus}-${filterEnabled}-${tenantFilter}`}
       apiData={{
-        ...filterParams,
-      }}
-      offCanvas={{
-        extendedInfoFields: [
-          "requestUser", // Requester
-          "appDisplayName", // Application Name
-          "appId", // Application ID
-          "requestReason", // Reason
-          "requestStatus", // Status
-          "reviewedBy", // Reviewed by
-          "reviewedJustification", // Reviewed Reason
-        ],
+        RequestStatus: requestStatus, // Pass request status filter from state
+        Filter: filterEnabled, // Pass filter toggle state
       }}
-      actions={[
-        {
-          label: "Review in Entra",
-          link: `https://entra.microsoft.com/${tenantFilter}/#view/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/~/AccessRequests`,
-          color: "info",
-          target: "_blank",
-          external: true,
-        },
-        {
-          label: "Approve in Entra",
-          link: "[consentUrl]",
-          color: "info",
-          target: "_blank",
-          external: true,
-        },
-      ]}
+      offCanvas={offCanvas}
+      actions={actions}
     />
   );
 };