Chore: Some House Keeping

src/api/ApiCall.jsx

@@ -1,5 +1,4 @@
 import {
-  keepPreviousData,
   useInfiniteQuery,
   useMutation,
   useQuery,

src/components/CSVReader.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { useCSVReader, lightenDarkenColor, formatFileSize } from "react-papaparse";
 
 const GREY = "#CCC";

src/components/CippCards/CippBannerListCard.jsx

@@ -204,7 +204,6 @@ CippBannerListCard.propTypes = {
       actionButton: PropTypes.element,
       propertyItems: PropTypes.array,
       table: PropTypes.object,
-      actionButton: PropTypes.element,
       isFetching: PropTypes.bool,
       children: PropTypes.node,
       cardLabelBoxActions: PropTypes.element,

src/components/CippCards/CippDomainCards.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Button,
   Collapse,
@@ -477,7 +477,7 @@ export const CippDomainCards = ({ domain: propDomain = "", fullwidth = false })
     waiting: !!domain && enableHttps,
   });
 
-  // Adjust grid item size based on fullwidth prop
+  // Adjust Grid size based on fullwidth prop
   const gridItemSize = fullwidth ? 12 : 4;
 
   return (

src/components/CippCards/CippInfoBar.jsx

@@ -95,7 +95,7 @@ export const CippInfoBar = ({ data, isFetching }) => {
                     }}
                   >
                     <Grid container spacing={1}>
-                      <Grid item size={{ xs: 12 }}>
+                      <Grid size={{ xs: 12 }}>
                         {item?.offcanvas?.propertyItems?.length > 0 && (
                           <CippPropertyListCard
                             isFetching={isFetching}

src/components/CippCards/CippPageCard.jsx

@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
 import { Box, Container, Stack, Button, SvgIcon, Typography, Card } from "@mui/material";
 import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
-import Head from "next/head";
 import { CippHead } from "../CippComponents/CippHead";
 const CippPageCard = (props) => {
   const {

src/components/CippCards/CippRemediationCard.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button, Typography, List, ListItem, SvgIcon } from "@mui/material";
 import CippButtonCard from "./CippButtonCard"; // Adjust the import path as needed
 import { CippApiDialog } from "../CippComponents/CippApiDialog";

src/components/CippCards/CippUniversalSearch.jsx

@@ -97,7 +97,7 @@ const Results = ({ items = [], searchValue }) => {
       </Typography>
       <Grid container spacing={2} mt={2}>
         {displayedResults.map((item, key) => (
-          <Grid item size={{ md: 4, sm: 6, xs: 12 }} key={key}>
+          <Grid size={{ md: 4, sm: 6, xs: 12 }} key={key}>
             <ResultsRow match={item} searchValue={searchValue} />
           </Grid>
         ))}

src/components/CippComponents/AppApprovalTemplateForm.jsx

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Alert, Skeleton, Stack, Typography, Button, Box } from "@mui/material";
-import { ApiGetCall } from "/src/api/ApiCall";
 import { CippFormComponent } from "./CippFormComponent";
 import { CippApiResults } from "./CippApiResults";
 import { Grid } from "@mui/system";

src/components/CippComponents/BPASyncDialog.jsx

@@ -1,14 +1,12 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogTitle,
   Button,
   DialogActions,
-  Alert,
-  CircularProgress,
 } from "@mui/material";
-import { CheckCircle, Error, Sync } from "@mui/icons-material";
+import { Sync } from "@mui/icons-material";
 import { useForm, FormProvider } from "react-hook-form";
 import { CippFormTenantSelector } from "./CippFormTenantSelector";
 import { ApiPostCall } from "/src/api/ApiCall";

src/components/CippComponents/CIPPDeviceCodeButton.js

@@ -2,12 +2,11 @@ import { useState, useEffect } from "react";
 import {
   Alert,
   Button,
-  Stack,
   Typography,
   CircularProgress,
   Box,
 } from "@mui/material";
-import { ApiGetCall, ApiPostCall } from "../../api/ApiCall";
+import { ApiGetCall } from "../../api/ApiCall";
 
 /**
  * CIPPDeviceCodeButton - A button component for Microsoft 365 OAuth authentication using device code flow

src/components/CippComponents/CippApiResults.jsx

@@ -20,7 +20,6 @@ import React from "react";
 import { CippTableDialog } from "./CippTableDialog";
 import { EyeIcon } from "@heroicons/react/24/outline";
 import { useDialog } from "../../hooks/use-dialog";
-import { useRouter } from "next/router";
 
 const extractAllResults = (data) => {
   const results = [];

src/components/CippComponents/CippAppPermissionBuilder.jsx

@@ -578,7 +578,7 @@ const CippAppPermissionBuilder = ({
                   <>
                     <Stack spacing={2}>
                       <Grid container sx={{ display: "flex", alignItems: "center" }} spacing={2}>
-                        <Grid item size={{ xl: 8, xs: 12 }}>
+                        <Grid size={{ xl: 8, xs: 12 }}>
                           <CippFormComponent
                             type="autoComplete"
                             label="Application Permissions"
@@ -594,7 +594,7 @@ const CippAppPermissionBuilder = ({
                             multiple={false}
                           />
                         </Grid>
-                        <Grid item>
+                        <Grid>
                           <Tooltip title="Add Permission">
                             <div
                               onClick={() =>
@@ -640,7 +640,7 @@ const CippAppPermissionBuilder = ({
                     </Alert>
                   )}
                   <Grid container sx={{ display: "flex", alignItems: "center" }} spacing={2}>
-                    <Grid item size={{ xl: 8, xs: 12 }}>
+                    <Grid size={{ xl: 8, xs: 12 }}>
                       <CippFormComponent
                         type="autoComplete"
                         label="Delegated Permissions"
@@ -656,7 +656,7 @@ const CippAppPermissionBuilder = ({
                         multiple={false}
                       />
                     </Grid>
-                    <Grid item sx={{ ms: 2 }}>
+                    <Grid sx={{ ms: 2 }}>
                       <Tooltip title="Add Permission">
                         <div
                           onClick={() =>
@@ -748,7 +748,7 @@ const CippAppPermissionBuilder = ({
                     </IconButton>
                   </Stack>
                 </Grid>
-                <Grid item>
+                <Grid>
                   <Stack direction="row" spacing={1}>
                     <Tooltip
                       title={
@@ -840,7 +840,7 @@ const CippAppPermissionBuilder = ({
                 }}
               >
                 <Grid container>
-                  <Grid item size={12}>
+                  <Grid size={12}>
                     <Typography variant="h4" sx={{ mb: 2 }}>
                       Import Permission Manifest
                     </Typography>
@@ -852,7 +852,7 @@ const CippAppPermissionBuilder = ({
                   </Grid>
                 </Grid>
                 <Grid container>
-                  <Grid item size={12}>
+                  <Grid size={12}>
                     <FileDropzone
                       onDrop={onManifestImport}
                       accept={{
@@ -872,12 +872,12 @@ const CippAppPermissionBuilder = ({
                 {importedManifest && (
                   <>
                     <Grid container sx={{ mt: 2 }} spacing={2}>
-                      <Grid item size={12}>
+                      <Grid size={12}>
                         <Alert color="success" icon={<TaskAlt />}>
                           Manifest is valid. Click Import to apply the permissions.
                         </Alert>
                       </Grid>
-                      <Grid item size={12}>
+                      <Grid size={12}>
                         <Button
                           variant="contained"
                           onClick={() => importManifest()}
@@ -892,7 +892,7 @@ const CippAppPermissionBuilder = ({
                       </Grid>
                     </Grid>
                     <Grid container className="mt-3">
-                      <Grid item size={12}>
+                      <Grid size={12}>
                         <h4>Preview</h4>
                         <CippCodeBlock
                           code={JSON.stringify(importedManifest, null, 2)}
@@ -1096,7 +1096,7 @@ const CippAppPermissionBuilder = ({
           </Grid>
 
           <Grid container sx={{ display: "flex", alignItems: "center" }}>
-            <Grid item size={{ xl: 1, xs: 12 }}>
+            <Grid size={{ xl: 1, xs: 12 }}>
               <Button
                 variant="contained"
                 startIcon={

src/components/CippComponents/CippCentralSearch.jsx

@@ -111,7 +111,7 @@ export const CippCentralSearch = ({ handleClose, open }) => {
             filteredItems.length > 0 ? (
               <Grid container spacing={2} mt={2}>
                 {filteredItems.map((item, index) => (
-                  <Grid item size={{ md: 12, sm: 12, xs: 12 }} key={index}>
+                  <Grid size={{ md: 12, sm: 12, xs: 12 }} key={index}>
                     <Card variant="outlined" sx={{ height: "100%" }}>
                       <CardActionArea
                         onClick={() => handleCardClick(item.path)}

src/components/CippComponents/CippCodeBlock.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { CippCopyToClipBoard } from "./CippCopyToClipboard";

src/components/CippComponents/CippComponentDialog.jsx

@@ -7,7 +7,7 @@ export const CippComponentDialog = (props) => {
     <Dialog fullWidth maxWidth="sm" onClose={createDialog.handleClose} open={createDialog.open}>
       <form onSubmit={formHook.handleSubmit(onSubmit)}>
         <DialogTitle>{title}</DialogTitle>
-        <DialogContent>{...children}</DialogContent>
+        <DialogContent>{children}</DialogContent>
         <DialogActions>
           <Button color="inherit" onClick={createDialog.handleClose}>
             Close

src/components/CippComponents/CippDevOptions.jsx

@@ -1,6 +1,6 @@
 import { useSettings } from "../../hooks/use-settings";
 import { Button, Card, CardHeader, Divider, CardContent, SvgIcon } from "@mui/material";
-import { CodeBracketIcon, CogIcon } from "@heroicons/react/24/outline";
+import { CodeBracketIcon } from "@heroicons/react/24/outline";
 
 export const CippDevOptions = () => {
   const settings = useSettings();

src/components/CippComponents/CippDropzone.jsx

@@ -1,4 +1,3 @@
-import React, { useCallback, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 //import { CippContentCard } from 'src/components/layout'
 import { useDropzone } from "react-dropzone";

src/components/CippComponents/CippFormContactSelector.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { CippFormComponent } from "./CippFormComponent";
 import { useWatch } from "react-hook-form";
 import { useSettings } from "../../hooks/use-settings";

src/components/CippComponents/CippFormDomainSelector.jsx

@@ -1,41 +1,40 @@
-import React from "react";
-import { CippFormComponent } from "./CippFormComponent";
-import { useWatch } from "react-hook-form";
-import { useSettings } from "../../hooks/use-settings";
-
-export const CippFormDomainSelector = ({
-  formControl,
-  name,
-  label,
-  allTenants = false,
-  type = "multiple",
-  ...other
-}) => {
-  const currentTenant = useWatch({ control: formControl.control, name: "tenantFilter" });
-  const selectedTenant = useSettings().currentTenant;
-  return (
-    <CippFormComponent
-      name={name}
-      label={label}
-      type="autoComplete"
-      formControl={formControl}
-      multiple={false}
-      api={{
-        autoSelectFirstItem: true,
-        tenantFilter: currentTenant ? currentTenant.value : selectedTenant,
-        queryKey: `listDomains-${currentTenant?.value ? currentTenant.value : selectedTenant}`,
-        url: "/api/ListGraphRequest",
-        dataKey: "Results",
-        labelField: (option) => `${option.id}`,
-        valueField: "id",
-        data: {
-          Endpoint: "domains",
-          manualPagination: true,
-          $count: true,
-          $top: 99,
-        },
-      }}
-      {...other}
-    />
-  );
-};
+import { CippFormComponent } from "./CippFormComponent";
+import { useWatch } from "react-hook-form";
+import { useSettings } from "../../hooks/use-settings";
+
+export const CippFormDomainSelector = ({
+  formControl,
+  name,
+  label,
+  allTenants = false,
+  type = "multiple",
+  ...other
+}) => {
+  const currentTenant = useWatch({ control: formControl.control, name: "tenantFilter" });
+  const selectedTenant = useSettings().currentTenant;
+  return (
+    <CippFormComponent
+      name={name}
+      label={label}
+      type="autoComplete"
+      formControl={formControl}
+      multiple={false}
+      api={{
+        autoSelectFirstItem: true,
+        tenantFilter: currentTenant ? currentTenant.value : selectedTenant,
+        queryKey: `listDomains-${currentTenant?.value ? currentTenant.value : selectedTenant}`,
+        url: "/api/ListGraphRequest",
+        dataKey: "Results",
+        labelField: (option) => `${option.id}`,
+        valueField: "id",
+        data: {
+          Endpoint: "domains",
+          manualPagination: true,
+          $count: true,
+          $top: 99,
+        },
+      }}
+      {...other}
+    />
+  );
+};

src/components/CippComponents/CippFormInputArray.jsx

@@ -1,4 +1,4 @@
-import { Button, TextField, IconButton, Typography, SvgIcon } from "@mui/material";
+import { TextField, IconButton, Typography, SvgIcon } from "@mui/material";
 import { Controller, useFieldArray } from "react-hook-form";
 import { Add, Remove } from "@mui/icons-material";
 

src/components/CippComponents/CippFormLicenseSelector.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { CippFormComponent } from "./CippFormComponent";
 import { getCippLicenseTranslation } from "../../utils/get-cipp-license-translation";
 import { useSettings } from "../../hooks/use-settings";

src/components/CippComponents/CippFormUserSelector.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { CippFormComponent } from "./CippFormComponent";
 import { useWatch } from "react-hook-form";
 import { useSettings } from "../../hooks/use-settings";

src/components/CippComponents/CippGeoLocation.jsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from "react";
-import { Card, CardContent, CardHeader, Skeleton } from "@mui/material";
+import { useEffect, useState } from "react";
+import { Skeleton } from "@mui/material";
 import { Grid } from "@mui/system";
 import dynamic from "next/dynamic";
 import { ApiPostCall } from "/src/api/ApiCall";
@@ -61,7 +61,7 @@ export default function CippGeoLocation({ ipAddress, cardProps }) {
 
   return (
     <Grid container spacing={2}>
-      <Grid item size={{ xs: 12, sm: 8 }}>
+      <Grid size={{ xs: 12, sm: 8 }}>
         {geoLookup.isPending ? (
           <Skeleton variant="rectangular" height={400} />
         ) : (
@@ -78,7 +78,7 @@ export default function CippGeoLocation({ ipAddress, cardProps }) {
           </>
         )}
       </Grid>
-      <Grid item size={{ xs: 12, sm: 4 }}>
+      <Grid size={{ xs: 12, sm: 4 }}>
         <CippPropertyList
           propertyItems={properties}
           showDivider={false}