sharepoint & onedrive fixes

src/components/CippFormPages/CippFormPage.jsx

@@ -15,6 +15,7 @@ import Head from "next/head";
 import { ApiPostCall } from "../../api/ApiCall";
 import { CippApiResults } from "../CippComponents/CippApiResults";
 import { useEffect } from "react";
+import { useFormState } from "react-hook-form";
 
 const CippFormPage = (props) => {
   const {
@@ -42,6 +43,8 @@ const CippFormPage = (props) => {
     relatedQueryKeys: queryKey,
   });
 
+  const { isValid } = useFormState({ control: formControl.control });
+
   useEffect(() => {
     delete router.query.tenantFilter;
 
@@ -131,7 +134,7 @@ const CippFormPage = (props) => {
                   <Stack spacing={2} direction="row">
                     {addedButtons && addedButtons}
                     <Button
-                      disabled={postCall.isPending || !formControl.formState.isValid}
+                      disabled={postCall.isPending || !isValid}
                       onClick={formControl.handleSubmit(handleSubmit)}
                       type="submit"
                       variant="contained"

src/components/CippWizard/CippWizardCSVImport.jsx

@@ -1,4 +1,13 @@
-import { Button, Grid, Link, Stack } from "@mui/material";
+import {
+  Button,
+  Grid,
+  Link,
+  Stack,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
 import { CippWizardStepButtons } from "./CippWizardStepButtons";
 import CippFormComponent from "../CippComponents/CippFormComponent";
 import { CippDataTable } from "../CippTable/CippDataTable";
@@ -17,22 +26,27 @@ export const CippWizardCSVImport = (props) => {
     name,
     manualFields = true,
     nameToCSVMapping,
+    fileName = "BulkUser",
   } = props;
   const tableData = useWatch({ control: formControl.control, name: name });
   const [newTableData, setTableData] = useState([]);
+  const [open, setOpen] = useState(false);
+
   const handleRemoveItem = (row) => {
     if (row === undefined) return false;
     const index = tableData?.findIndex((item) => item === row);
     const newTableData = [...tableData];
     newTableData.splice(index, 1);
     setTableData(newTableData);
   };
+
   const handleAddItem = () => {
     const newRowData = formControl.getValues("addrow");
     if (newRowData === undefined) return false;
 
     const newTableData = [...tableData, newRowData];
     setTableData(newTableData);
+    setOpen(false);
   };
 
   useEffect(() => {
@@ -48,11 +62,12 @@ export const CippWizardCSVImport = (props) => {
       noConfirm: true,
     },
   ];
+
   return (
     <Stack spacing={3}>
       <Link
         href={`data:text/csv;charset=utf-8,%EF%BB%BF${encodeURIComponent(fields.join(",") + "\n")}`}
-        download="BulkUser.csv"
+        download={`${fileName}.csv`}
       >
         Download Example CSV
       </Link>
@@ -63,23 +78,33 @@ export const CippWizardCSVImport = (props) => {
         formControl={formControl}
       />
       <Grid container spacing={2}>
-        {manualFields &&
-          fields.map((field) => (
-            <Grid item xs={12} sm={6} md={4} key={field}>
-              <CippFormComponent
-                name={`addrow.${field}`}
-                label={getCippTranslation(field)}
-                type="textField"
-                formControl={formControl}
-              />
-            </Grid>
-          ))}
-        <Grid item xs={12} sm={6} md={4}>
-          <Button size="small" onClick={() => handleAddItem()}>
+        <Grid item xs={12}>
+          <Button size="small" onClick={() => setOpen(true)}>
             Add Item
           </Button>
         </Grid>
       </Grid>
+      <Dialog open={open} onClose={() => setOpen(false)}>
+        <DialogTitle>Add a new row</DialogTitle>
+        <DialogContent>
+          <Grid container spacing={2}>
+            {fields.map((field) => (
+              <Grid item xs={12} key={field}>
+                <CippFormComponent
+                  name={`addrow.${field}`}
+                  label={getCippTranslation(field)}
+                  type="textField"
+                  formControl={formControl}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>Cancel</Button>
+          <Button onClick={handleAddItem}>Add</Button>
+        </DialogActions>
+      </Dialog>
       <CippDataTable
         actions={actions}
         title={`CSV Preview`}

src/components/CippWizard/CippWizardConfirmation.js

@@ -10,7 +10,15 @@ export const CippWizardConfirmation = (props) => {
   const formValues = formControl.getValues();
   const formEntries = Object.entries(formValues);
   //remove all entries in "blacklist" from showing on confirmation page
-  const blacklist = ["selectedOption", "GUID", "ID", "noSubmitButton", "RAWJson", "TemplateList"];
+  const blacklist = [
+    "selectedOption",
+    "GUID",
+    "ID",
+    "noSubmitButton",
+    "RAWJson",
+    "TemplateList",
+    "addrow",
+  ];
 
   const tenantEntry = formEntries.find(([key]) => key === "tenantFilter" || key === "tenant");
   const userEntry = formEntries.find(([key]) =>

src/layouts/config.js

@@ -274,12 +274,10 @@ export const nativeMenuItems = [
       {
         title: "OneDrive",
         path: "/teams-share/onedrive",
-        items: [{ title: "OneDrive", path: "/teams-share/onedrive/list" }],
       },
       {
         title: "SharePoint",
         path: "/teams-share/sharepoint",
-        items: [{ title: "SharePoint", path: "/teams-share/sharepoint/list-sharepoint" }],
       },
       {
         title: "Teams",

src/pages/teams-share/onedrive/list/index.js → src/pages/teams-share/onedrive/index.js

@@ -2,7 +2,7 @@ import { Layout as DashboardLayout } from "/src/layouts/index.js";
 import { CippTablePage } from "/src/components/CippComponents/CippTablePage.jsx";
 
 const Page = () => {
-  const pageTitle = "OneDrive List";
+  const pageTitle = "OneDrive";
 
   const actions = [
     {

src/pages/teams-share/sharepoint/add-site.js

@@ -0,0 +1,127 @@
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { Grid } from "@mui/material";
+import { useForm } from "react-hook-form";
+import CippFormComponent from "/src/components/CippComponents/CippFormComponent";
+import CippFormPage from "/src/components/CippFormPages/CippFormPage";
+import { useSettings } from "/src/hooks/use-settings";
+
+const AddSiteForm = () => {
+  const userSettingsDefaults = useSettings();
+  const formControl = useForm({
+    mode: "onChange",
+    defaultValues: {
+      tenantFilter: userSettingsDefaults.currentTenant,
+    },
+  });
+
+  return (
+    <CippFormPage
+      title="SharePoint Site"
+      postUrl="/api/AddSite"
+      formControl={formControl}
+      backButtonTitle="Back to Sites"
+    >
+      <Grid container spacing={2} sx={{ mb: 2 }}>
+        <Grid item xs={12}>
+          <CippFormComponent name="siteName" label="Site Name" formControl={formControl} required />
+        </Grid>
+        <Grid item xs={12}>
+          <CippFormComponent
+            name="siteDescription"
+            label="Site Description"
+            formControl={formControl}
+            required
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <CippFormComponent
+            name="SiteOwner"
+            label="Add Owner"
+            formControl={formControl}
+            required
+            multiple={false}
+            type="autoComplete"
+            api={{
+              url: "/api/ListGraphRequest",
+              data: {
+                Endpoint: "users",
+                $filter: "accountEnabled eq true",
+                $top: 999,
+                $count: true,
+                $orderby: "displayName",
+                $select: "id,displayName,userPrincipalName",
+              },
+              dataKey: "Results",
+              labelField: (user) => `${user.displayName} (${user.userPrincipalName})`,
+              valueField: "userPrincipalName",
+              addedField: {
+                id: "id",
+              },
+            }}
+            validators={{
+              validate: (value) => {
+                if (!value) {
+                  return "Required";
+                }
+                return true;
+              },
+            }}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <CippFormComponent
+            name="TemplateName"
+            label="Template Name"
+            formControl={formControl}
+            required
+            type="autoComplete"
+            multiple={false}
+            options={[
+              { label: "Team (No Microsoft365 Group)", value: "team" },
+              { label: "Communication", value: "communication" },
+            ]}
+            validators={{
+              validate: (value) => {
+                if (!value) {
+                  return "Required";
+                }
+                return true;
+              },
+            }}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <CippFormComponent
+            name="siteDesign"
+            label="Site Design Template"
+            formControl={formControl}
+            required
+            type="autoComplete"
+            multiple={false}
+            options={[
+              { label: "Blank", value: "blank" },
+              { label: "Showcase", value: "Showcase" },
+              { label: "Topic", value: "Topic" },
+            ]}
+            validators={{
+              validate: (value) => {
+                if (!value) {
+                  return "Required";
+                }
+                return true;
+              },
+            }}
+          />
+        </Grid>
+      </Grid>
+    </CippFormPage>
+  );
+};
+
+const Page = () => {
+  return <AddSiteForm />;
+};
+
+Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+
+export default Page;

src/pages/teams-share/sharepoint/bulk-add-site.js

@@ -0,0 +1,63 @@
+import { Layout as DashboardLayout } from "/src/layouts/index.js";
+import { useSettings } from "/src/hooks/use-settings";
+import { CippWizardConfirmation } from "/src/components/CippWizard/CippWizardConfirmation";
+import CippWizardPage from "/src/components/CippWizard/CippWizardPage.jsx";
+import { CippTenantStep } from "/src/components/CippWizard/CippTenantStep.jsx";
+import { CippWizardCSVImport } from "/src/components/CippWizard/CippWizardCSVImport";
+
+const BulkAddSiteForm = () => {
+  const tenantFilter = useSettings().currentTenant;
+
+  const fields = [
+    "SiteName",
+    "siteDescription",
+    "siteOwner",
+    "TemplateName",
+    "siteDesign",
+    "sensitivityLabel",
+  ];
+
+  const steps = [
+    {
+      title: "Step 1",
+      description: "Tenant Selection",
+      component: CippTenantStep,
+      componentProps: {
+        allTenants: false,
+        type: "single",
+      },
+    },
+    {
+      title: "Step 2",
+      description: "Upload CSV",
+      component: (props) => <CippWizardCSVImport fileName="BulkSites" {...props} />,
+      componentProps: {
+        name: "bulkSites",
+        fields: fields,
+        manualFields: false,
+      },
+    },
+    {
+      title: "Step 3",
+      description: "Review and Confirm",
+      component: CippWizardConfirmation,
+    },
+  ];
+
+  return (
+    <CippWizardPage
+      initialState={{ tenantFilter }}
+      steps={steps}
+      postUrl="/api/AddSiteBulk"
+      wizardTitle="Bulk Add Site Wizard"
+    />
+  );
+};
+
+const Page = () => {
+  return <BulkAddSiteForm />;
+};
+
+Page.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>;
+
+export default Page;

src/pages/teams-share/sharepoint/list-sharepoint/index.js → src/pages/teams-share/sharepoint/index.js

@@ -4,7 +4,7 @@ import { Button } from "@mui/material";
 import Link from "next/link";
 
 const Page = () => {
-  const pageTitle = "SharePoint List";
+  const pageTitle = "SharePoint Sites";
 
   const actions = [
     {
@@ -128,7 +128,7 @@ const Page = () => {
   ];
 
   const offCanvas = {
-    extendedInfoFields: ["displayName", "webUrl"],
+    extendedInfoFields: ["displayName", "description", "webUrl"],
     actions: actions,
   };
 
@@ -151,10 +151,10 @@ const Page = () => {
       ]}
       cardButton={
         <>
-          <Button component={Link} href="/teams-share/sharepoint/addsite">
+          <Button component={Link} href="/teams-share/sharepoint/add-site">
             Add Site
           </Button>
-          <Button component={Link} href="/teams-share/sharepoint/addsitebulk">
+          <Button component={Link} href="/teams-share/sharepoint/bulk-add-site">
             Bulk Add Sites
           </Button>
         </>