Last minute fix for release 1.3 (#211)

* #209: added units RAM and Disk * #209: fixed project page related issues * #209: changed pronouns field as input * #209: modified project personnel ui style a bit * #209: updated project personnel management UI * #209: updated conditional rendering UI for project personnel * #209: updated RAM/ Disk units for slice builder - detail table
fabric-testbed · Aug 29, 2022 · 41ad66f · 41ad66f
1 parent 50b9bbd
commit 41ad66f
Show file tree

Hide file tree

Showing 19 changed files with 118 additions and 97 deletions.
diff --git a/src/components/Project/NewProjectForm.jsx b/src/components/Project/NewProjectForm.jsx
@@ -211,7 +211,7 @@ class NewProjectForm extends Form {
               <input
                 className="form-control search-owner-input mb-4"
                 value={this.stateownerSearchInput}
-                placeholder="Search by name or email (at least 4 letters) to add more project owners..."
+                placeholder="Search by name or email (at least 4 letters) to add project owners..."
                 onChange={(e) => this.handleInputChange(e.currentTarget.value, "po")}
               />
               <button
@@ -257,7 +257,7 @@ class NewProjectForm extends Form {
             <div className="toolbar">
               <input
                 className="form-control search-member-input mb-4"
-                placeholder="Search by name or email (at least 4 letters) to add more project members..."
+                placeholder="Search by name or email (at least 4 letters) to add project members..."
                 value={memberSearchInput}
                 onChange={(e) => this.handleInputChange(e.currentTarget.value, "pm")}
               />

diff --git a/src/components/Project/ProjectBasicInfoTable.jsx b/src/components/Project/ProjectBasicInfoTable.jsx
@@ -31,12 +31,12 @@ class ProjectBasicInfoTable extends Component {
             </tr>
             <tr>
               <td>
-                Project Tags <a href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions" target="_blank" rel="noreferrer" className="ml-1">
+                Project Permissions <a href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions" target="_blank" rel="noreferrer" className="ml-1">
                   <i className="fa fa-question-circle mx-2"></i>
                 </a>
               </td>
               <td>
-                { project.tags.length > 0 ? this.renderTags(project.tags) : "No tag" }
+                { project.tags.length > 0 ? this.renderTags(project.tags) : "No permissions assigned" }
               </td>
             </tr>
             <tr>

diff --git a/src/components/Project/ProjectPersonnel.jsx b/src/components/Project/ProjectPersonnel.jsx
@@ -8,19 +8,30 @@ class ProjectPersonnel extends Component {
     showSpinner: false,
     searchInput: "",
     searchResults: [],
+    warningMessage: "",
   };
 
   handleInputChange = (input) => {
-    this.setState({ searchInput: input });
+    this.setState({ searchInput: input, warningMessage: "" });
   }
 
   handleSearch = async (value) => {
     try {
       if (value.length > 3) {
         const { data: res } = await getPeopleByName(value);
-        this.setState({ searchResults: res.results });
+        if (res.results.length === 0) {
+          this.setState({
+            searchResults: [],
+            warningMessage: "No users found. Please update your search term and try again." 
+          });
+        } else {
+          this.setState({ searchResults: res.results, warningMessage: "" });
+        }
       } else {
-        this.setState({ searchResults: [] });
+        this.setState({
+          searchResults: [], 
+          warningMessage: "Please enter at least 4 letters to search." 
+        });
       }
     } catch (err) {
       toast.error("Cannot find the user. Please check your input to search by name or email address.");
@@ -40,66 +51,81 @@ class ProjectPersonnel extends Component {
   };
 
   render() {
-    const { searchInput, searchResults } = this.state;
+    const { searchInput, searchResults, warningMessage } = this.state;
     const { canUpdate, personnelType, users } = this.props;
 
     return (
       <div>
-         { 
-            canUpdate
-            &&
-            <div className="d-flex flex-column">
-              <button className="btn btn-primary mb-4" onClick={this.props.onPersonnelUpdate}>
-                {`Update ${personnelType}`}
+        <h4>{personnelType}</h4>
+        { 
+          canUpdate
+          &&
+          <div className="d-flex flex-column my-4">
+            <div className="d-flex flex-row">
+              <input
+                className="form-control search-owner-input"
+                value={searchInput}
+                placeholder={`Search by name or email (at least 4 letters) to add ${personnelType}...`}
+                onChange={(e) => this.handleInputChange(e.currentTarget.value)}
+              />
+              <button
+                className="btn btn-primary"
+                onClick={() => this.handleSearch(searchInput)}
+              >
+                <i className="fa fa-search"></i>
               </button>
-              <div className="d-flex flex-row">
-                <input
-                  className="form-control search-owner-input"
-                  value={searchInput}
-                  placeholder={`Search by name or email (at least 4 letters) to add more ${personnelType}...`}
-                  onChange={(e) => this.handleInputChange(e.currentTarget.value)}
-                />
-                <button
-                  className="btn btn-primary"
-                  onClick={() => this.handleSearch(searchInput)}
-                >
-                  <i className="fa fa-search"></i>
-                </button>
+            </div>
+            {
+              warningMessage !== "" && 
+              <div className="alert alert-warning" role="alert">
+                {warningMessage}
               </div>
-              {
-                searchResults.length > 0 &&
-                  <ul className="list-group">
-                  {
-                    searchResults.map((user, index) => {
-                      return (
-                        <li
-                          key={`search-user-result-${index}`}
-                          className="list-group-item d-flex flex-row justify-content-between"
+            }
+            {
+              searchResults.length > 0 &&
+                <ul className="list-group">
+                {
+                  searchResults.map((user, index) => {
+                    return (
+                      <li
+                        key={`search-user-result-${index}`}
+                        className="list-group-item d-flex flex-row justify-content-between"
+                      >
+                        <div className="mt-1">{`${user.name} (${user.email})`}</div>
+                        <button
+                          className="btn btn-sm btn-primary ml-2"
+                          onClick={() => this.handleAddUser(user)}
                         >
-                          <div className="mt-1">{`${user.name} (${user.email})`}</div>
-                          <button
-                            className="btn btn-sm btn-primary ml-2"
-                            onClick={() => this.handleAddUser(user)}
-                          >
-                            Add
-                          </button>
-                        </li>
-                      );
-                    })
-                  }
-                </ul>
-              }
-            </div>
-          }
-        <div className="d-flex flex-row">
-          <h4 className="mt-3 mb-2">{personnelType}</h4>
-          {canUpdate && <span className="ml-2 mt-4 mb-3 badge badge-sm badge-light">* Click the Update button on top to submit changes.</span>}
-        </div>
-        <ProjectUserTable
-          users={users}
-          onDelete={this.handleDeleteUser}
-          canUpdate={canUpdate}
-        />
+                          Add
+                        </button>
+                      </li>
+                    );
+                  })
+                }
+              </ul>
+            }
+          </div>
+        }
+        {
+          users.length > 0 &&
+          <ProjectUserTable
+            users={users}
+            onDelete={this.handleDeleteUser}
+            canUpdate={canUpdate}
+          />
+        }
+        {
+          users.length === 0 && !canUpdate && 
+          <div className="alert alert-primary" role="alert">
+            {`This project has no ${personnelType}.`}
+          </div>
+        }
+        {
+          canUpdate &&
+          <button className="btn btn-primary mt-3" onClick={this.props.onPersonnelUpdate}>
+            Save
+          </button>
+        }
       </div>
     );
   }

diff --git a/src/components/Project/ProjectProfile.jsx b/src/components/Project/ProjectProfile.jsx
@@ -56,12 +56,12 @@ class ProjectProfile extends Component {
             </tr>
             <tr>
               <td>
-                Project Tags <a href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions" target="_blank" rel="noreferrer" className="ml-1">
+              Project Permissions <a href="https://learn.fabric-testbed.net/knowledge-base/fabric-user-roles-and-project-permissions/#project-permissions" target="_blank" rel="noreferrer" className="ml-1">
                   <i className="fa fa-question-circle mx-2"></i>
                 </a>
               </td>
               <td>
-                { project.tags.length > 0 ? this.renderTags(project.tags) : "No tag" }
+                { project.tags.length > 0 ? this.renderTags(project.tags) : "No permissions assigned" }
               </td>
             </tr>
             {basicInfoRows.map((row, index) => {

diff --git a/src/components/Project/ProjectUserTable.jsx b/src/components/Project/ProjectUserTable.jsx
@@ -68,6 +68,7 @@ class ProjectUserTable extends Component {
   render() {
     const { pageSize, currentPage, sortColumn } = this.state;
     const { totalCount, data } = this.getPageData();
+    const { canUpdate } = this.props;
 
     return (
       <div>
@@ -76,6 +77,7 @@ class ProjectUserTable extends Component {
           data={data}
           sortColumn={sortColumn}
           onSort={this.handleSort}
+          size={canUpdate ? "sm" : "md"}
         />
         <Pagination
           itemsCount={totalCount}

diff --git a/src/components/Project/ProjectsTable.jsx b/src/components/Project/ProjectsTable.jsx
@@ -97,6 +97,7 @@ class ProjectsTable extends Component {
       <Table
         columns={cols}
         data={projects}
+        size={"md"}
       />
     );
   }

diff --git a/src/components/Resource/DetailTable.jsx b/src/components/Resource/DetailTable.jsx
@@ -13,7 +13,7 @@ const generateProgressBar = (total, free) => {
 const DetailTable = props => {
   const {name, resource} = props;
   const rows = [
-    ["Core", "totalCore", "freeCore"],
+    ["Cores", "totalCore", "freeCore"],
     ["Disk (GB)", "totalDisk", "freeDisk"],
     ["RAM (GB)", "totalRAM", "freeRAM"],
     ["GPU", "totalGPU", "freeGPU"],

diff --git a/src/components/Resource/SummaryTable.jsx b/src/components/Resource/SummaryTable.jsx
@@ -7,9 +7,9 @@ class SummaryTable extends Component {
       path: "name",
       label: "Site",
     },
-    { path: ["freeCore", "totalCore"], label: "Core" },
-    { path: ["freeDisk", "totalDisk"], label: "Disk" },
-    { path: ["freeRAM", "totalRAM"], label: "RAM" },
+    { path: ["freeCore", "totalCore"], label: "Cores" },
+    { path: ["freeDisk", "totalDisk"], label: "Disk(GB)" },
+    { path: ["freeRAM", "totalRAM"], label: "RAM(GB)" },
     { path: ["freeGPU", "totalGPU"], label: "GPU" },
     { path: ["freeNVME", "totalNVME"], label: "NVME" },
     { path: ["freeSmartNIC", "totalSmartNIC"], label: "SmartNIC" },
@@ -25,6 +25,7 @@ class SummaryTable extends Component {
         data={resources}
         sortColumn={sortColumn}
         onSort={onSort}
+        size={"md"}
       />
     );
   }

diff --git a/src/components/Resource/TestbedTable.jsx b/src/components/Resource/TestbedTable.jsx
@@ -2,9 +2,9 @@ import React, { Component } from "react";
 
 class TestbedTable extends Component {
   columns = [
-    { path: ["freeCore", "totalCore"], label: "Core" },
-    { path: ["freeDisk", "totalDisk"], label: "Disk" },
-    { path: ["freeRAM", "totalRAM"], label: "RAM" },
+    { path: ["freeCore", "totalCore"], label: "Cores" },
+    { path: ["freeDisk", "totalDisk"], label: "Disk(GB)" },
+    { path: ["freeRAM", "totalRAM"], label: "RAM(GB)" },
     { path: ["freeGPU", "totalGPU"], label: "GPU" },
     { path: ["freeNVME", "totalNVME"], label: "NVME" },
     { path: ["freeSmartNIC", "totalSmartNIC"], label: "SmartNIC" },

diff --git a/src/components/Slice/SlicesTable.jsx b/src/components/Slice/SlicesTable.jsx
@@ -39,6 +39,7 @@ class SlicesTable extends Component {
         data={slices}
         sortColumn={sortColumn}
         onSort={onSort}
+        size={"md"}
       />
     );
   }

diff --git a/src/components/SliceViewer/DetailForm.jsx b/src/components/SliceViewer/DetailForm.jsx
@@ -34,15 +34,15 @@ export default class DetailForm extends Component {
                   <input type="text" className="form-control" defaultValue={data.properties.name} disabled/>
                 </div>
                 <div className="row mb-2">
-                  <label>Core</label>
+                  <label>Cores</label>
                   <input type="number" className="form-control" defaultValue={data.capacities.core} disabled/>
                 </div>
                 <div className="row mb-2">
-                  <label>Ram</label>
+                  <label>RAM(GB)</label>
                   <input type="number" className="form-control" defaultValue={data.capacities.ram} disabled/>
                 </div>
                 <div className="row mb-2">
-                  <label>Disk</label>
+                  <label>Disk(GB)</label>
                   <input type="number" className="form-control" defaultValue={data.capacities.disk} disabled />
                 </div>
               </div>

diff --git a/src/components/SliceViewer/NewSliceDetailForm.jsx b/src/components/SliceViewer/NewSliceDetailForm.jsx
@@ -177,15 +177,15 @@ export default class NewSliceDetailForm extends Component {
                     <input type="text" className="form-control form-control-sm" defaultValue={data.properties.name} onChange={this.handleNameChange}/>
                   </div>
                   <div className="col-2 mb-2">
-                    <label className="slice-builder-label">Core</label>
+                    <label className="slice-builder-label">Cores</label>
                     <input type="number" className="form-control form-control-sm" defaultValue={JSON.parse(data.capacities).core} onChange={this.handleCoreChange}/>
                   </div>
                   <div className="col-2 mb-2">
-                    <label className="slice-builder-label">Ram</label>
+                    <label className="slice-builder-label">RAM(GB)</label>
                     <input type="number" className="form-control form-control-sm" defaultValue={JSON.parse(data.capacities).ram} onChange={this.handleRamChange}/>
                   </div>
                   <div className="col-2 mb-2">
-                    <label className="slice-builder-label">Disk</label>
+                    <label className="slice-builder-label">Disk(GB)</label>
                     <input type="number" className="form-control form-control-sm" defaultValue={JSON.parse(data.capacities).disk} onChange={this.handleDiskChange}/>
                   </div>
                   <div className="col-1 pt-4 pb-2 d-flex flex-row">

diff --git a/src/components/SliceViewer/ProjectTags.jsx b/src/components/SliceViewer/ProjectTags.jsx
@@ -62,7 +62,7 @@ export default class SideLinks extends Component {
       const project = res.results[0];
       this.setState({ tags: project.tags, showSpinner: false});
     } catch (err) {
-      toast.error("Failed to load the tags of this project. Please re-select a project.");
+      toast.error("Failed to load the permissions of this project. Please re-select a project.");
     }
   }
 

diff --git a/src/components/SliceViewer/SideNodes.jsx b/src/components/SliceViewer/SideNodes.jsx
@@ -214,7 +214,7 @@ class SideNodes extends React.Component {
                     value={core} onChange={this.handleCoreChange}/>
                 </div>
                 <div className="form-group slice-builder-form-group col-md-2">
-                  <label htmlFor="inputRam" className="slice-builder-label">Ram(GB)</label>
+                  <label htmlFor="inputRam" className="slice-builder-label">RAM(GB)</label>
                   <input type="number" className="form-control form-control-sm" id="inputRam"
                     value={ram} onChange={this.handleRamChange}/>
                 </div>

diff --git a/src/components/SliceViewer/SiteResourceTable.jsx b/src/components/SliceViewer/SiteResourceTable.jsx
@@ -4,7 +4,7 @@ const SiteResourceTable = props => {
       <thead>
         <tr>
           <th scope="col">Cores</th>
-          <th scope="col">Ram(GB)</th>
+          <th scope="col">RAM(GB)</th>
           <th scope="col">Disk(GB)</th>
           <th scope="col">GPU</th>
           <th scope="col">SmartNIC</th>

diff --git a/src/components/UserProfile/MyProfile.jsx b/src/components/UserProfile/MyProfile.jsx
@@ -14,11 +14,6 @@ class MyProfile extends Form {
       website: ""
     },
     user: {},
-    pronounsOptions: [
-      { "_id": 1, "name": "She/her"},
-      { "_id": 2, "name": "He/him"},
-      { "_id": 3, "name": "They/them"},
-    ],
     errors: {},
     showSpinner: false,
   }
@@ -67,7 +62,7 @@ class MyProfile extends Form {
   };
 
   render() {
-    const { pronounsOptions, showSpinner } = this.state;
+    const { showSpinner } = this.state;
 
     return (
       <div className="col-9">
@@ -76,7 +71,7 @@ class MyProfile extends Form {
           showSpinner ? <SpinnerWithText text={"Updating profile..."} /> :
           <form onSubmit={this.handleSubmit}>
             {this.renderTextarea("bio", "Bio", true)}
-            {this.renderSelect("pronouns", "Pronouns", true, "", pronounsOptions)}
+            {this.renderInput("pronouns", "Pronouns", true)}
             {this.renderInput("job", "Job Title", true)}
             {this.renderInput("website", "Website", true)}
             {this.renderButton("Save")}

diff --git a/src/components/common/Banner.jsx b/src/components/common/Banner.jsx
@@ -5,7 +5,7 @@ const Banner = (props) => {
   return (
     <div className="alert alert-warning alert-dismissible fade show notice-banner" role="alert">
       <strong>{props.notice.title}:</strong> {Parser(props.notice.content)} &nbsp;
-      <a href={props.notice.link} target="_blank">&nbsp;&gt;&gt;&gt;More details...</a>
+      <a href={props.notice.link} target="_blank" rel="noreferrer">&nbsp;&gt;&gt;&gt;More details...</a>
       <button type="button" className="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
-Original file line number
+Diff line change
@@ Expand Up / @@ -97,6 +97,7 @@ class ProjectsTable extends Component { @@
           <Table
             columns={cols}
             data={projects}
+            size={"md"}
           />
         );
       }
@@ Expand Down @@