Fix notes field breaking table in classifications editor preview (#3055)

responsible-ai-collaborative · Sep 9, 2024 · 2883429 · 2883429
1 parent 4276f5d
commit 2883429
Showing 1 changed file with 29 additions and 26 deletions.
diff --git a/site/gatsby-site/src/components/taxa/Taxonomy.js b/site/gatsby-site/src/components/taxa/Taxonomy.js
@@ -112,28 +112,27 @@ const Taxonomy = ({ taxonomy, incidentId, reportNumber, canEdit, initialEditing
                 ${singleColumn ? 'grid-cols-[1fr_3fr]' : 'lg:grid-cols-[repeat(4,_auto)]'}
               `}
               >
-                {canEdit && (
-                  <div key={'NOTES'} className="tw-classification-container">
-                    <div className="tw-field">
-                      <Tooltip content={'Admin notes'}>
-                        <p>{'Notes'}</p>
-                      </Tooltip>
-                    </div>
-                    <Markdown>{taxonomy.notes}</Markdown>
-                  </div>
-                )}
-                {(showAllClassifications ? taxonomy.classificationsArray : topClassifications)
-                  .filter(
-                    (field) => !(field.renderAs === 'description_toggle' && field.value == 'No')
+                {['dummy-notes']
+                  .concat(
+                    (showAllClassifications
+                      ? taxonomy.classificationsArray
+                      : topClassifications.slice(canEdit ? 1 : 0)
+                    )
+                      .filter(
+                        (field) => !(field.renderAs === 'description_toggle' && field.value == 'No')
+                      )
+                      .map((field) => {
+                        if (field.renderAs === 'description_toggle') {
+                          return { ...field, value: field.longDescription };
+                        }
+
+                        return field;
+                      })
                   )
-                  .map((field) => {
-                    if (field.renderAs === 'description_toggle') {
-                      return { ...field, value: field.longDescription };
-                    }
-
-                    return field;
-                  })
+                  .filter((field) => canEdit || field !== 'dummy-notes')
                   .map((field, i) => {
+                    const showNotes = field === 'dummy-notes';
+
                     const isFirst = singleColumn ? i == 0 : i < 2;
 
                     const isLast = singleColumn
@@ -154,11 +153,15 @@ const Taxonomy = ({ taxonomy, incidentId, reportNumber, canEdit, initialEditing
                           ${isLast ? 'border-b-0' : ''} 
                         `}
                         >
-                          <Tooltip content={field.shortDescription}>
-                            <p>
-                              {field.name} {field.renderAs}
-                            </p>
-                          </Tooltip>
+                          {showNotes ? (
+                            <p>Notes</p>
+                          ) : (
+                            <Tooltip content={field.shortDescription}>
+                              <p>
+                                {field.name} {field.renderAs}
+                              </p>
+                            </Tooltip>
+                          )}
                         </div>
                         <Markdown
                           className={`
@@ -172,7 +175,7 @@ const Taxonomy = ({ taxonomy, incidentId, reportNumber, canEdit, initialEditing
                           ${isLast ? 'border-b-0' : ''}
                         `}
                         >
-                          {field.value}
+                          {showNotes ? taxonomy.notes : field.value}
                         </Markdown>
                       </>
                     );