Merge pull request #1317 from concord-consortium/187699878-permission…

…-modal 187699878 and 187595886 permission modal and tabs
concord-consortium · Jun 7, 2024 · b09d9f6 · b09d9f6
2 parents 9ea259c + 0f8f302
commit b09d9f6
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 151 deletions.
diff --git a/...eact-components/src/library/components/permission-forms-v2/create-new-permission-form.tsx b/...eact-components/src/library/components/permission-forms-v2/create-new-permission-form.tsx
@@ -48,11 +48,10 @@ export const CreateNewPermissionForm = ({ projects, currentSelectedProject, onFo
   };
 
   return (
-    <div className={css.newForm}>
+    <div className={css.newPermissionForm}>
       <div className={css.formTop}>
-        {formData.name.length > 0 ? "Edit: " + formData.name : "New form"}
+        Create New Permission Form
       </div>
-
       <div className={css.formRow}>
         <label>Name:</label>
         <div><input type="text" name="name" onChange={handleFormInputChange} autoComplete="off" /></div>

diff --git a/rails/react-components/src/library/components/permission-forms-v2/index.tsx b/rails/react-components/src/library/components/permission-forms-v2/index.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from "react";
 import { useFetch } from "../../hooks/use-fetch";
 import { CreateNewPermissionForm } from "./create-new-permission-form";
+import { IPermissionForm, IProject, CurrentSelectedProject, PermissionsTab } from "./permission-form-types";
 import PermissionFormRow from "./permission-form-row";
-import { IPermissionForm, IProject, CurrentSelectedProject } from "./permission-form-types";
+import ModalDialog from "../shared/modal-dialog";
 
 import css from "./style.scss";
 
@@ -12,7 +13,8 @@ export default function PermissionFormsV2() {
   const { data: projectsData } = useFetch<IProject[]>(Portal.API_V1.PROJECTS, []);
 
   // State for UI
-  const [showForm, setShowForm] = useState(false);
+  const [openTab, setOpenTab] = useState<PermissionsTab>("projectsTab");
+  const [showCreateNewFormModal, setShowCreateNewFormModal] = useState(false);
   const [currentSelectedProject, setCurrentSelectedProject] = useState<number | "">("");
 
   const handleProjectSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -21,7 +23,7 @@ export default function PermissionFormsV2() {
 
   const handleFormSave = (newForm: IPermissionForm) => {
     setCurrentSelectedProject(newForm.project_id as CurrentSelectedProject);
-    setShowForm(false);
+    setShowCreateNewFormModal(false);
     refetchPermissions();
   };
 
@@ -34,45 +36,63 @@ export default function PermissionFormsV2() {
 
   return (
     <div className={css.permissionForms}>
-      <div className={css.tableAndControls}>
-        <h2>Permission Form Options</h2>
-        <p>Tabs</p>
 
-        <h3>Create / Manage Project Permission Forms</h3>
-        <div className={css.controlsArea}>
+      <div className={css.tabArea}>
+        <h2>Permission Form Options</h2>
+        <div className={css.tabs}>
+          <button
+            className={openTab === "projectsTab" ? css.activeTab : ""}
+            onClick={() => setOpenTab("projectsTab")}
+          >
+            Create / Manage Project Permission Forms
+          </button>
+          <button
+            className={openTab === "studentsTab" ? css.activeTab : ""}
+            onClick={() => setOpenTab("studentsTab")}
+          >
+            Manage Student Permissions
+          </button>
+        </div>
+      </div>
 
-          <div className={css.leftSide}>
-            <div>Project:</div>
-            <select data-testid="top-project-select" value={currentSelectedProject} onChange={handleProjectSelectChange}>
-              <option value="">Select project..</option>
-              {projectsData?.map((p: IProject) => <option key={p.id} value={p.id}>{p.name}</option>)}
-            </select>
+      { openTab === "projectsTab" &&
+        <div className={css.projectPermissionsTabContent}>
+          <h3>Create/Manage Project Permission Forms</h3>
+          <div className={css.controlsArea}>
+            <div className={css.leftSide}>
+              <div>Project:</div>
+              <select data-testid="top-project-select" value={currentSelectedProject} onChange={handleProjectSelectChange}>
+                <option value="">Select project..</option>
+                {projectsData?.map((p: IProject) => <option key={p.id} value={p.id}>{p.name}</option>)}
+              </select>
+            </div>
+            <div className={css.rightSide}>
+              <button onClick={() => setShowCreateNewFormModal(true)}>Create New Permission Form</button>
+            </div>
           </div>
 
-          <div className={css.rightSide}>
-            <button onClick={() => setShowForm(true)}>Create New Permission Form</button>
-          </div>
+          <table className={css.permissionFormsTable}>
+            <thead>
+              <tr><th>Name</th><th>URL</th><th></th></tr>
+            </thead>
+            <tbody>
+              {getFilteredForms()?.map((permissionForm: IPermissionForm) => (
+                <PermissionFormRow key={permissionForm.id} permissionForm={permissionForm} />
+              ))}
+            </tbody>
+          </table>
         </div>
+      }
 
-        <table className={css.permissionFormsTable}>
-          <thead>
-            <tr><th>Name</th><th>URL</th><th></th></tr>
-          </thead>
-          <tbody>
-            {getFilteredForms()?.map((permissionForm: IPermissionForm) => (
-              <PermissionFormRow key={permissionForm.id} permissionForm={permissionForm} />
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {showForm &&
-        <CreateNewPermissionForm
-          currentSelectedProject={currentSelectedProject}
-          onFormCancel={() => setShowForm(false)}
-          onFormSave={handleFormSave}
-          projects={projectsData}
-        />
+      {showCreateNewFormModal &&
+        <ModalDialog styles={{ padding: "0px"}}>
+          <CreateNewPermissionForm
+            currentSelectedProject={currentSelectedProject}
+            onFormCancel={() => setShowCreateNewFormModal(false)}
+            onFormSave={handleFormSave}
+            projects={projectsData}
+          />
+        </ModalDialog>
       }
     </div>
   );

diff --git a/rails/react-components/src/library/components/permission-forms-v2/permission-form-row.tsx b/rails/react-components/src/library/components/permission-forms-v2/permission-form-row.tsx
@@ -7,11 +7,20 @@ interface PermissionFormRowProps {
   permissionForm: IPermissionForm;
 }
 
+function renderLinkOrSpan(urlValue: string): React.ReactElement | string {
+  try {
+    const urlObj = new URL(urlValue);
+    return <a href={urlObj.origin}>{urlObj.origin}</a>;
+  } catch (_) {
+    return <span className={css.invalidLink}>{urlValue}</span>;
+  }
+}
+
 const PermissionFormRow: React.FC<PermissionFormRowProps> = ({ permissionForm }) => {
   return (
     <tr className={css.permissionFormRow}>
       <td className={css.nameColumn}>{permissionForm.name}</td>
-      <td className={css.urlColumn}>{permissionForm.url}</td>
+      <td className={css.urlColumn}>{renderLinkOrSpan(permissionForm.url ?? "")}</td>
       <td className={css.buttonsColumn}>
         <button className={css.basicButton}>Edit</button>
         <button className={css.basicButton}>Archive</button>

diff --git a/rails/react-components/src/library/components/permission-forms-v2/permission-form-types.ts b/rails/react-components/src/library/components/permission-forms-v2/permission-form-types.ts
@@ -5,9 +5,11 @@ export interface IPermissionForm {
   name: string;
   project_id?: number | string; // need to fix this
   url?: string;
- }
+}
 
 export interface IProject {
   id: string;
   name: string;
- }
+}
+
+export type PermissionsTab = "projectsTab" | "studentsTab";