feat(UI): Import CSV-license file PAGE

Signed-off-by: dushimsam <[email protected]>

src/Routes.jsx

@@ -95,6 +95,7 @@ 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 AddLicense = React.lazy(() => import("pages/Admin/License/Create"));
+const ImportLicense = React.lazy(() => import("pages/Admin/License/Import"));
 const SelectLicense = React.lazy(() =>
   import("pages/Admin/License/SelectLicense")
 );
@@ -302,6 +303,11 @@ const Routes = () => {
             path={routes.admin.license.selectLicense}
             component={SelectLicense}
           />
+          <AdminLayout
+            exact
+            path={routes.admin.license.import}
+            component={ImportLicense}
+          />
           <AdminLayout
             exact
             path={routes.admin.users.delete}

src/api/licenses.js

@@ -67,3 +67,23 @@ export const createCandidateLicenseApi = ({
     },
   });
 };
+
+export const importLicenseCsvApi = (fileInput, delimiter, enclosure) => {
+  const url = endpoints.license.importCsv();
+  const formdata = new FormData();
+
+  if (fileInput) {
+    formdata.append("file_input", fileInput);
+    formdata.append("delimiter", delimiter);
+    formdata.append("enclosure", enclosure);
+  }
+  return sendRequest({
+    url,
+    method: "POST",
+    isMultipart: true,
+    headers: {
+      Authorization: getToken(),
+    },
+    body: formdata,
+  });
+};

src/api/licenses.test.js

@@ -16,7 +16,11 @@
 import sendRequest from "api/sendRequest";
 import endpoints from "constants/endpoints";
 import { getToken } from "shared/authHelper";
-import { createCandidateLicenseApi, getAllLicenseApi } from "api/licenses";
+import {
+  createCandidateLicenseApi,
+  getAllLicenseApi,
+  importLicenseCsvApi,
+} from "api/licenses";
 
 jest.mock("api/sendRequest");
 
@@ -54,6 +58,7 @@ describe("licenses", () => {
     const licenseUrl = "licenseUrl";
     const mergeRequest = "mergeRequest";
     const url = endpoints.admin.license.createCandidateLicense();
+    sendRequest.mockImplementation(() => true);
 
     expect(
       createCandidateLicenseApi({
@@ -85,3 +90,32 @@ describe("licenses", () => {
     );
   });
 });
+
+test("importLicenseCsvApi", () => {
+  const url = endpoints.license.importCsv();
+  const expectedBody = new FormData();
+  const delimiter = "shortName";
+  const enclosure = "fullName";
+  const fileInput = "fileInput";
+
+  expectedBody.append("file_input", fileInput);
+  expectedBody.append("delimiter", delimiter);
+  expectedBody.append("enclosure", enclosure);
+
+  sendRequest.mockImplementation(() => true);
+
+  expect(importLicenseCsvApi(fileInput, delimiter, enclosure)).toBe(
+    sendRequest({})
+  );
+  expect(sendRequest).toHaveBeenCalledWith(
+    expect.objectContaining({
+      url,
+      method: "POST",
+      isMultipart: true,
+      headers: {
+        Authorization: getToken(),
+      },
+      body: expectedBody,
+    })
+  );
+});

src/components/Header/index.jsx

@@ -312,6 +312,12 @@ const Header = () => {
                         >
                           CSV Export
                         </NavDropdown.Item>
+                        <NavDropdown.Item
+                          as={Link}
+                          to={routes.admin.license.import}
+                        >
+                          CSV Import
+                        </NavDropdown.Item>
                         <NavDropdown.Item
                           as={Link}
                           to={routes.admin.license.selectLicense}

src/constants/constants.js

@@ -104,6 +104,13 @@ export const initialMessageSearch = {
   text: "",
 };
 
+// constants used in Import License component
+export const initialImportCsvLicense = {
+  fileInput: null,
+  delimiter: ",",
+  enclosure: '"',
+};
+
 // constants used in Upload/file component
 export const initialStateFile = {
   folderId: 1,

src/constants/endpoints.js

@@ -85,6 +85,7 @@ const endpoints = {
     license: {
       get: () => `${apiUrl}/license`,
       createCandidateLicense: () => `${apiUrl}/license`,
+      importCsv: () => `${apiUrl}/license/import-csv`,
     },
     info: {
       info: () => `${apiUrl}/info`,

src/constants/routes.js

@@ -77,6 +77,7 @@ const routes = {
       create: "/admin/license/create",
       selectLicense: "/admin/selectLicense",
       licenseCSV: "/licenseCSV/fossology-license-export.csv",
+      import: "/admin/license/import",
     },
     mantainance: "/admin/mantainance",
   },

src/pages/Admin/License/Import/index.jsx

@@ -0,0 +1,149 @@
+/*
+ Copyright (C) 2022 Samuel Dushimimana ([email protected])
+
+ 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, { useState } from "react";
+
+// Title
+import Title from "components/Title";
+import { initialImportCsvLicense, initialMessage } from "constants/constants";
+import { Alert, Button, InputContainer, Spinner } from "components/Widgets";
+import { importLicenseCsv } from "services/licenses";
+
+const ImportLicense = () => {
+  // Data required for importing the csv file
+  const [uploadFileData, setUploadFileData] = useState(initialImportCsvLicense);
+  // State Variables for handling Error Boundaries
+  const [loading, setLoading] = useState(false);
+  const [showMessage, setShowMessage] = useState(false);
+  const [message, setMessage] = useState(initialMessage);
+
+  const handleChange = (e) => {
+    if (e.target.type === "fileInput") {
+      setUploadFileData({
+        ...uploadFileData,
+        [e.target.name]: e.target.files[0],
+      });
+    } else {
+      setUploadFileData({
+        ...uploadFileData,
+        [e.target.name]: e.target.value,
+      });
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      setLoading(true);
+      const { data } = await importLicenseCsv(uploadFileData);
+      setMessage({
+        type: "success",
+        text: data.message,
+      });
+      setUploadFileData(initialImportCsvLicense);
+    } catch (error) {
+      setMessage({
+        type: "danger",
+        text: error.message,
+      });
+    } finally {
+      setLoading(false);
+      setShowMessage(true);
+    }
+  };
+  return (
+    <>
+      <Title title="Admin Obligation CSV Import" />
+      <div className="main-container my-3">
+        <div className="row">
+          <div className="col-lg-8 col-md-12 col-sm-12 col-12">
+            {showMessage && (
+              <Alert
+                type={message.type}
+                setShow={setShowMessage}
+                message={message.text}
+              />
+            )}
+            <h1 className="font-size-main-heading">
+              Admin Obligation CSV Import
+            </h1>
+          </div>
+          <div className="col-lg-8 col-md-12 col-sm-12 col-12">
+            <p>
+              This option permits uploading a CSV file from your computer to
+              Your FOSSology server has imposed a maximum upload file size of
+              700Mbytes.
+            </p>
+          </div>
+          <div className="col-lg-8 col-md-12 col-sm-12 col-12">
+            <span>Select the CSV-file to upload:</span>
+            <InputContainer
+              type="file"
+              name="fileInput"
+              id="upload-file-input"
+              onChange={(e) => handleChange(e)}
+            />
+          </div>
+          <div className="col-lg-8 col-md-12 col-sm-12 col-12">
+            <div>
+              <InputContainer
+                type="text"
+                name="name"
+                id="delimiter"
+                onChange={handleChange}
+                value={uploadFileData.delimiter}
+              >
+                Delimiter:
+              </InputContainer>
+            </div>
+
+            <div>
+              <InputContainer
+                type="text"
+                name="name"
+                id="admin-group-add-name"
+                onChange={handleChange}
+                placeholder="Group name"
+                value={uploadFileData.enclosure}
+              >
+                Enclosure:
+              </InputContainer>
+            </div>
+          </div>
+          <div className="col-lg-8 col-md-12 col-sm-12 col-12">
+            <Button type="submit" onClick={handleSubmit} className="mt-4">
+              {loading ? (
+                <Spinner
+                  as="span"
+                  animation="border"
+                  size="sm"
+                  role="status"
+                  aria-hidden="true"
+                />
+              ) : (
+                "Add"
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ImportLicense;

src/services/licenses.js

@@ -1,5 +1,5 @@
 /*
- Copyright (C) 2021 Shruti Agarwal ([email protected]), Aman Dwivedi ([email protected])
+ Copyright (C) 2021 Shruti Agarwal ([email protected]), Aman Dwivedi ([email protected]) , Samuel Dushimimana ([email protected])
 
  SPDX-License-Identifier: GPL-2.0
 
@@ -16,7 +16,11 @@
  51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-import { getAllLicenseApi, createCandidateLicenseApi } from "api/licenses";
+import {
+  getAllLicenseApi,
+  createCandidateLicenseApi,
+  importLicenseCsvApi,
+} from "api/licenses";
 
 // Fetching the licenses with their kind i.e (candidate, main, all)
 export const getAllLicense = (licenseData) => {
@@ -30,3 +34,9 @@ export const createCandidateLicense = (licenseData) => {
     return res;
   });
 };
+
+export const importLicenseCsv = ({ fileInput, delimiter, enclosure }) => {
+  return importLicenseCsvApi(fileInput, delimiter, enclosure).then((res) => {
+    return res;
+  });
+};