Merge pull request #2369 from lmcnulty/checklisting-pre-demo-ui-fixes

Checklisting minor UI fixes
responsible-ai-collaborative · Oct 23, 2023 · 969036d · 969036d
2 parents 9381fbb + 7d3952a
commit 969036d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 15 deletions.
diff --git a/site/gatsby-site/src/components/checklists/CheckListForm.js b/site/gatsby-site/src/components/checklists/CheckListForm.js
@@ -265,6 +265,7 @@ const QueryTagInput = ({
       labelKey={labelKey}
       placeHolder={placeHolder}
       disabled={!userIsOwner}
+      allowNew={false}
     />
   </div>
 );
@@ -396,7 +397,7 @@ function Info({ children, className }) {
       className={`${className} bg-amber-50 text-amber-900 border border-amber-300 p-4 rounded shadow-md my-4`}
     >
       <button
-        className="border-0 bg-none float-right text-xl pl-4 mt-0 pb-2 -mt-2"
+        className="border-0 bg-none float-right text-xl pl-4 pb-2 -mt-3"
         onClick={() => setHide(true)}
       >
         ×

diff --git a/site/gatsby-site/src/components/checklists/RiskSection.js b/site/gatsby-site/src/components/checklists/RiskSection.js
@@ -77,7 +77,8 @@ export default function RiskSection({
               )}
             >
               <FontAwesomeIcon icon={faComputer} className="mr-1" />
-              Auto-generated
+              <span className="md:hidden">Auto</span>
+              <span className="hidden md:inline">Auto-generated</span>
             </HeaderTextWithIcon>
           ) : (
             <HeaderTextWithIcon
@@ -145,6 +146,7 @@ export default function RiskSection({
                 onChange={(value) => updateRisk(risk, { tags: value })}
                 options={tags}
                 disabled={!userIsOwner}
+                allowNew={false}
               />
             </div>
           </PrecedentsQuery>
@@ -333,7 +335,7 @@ const HeaderItemsGroup = (props) => (
   <div
     {...{
       ...props,
-      className: `hidden md:flex px-2 gap-2 bg-white items-center ${props.className}`,
+      className: `md:flex px-2 gap-2 bg-white items-center ${props.className}`,
     }}
   >
     {props.children}
@@ -452,6 +454,14 @@ const byProperty = (p) => (a, b) => {
     return 1;
   }
 
+  // Not applicable should always be last
+  if (a[p] == 'Not Applicable' && b[p] != 'Not Applicable') {
+    return 1;
+  }
+  if (a[p] != 'Not Applicable' && b[p] == 'Not Applicable') {
+    return -1;
+  }
+
   // Sort numerically if you can.
   const [numA, numB] = [Number(a[p]), Number(b[p])];
 

diff --git a/site/gatsby-site/src/components/forms/Tags.js b/site/gatsby-site/src/components/forms/Tags.js
@@ -12,6 +12,7 @@ export default function Tags({
   labelKey,
   options,
   className,
+  allowNew = true,
   stayOpen = false,
 }) {
   const [open, setOpen] = useState(false);
@@ -44,7 +45,6 @@ export default function Tags({
         }
         setOpen(false);
       }}
-      allowNew
       multiple
       open={open && stayOpen ? true : undefined}
       renderMenu={options ? undefined : () => null}
@@ -57,6 +57,7 @@ export default function Tags({
         labelKey,
         ref,
         id,
+        allowNew,
       }}
     />
   );

diff --git a/site/gatsby-site/src/utils/checklists.js b/site/gatsby-site/src/utils/checklists.js
@@ -21,7 +21,7 @@ const riskStatusFeatures = {
     color: 'gray',
   },
   'Not Applicable': {
-    icons: faShield,
+    icon: faShield,
     color: 'gray',
   },
 };
@@ -83,7 +83,7 @@ const exportJson = (checklist) => {
 
   const a = document.createElement('a');
 
-  a.setAttribute('href', 'data:text/json,' + json);
+  a.setAttribute('href', 'data:text/json,' + encodeURIComponent(json));
   a.setAttribute('download', `${checklist.name} - Risk Checklist.json`);
   a.click();
 };
@@ -179,11 +179,11 @@ const exportHtml = (checklist) => {
                     <div className="value">{risk.severity}</div>
                   </section>
                 )}
-                {risk.notes && (
+                {risk.risk_notes && (
                   <section className="notes">
                     <h4 className="title">Notes</h4>
                     <div className="value text" style={{ whiteSpace: 'pre-wrap' }}>
-                      {risk.notes}
+                      {risk.risk_notes}
                     </div>
                   </section>
                 )}
@@ -222,9 +222,9 @@ const exportCsv = (checklist) => {
   const csv = rowsToCsv([
     ['Title', checklist.name],
     ['About', checklist.about],
-    ['Goals Tags', checklist.tags_goals],
-    ['Methods Tags', checklist.tags_methods],
-    ['Other Tags', checklist.tags_other],
+    ['Goals Tags', (checklist.tags_goals || []).join(', ')],
+    ['Methods Tags', (checklist.tags_methods || []).join(', ')],
+    ['Other Tags', (checklist.tags_other || []).join(', ')],
     [''],
     ['== Risks =='],
     [''],
@@ -235,8 +235,8 @@ const exportCsv = (checklist) => {
         ['Status', /*        */ r.risk_status],
         ['Severity', /*      */ r.severity],
         ['Likelihood', /*    */ r.likelihood],
-        ['Precedents (AIID #)', r.precedents.map((p) => p.incident_id)],
-        ['Notes', /*         */ r.notes],
+        ['Precedents (AIID #)', (r.precedents || []).map((p) => p.incident_id).join(', ')],
+        ['Notes', /*         */ r.risk_notes],
 
         // Show headings in first row, values in rest
       ].map((pair) => (i == 0 ? pair[0] : pair[1]))
@@ -283,8 +283,8 @@ const DeleteButton = (props) => (
 
 const shouldBeGrouped = (tag1, tag2) => {
   if (tag1 == tag2) return true;
-  if (tag1.slice(0, 3) == ' GMF' && tag2.slice(0, 3) == 'GMF') {
-    const removeKnownPotential = (tag) => tag.replace('GMF:Known', '').replace('GMF:Potential');
+  if (tag1.slice(0, 3) == 'GMF' && tag2.slice(0, 3) == 'GMF') {
+    const removeKnownPotential = (tag) => tag.replace('GMF:Known', '').replace('GMF:Potential', '');
 
     if (removeKnownPotential(tag1) == removeKnownPotential(tag2)) {
       return true;