From f63d0b3a64fc3d91056609b882f7809958fd1cce Mon Sep 17 00:00:00 2001
From: Krishna Mahato <krishhtrishh9304@gmail.com>
Date: Sat, 13 Aug 2022 14:10:02 +0530
Subject: [PATCH] feat(UI): Upload permissions page UI and API Implementation
 done

---
 src/Routes.jsx                              |   8 +
 src/api/upload.js                           |  25 ++
 src/assets/images/loader.svg                |   6 +
 src/components/Header/index.jsx             |   6 +
 src/components/Widgets/Input/index.jsx      |  10 +-
 src/constants/constants.js                  |   5 +
 src/constants/endpoints.js                  |   4 +
 src/constants/routes.js                     |   1 +
 src/pages/Admin/uploadPermissions/index.jsx | 430 ++++++++++++++++++++
 src/services/upload.js                      |  16 +
 src/utils/index.js                          |  33 ++
 11 files changed, 540 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/loader.svg
 create mode 100644 src/pages/Admin/uploadPermissions/index.jsx

diff --git a/src/Routes.jsx b/src/Routes.jsx
index 2705f4105..22231b4bf 100644
--- a/src/Routes.jsx
+++ b/src/Routes.jsx
@@ -94,6 +94,9 @@ const DeleteGroup = React.lazy(() => import("pages/Admin/Group/Delete"));
 const DeleteUser = React.lazy(() => import("pages/Admin/Users/Delete"));
 const AddUser = React.lazy(() => import("pages/Admin/Users/Add"));
 const EditUser = React.lazy(() => import("pages/Admin/Users/Edit"));
+const UploadPermissions = React.lazy(() =>
+  import("pages/Admin/uploadPermissions")
+);
 const AddLicense = React.lazy(() => import("pages/Admin/License/Create"));
 const SelectLicense = React.lazy(() =>
   import("pages/Admin/License/SelectLicense")
@@ -302,6 +305,11 @@ const Routes = () => {
             path={routes.admin.license.selectLicense}
             component={SelectLicense}
           />
+          <AdminLayout
+            exact
+            path={routes.admin.uploadPermissions}
+            component={UploadPermissions}
+          />
           <AdminLayout
             exact
             path={routes.admin.users.delete}
diff --git a/src/api/upload.js b/src/api/upload.js
index 64783b2c3..55468ea04 100644
--- a/src/api/upload.js
+++ b/src/api/upload.js
@@ -107,6 +107,31 @@ export const getUploadSummaryApi = (uploadId) => {
   });
 };
 
+// Getting all groups with permissions based on upload ID
+export const getGroupsWithPermissionsApi = (uploadId) => {
+  const url = endpoints.upload.getGroupsWithPermissions(uploadId);
+  return sendRequest({
+    url,
+    method: "GET",
+    headers: {
+      Authorization: getToken(),
+    },
+  });
+};
+
+// change permissions for a upload for different groups
+export const changeUploadPermissionsApi = (payload) => {
+  const url = endpoints.upload.uploadPermissions(payload.uploadId);
+  return sendRequest({
+    url,
+    method: "PUT",
+    body: payload,
+    headers: {
+      Authorization: getToken(),
+    },
+  });
+};
+
 // Getting a Upload License
 export const getUploadLicenseApi = (uploadId, agent) => {
   const url = endpoints.upload.getLicense(uploadId);
diff --git a/src/assets/images/loader.svg b/src/assets/images/loader.svg
new file mode 100644
index 000000000..7c0fcc2ea
--- /dev/null
+++ b/src/assets/images/loader.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#dc3545" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index bc6b0f47c..b34c2cf2d 100644
--- a/src/components/Header/index.jsx
+++ b/src/components/Header/index.jsx
@@ -264,6 +264,12 @@ const Header = () => {
                         </NavDropdown.Item>
                       </div>
                     </DropdownButton>
+                    <NavDropdown.Item
+                      as={Link}
+                      to={routes.admin.uploadPermissions}
+                    >
+                      Upload Permissions
+                    </NavDropdown.Item>
                     <DropdownButton
                       variant=""
                       drop="right"
diff --git a/src/components/Widgets/Input/index.jsx b/src/components/Widgets/Input/index.jsx
index 5a9722626..5d80592a7 100644
--- a/src/components/Widgets/Input/index.jsx
+++ b/src/components/Widgets/Input/index.jsx
@@ -59,11 +59,13 @@ const InputContainer = ({
     return (
       <div className="my-1 py-0">
         {children && (
-          <label htmlFor={id} className="font-demi">
-            {children}
-          </label>
+          <>
+            <label htmlFor={id} className="font-demi">
+              {children}
+            </label>
+            &emsp;
+          </>
         )}
-        &emsp;
         <select
           name={name}
           className={
diff --git a/src/constants/constants.js b/src/constants/constants.js
index dc4cd7f2b..9596a4981 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -266,30 +266,35 @@ export const accessLevels = [
     id: 0,
     name: "None (very basic, no database access)",
     disabled: false,
+    permId: 0,
     value: "none",
   },
   {
     id: 1,
     name: "Read-only (read, but no writes or downloads)",
     disabled: false,
+    permId: 1,
     value: "read_only",
   },
   {
     id: 2,
     name: "Read-Write (read, download, or edit information)",
     disabled: false,
+    permId: 3,
     value: "read_write",
   },
   {
     id: 3,
     name: "Clearing Administrator (read, download, edit information and edit decisions)",
     disabled: false,
+    permId: 5,
     value: "clearing_admin",
   },
   {
     id: 4,
     name: "Full Administrator (all access including adding and deleting users)",
     disabled: false,
+    permId: 10,
     value: "admin",
   },
 ];
diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index 634ddc553..cae994e5a 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -60,6 +60,10 @@ const endpoints = {
     getId: (uploadId) => `${apiUrl}/uploads/${uploadId}`,
     getSummary: (uploadId) => `${apiUrl}/uploads/${uploadId}/summary`,
     getLicense: (uploadId) => `${apiUrl}/uploads/${uploadId}/licenses`,
+    getGroupsWithPermissions: (uploadId) =>
+      `${apiUrl}/uploads/${uploadId}/perm-groups`,
+    uploadPermissions: (uploadId) =>
+      `${apiUrl}/uploads/${uploadId}/permissions`,
   },
   browse: {
     get: () => `${apiUrl}/uploads`,
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 832858e97..f226b4c8e 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -79,6 +79,7 @@ const routes = {
       licenseCSV: "/licenseCSV/fossology-license-export.csv",
     },
     mantainance: "/admin/mantainance",
+    uploadPermissions: "/admin/upload-permissions",
   },
   browseUploads: {
     softwareHeritage: "/browse/softwareHeritage",
diff --git a/src/pages/Admin/uploadPermissions/index.jsx b/src/pages/Admin/uploadPermissions/index.jsx
new file mode 100644
index 000000000..813d22d2d
--- /dev/null
+++ b/src/pages/Admin/uploadPermissions/index.jsx
@@ -0,0 +1,430 @@
+/*
+ Copyright (C) 2022 Krishna Mahato (krishhtrishh9304@gmail.com)
+
+ SPDX-License-Identifier: GPL-2.0
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU General Public License
+ version 2 as published by the Free Software Foundation.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along
+ with this program; if not, write to the Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+
+import React, { useEffect, useState } from "react";
+
+// Title
+import Title from "components/Title";
+
+// Widgets
+import { Alert, InputContainer } from "components/Widgets";
+import { getAllFolders } from "services/folders";
+import { getUploadsFolderId } from "services/organizeUploads";
+import { accessLevels } from "constants/constants";
+import {
+  changeUploadPermissions,
+  getGroupsWithPermissions,
+} from "services/upload";
+import { getEquivalentValueForPermission, getEquivalentPermVals } from "utils";
+
+// assets
+import loader from "assets/images/loader.svg";
+import { getAllGroups } from "services/groups";
+
+const UploadPermissions = () => {
+  const initialMessage = {
+    type: "success",
+    text: "",
+  };
+
+  // State Variables for handling Error Boundaries
+  const [showMessage, setShowMessage] = useState(false);
+  const [message, setMessage] = useState(initialMessage);
+
+  // data variables
+  const [folderlist, setFolderlist] = useState([]);
+  const [uploadList, setUploadList] = useState([]);
+  const [noPermGroupsList, setNoPermGroupsList] = useState([]);
+  const [allGroupsList, setAllGroupsList] = useState([]);
+  const [groupsWithPerms, setGroupsWithPerms] = useState({});
+  const [loading, setLoading] = useState(false);
+
+  const initialPermFormData = {
+    uploadId: null,
+    folderId: 1,
+    allUploadsPermission: false,
+    groupId: -1,
+    newPermission: "none",
+    publicPermission: "none",
+  };
+  const [permFormData, setPermFormData] = useState(initialPermFormData);
+
+  // getting all the folders from the server
+  const fetchFoldersAndGroups = async () => {
+    try {
+      const groups = await getAllGroups();
+      setAllGroupsList(groups);
+      const folders = await getAllFolders();
+      setFolderlist(() =>
+        folders.map((f) => ({ id: f.id, name: f.name, disabled: false }))
+      );
+      setPermFormData((p) => ({
+        ...p,
+        folderId: parseInt(folders[0].id, 10),
+      }));
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+  };
+  useEffect(async () => {
+    await fetchFoldersAndGroups();
+  }, []);
+
+  // getting all the uploads based on folder id
+  const fetchUploads = async () => {
+    const uploads = await getUploadsFolderId(permFormData.folderId);
+    try {
+      setUploadList(() =>
+        uploads.map((u) => ({
+          id: u.id,
+          name: `${u.uploadname}, ${u.uploaddate}`,
+          disabled: false,
+        }))
+      );
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+  };
+  useEffect(async () => {
+    await fetchUploads();
+  }, [permFormData.folderId]);
+
+  useEffect(() => {
+    if (uploadList.length) {
+      setPermFormData((p) => ({ ...p, uploadId: uploadList[0].id }));
+    }
+  }, [uploadList]);
+
+  const fetchGroupsWithPerms = async () => {
+    try {
+      const resp = await getGroupsWithPermissions(permFormData.uploadId);
+      const finalPermGroups = {};
+      resp.permGroups.forEach((grp) => {
+        finalPermGroups[grp.group_pk] = grp;
+      });
+      resp.permGroups = finalPermGroups;
+      const permId = parseInt(resp.publicPerm, 10);
+      setPermFormData((p) => ({
+        ...p,
+        publicPermission: getEquivalentPermVals(permId),
+      }));
+      setGroupsWithPerms(resp.permGroups);
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+  };
+  useEffect(async () => {
+    if (uploadList.length) {
+      await fetchGroupsWithPerms();
+    }
+  }, [permFormData.uploadId]);
+
+  const segregateNoPermGroups = () => {
+    try {
+      const temp = allGroupsList.filter(
+        (group) => !Object.keys(groupsWithPerms).includes(String(group.id))
+      );
+      setPermFormData((p) => ({
+        ...p,
+        groupId: temp.length ? temp[0].id : -1,
+      }));
+      setNoPermGroupsList(
+        temp.map((group, idx) => ({
+          id: idx,
+          name: group.name,
+          disabled: false,
+          value: group.id,
+        }))
+      );
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+  };
+
+  useEffect(async () => {
+    if (Object.keys(groupsWithPerms).length) {
+      segregateNoPermGroups();
+    }
+  }, [groupsWithPerms]);
+
+  const handleEditRequestOnChange = async () => {
+    setLoading(true);
+    try {
+      await changeUploadPermissions(permFormData);
+      const temp = allGroupsList.filter(
+        (group) => !Object.keys(groupsWithPerms).includes(String(group.id))
+      );
+      if (temp.length)
+        setPermFormData((p) => ({
+          ...p,
+          groupId: temp[0].id,
+          newPermission: "none",
+        }));
+    } catch (error) {
+      setMessage({ type: "danger", text: error.message });
+      setShowMessage(true);
+    }
+    setLoading(false);
+  };
+
+  useEffect(async () => {
+    if (
+      permFormData.uploadId &&
+      permFormData.groupId !== -1 &&
+      permFormData.newPermission !== -1
+    ) {
+      await handleEditRequestOnChange();
+    }
+  }, [
+    permFormData.newPermission,
+    permFormData.groupId,
+    permFormData.publicPermission,
+  ]);
+
+  const handleChange = (e, groupPk = "") => {
+    if (e.target.type === "checkbox") {
+      setPermFormData((p) => ({ ...p, [e.target.name]: e.target.checked }));
+    } else if (e.target.name === "newPermission") {
+      const permVal = getEquivalentValueForPermission(e.target.value);
+      const grp = allGroupsList.filter((g) => String(g.id) === String(groupPk));
+      if (grp.length) {
+        setGroupsWithPerms((g) => ({
+          ...g,
+          [groupPk]: {
+            ...g[groupPk],
+            perm: permVal,
+            group_name: grp[0].name,
+            group_pk: groupPk,
+          },
+        }));
+      }
+      setPermFormData((p) => ({
+        ...p,
+        [e.target.name]: e.target.value,
+        groupId: groupPk,
+      }));
+      if (e.target.value === "none") {
+        delete groupsWithPerms[groupPk];
+        setGroupsWithPerms(groupsWithPerms);
+        segregateNoPermGroups();
+      }
+    } else if (e.target.name === "publicPermission") {
+      setPermFormData((p) => ({
+        ...p,
+        [e.target.name]: e.target.value,
+        groupId: 0,
+      }));
+    } else {
+      setPermFormData((p) => ({ ...p, [e.target.name]: e.target.value }));
+    }
+  };
+
+  const modifyAccessLevelOptions = (acsLev) => {
+    const temp = acsLev.map((al) => {
+      return {
+        ...al,
+        name: al.name.split(" (")[0],
+      };
+    });
+    return temp;
+  };
+
+  return (
+    <>
+      {loading && (
+        <div
+          style={{
+            backgroundColor: "rgba(255, 255, 255, 0.65)",
+            position: "fixed",
+            top: 0,
+            left: 0,
+            zIndex: 1000,
+          }}
+          className="vw-100 vh-100 d-flex flex-column justify-content-center align-items-center"
+        >
+          <img src={loader} alt="updating.." />
+          Updating..Please wait
+        </div>
+      )}
+      <Title title="Edit Uploaded File Permissions" />
+      <div className="main-container my-3">
+        {showMessage && (
+          <Alert
+            type={message.type}
+            setShow={setShowMessage}
+            message={message.text}
+          />
+        )}
+        <h1 className="font-size-main-heading">
+          Edit Uploaded File Permissions
+        </h1>
+        <br />
+        <div className="row">
+          <div className="col-12 col-lg-8">
+            <form
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: "10px",
+              }}
+            >
+              <InputContainer
+                type="select"
+                name="folderId"
+                id="folderId"
+                onChange={handleChange}
+                options={folderlist}
+                value={permFormData.folderId}
+                property="name"
+              >
+                Select the folder that contains the upload:
+              </InputContainer>
+              <InputContainer
+                type="checkbox"
+                checked={permFormData.allUploadsPermission}
+                name="allUploadsPermission"
+                id="allUploadsPermission"
+                onChange={handleChange}
+              >
+                Apply same permissions to all uploads in this folder
+              </InputContainer>
+              {!permFormData.allUploadsPermission && (
+                <InputContainer
+                  type="select"
+                  name="uploadId"
+                  id="uploadId"
+                  onChange={handleChange}
+                  options={uploadList}
+                  value={permFormData.uploadId || ""}
+                  property="name"
+                >
+                  Select the upload you wish to edit:
+                </InputContainer>
+              )}
+              <InputContainer
+                type="select"
+                name="publicPermission"
+                id="publicPermission"
+                onChange={handleChange}
+                options={modifyAccessLevelOptions(accessLevels)}
+                value={permFormData.publicPermission}
+                valueProperty="value"
+                property="name"
+              >
+                Public Permission:
+              </InputContainer>
+              <h6>Modify upload permissions for below groups</h6>
+              <table className="table table-striped text-primary-color font-size-medium table-bordered">
+                <thead>
+                  <tr className="font-bold">
+                    <th>Group</th>
+                    <th>Permission</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {Object.values(groupsWithPerms).map((group) => {
+                    return (
+                      <tr key={group.group_pk} className="token_row">
+                        <td>{group.group_name}</td>
+                        <td>
+                          <InputContainer
+                            className="mt-0"
+                            type="select"
+                            name="newPermission"
+                            id="newPermission"
+                            onChange={(e) => handleChange(e, group.group_pk)}
+                            options={accessLevels}
+                            value={getEquivalentPermVals(
+                              parseInt(group.perm, 10)
+                            )}
+                            valueProperty="value"
+                            property="value"
+                          />
+                        </td>
+                      </tr>
+                    );
+                  })}
+                  {noPermGroupsList.length ? (
+                    <tr className="token_row">
+                      <td>
+                        <InputContainer
+                          className="mt-0"
+                          type="select"
+                          name="groupId"
+                          id="groupId"
+                          onChange={handleChange}
+                          options={[
+                            {
+                              id: -1,
+                              name: "Select a new group",
+                              disabled: true,
+                              value: -1,
+                            },
+                            ...noPermGroupsList,
+                          ]}
+                          value={permFormData.groupId}
+                          valueProperty="value"
+                          property="name"
+                        />
+                      </td>
+                      <td>
+                        <InputContainer
+                          className="mt-0"
+                          type="select"
+                          name="newPermission"
+                          id="newPermission"
+                          onChange={(e) =>
+                            handleChange(e, permFormData.groupId)
+                          }
+                          options={[
+                            {
+                              id: -1,
+                              name: "Select permission",
+                              disabled: true,
+                              value: -1,
+                            },
+                            ...modifyAccessLevelOptions(accessLevels),
+                          ]}
+                          value={permFormData.newPermission}
+                          valueProperty="value"
+                          property="name"
+                        />
+                      </td>
+                    </tr>
+                  ) : null}
+                </tbody>
+              </table>
+            </form>
+            <h6>Note: </h6>All upload permissions take place immediately when
+            <p>
+              a value is changed. There is no submit button. Add new groups on
+              the last line. If the clearing for the upload is in progress or
+              ready for your recent group, the reuser can copy these.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default UploadPermissions;
diff --git a/src/services/upload.js b/src/services/upload.js
index c1b091a21..cf4a497fc 100644
--- a/src/services/upload.js
+++ b/src/services/upload.js
@@ -20,6 +20,8 @@ import {
   createUploadUrlApi,
   getUploadSummaryApi,
   getUploadLicenseApi,
+  getGroupsWithPermissionsApi,
+  changeUploadPermissionsApi,
 } from "api/upload";
 
 // Create Uploads from File
@@ -62,6 +64,20 @@ export const getUploadById = (uploadId, retries) => {
   });
 };
 
+// Getting all groups with permissions based on upload ID
+export const getGroupsWithPermissions = (uploadId) => {
+  return getGroupsWithPermissionsApi(uploadId).then((res) => {
+    return res;
+  });
+};
+
+// change permissions for a upload for different groups
+export const changeUploadPermissions = (payload) => {
+  return changeUploadPermissionsApi(payload).then((res) => {
+    return res;
+  });
+};
+
 // Getting a Upload Summary
 export const getUploadSummary = (uploadId) => {
   return getUploadSummaryApi(uploadId).then((res) => {
diff --git a/src/utils/index.js b/src/utils/index.js
index 94f5d77e2..a38e00114 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -27,3 +27,36 @@ export default function formatDate(date) {
 
   return [year, month, day].join("-");
 }
+export const getEquivalentPermVals = (permId) => {
+  switch (permId) {
+    case 0:
+      return "none";
+    case 1:
+      return "read_only";
+    case 3:
+      return "read_write";
+    case 5:
+      return "clearing_admin";
+    case 10:
+      return "admin";
+    default:
+      return "none";
+  }
+};
+
+export function getEquivalentValueForPermission(perm) {
+  switch (perm) {
+    case "none":
+      return 0;
+    case "read_only":
+      return 1;
+    case "read_write":
+      return 3;
+    case "clearing_admin":
+      return 5;
+    case "admin":
+      return 10;
+    default:
+      return 0;
+  }
+}