From 87b1b8cd9b9e961b8edf86c4549ee01e87f8e336 Mon Sep 17 00:00:00 2001
From: efuller <eric@alley.co>
Date: Tue, 19 Nov 2024 10:53:17 -0500
Subject: [PATCH] Add in ability to hide columns

---
 assets/js/admin-settings/index.jsx |   4 +-
 assets/js/admin-settings/rule.jsx  | 239 ++++++++++++++++-------------
 2 files changed, 135 insertions(+), 108 deletions(-)

diff --git a/assets/js/admin-settings/index.jsx b/assets/js/admin-settings/index.jsx
index 148cf90b..dcb463a4 100644
--- a/assets/js/admin-settings/index.jsx
+++ b/assets/js/admin-settings/index.jsx
@@ -92,6 +92,7 @@ function AdminSettings() {
    */
   const generateRule = (item, index) => {
     const hideFieldTypes = item.field === LINK_SECTIONS ? allFieldsButSections : sectionsOnly;
+    const hideColumns = item.field === LINK_SECTIONS ? ['field'] : [];
 
     return (
       <Rule
@@ -117,6 +118,7 @@ function AdminSettings() {
         value={item.value}
         index={index}
         hideFieldTypes={hideFieldTypes}
+        hideColumns={hideColumns}
       />
     );
   };
@@ -150,7 +152,7 @@ function AdminSettings() {
           <tr>
             <th id="apple-news-automation-column-taxonomy" scope="col">{__('Taxonomy', 'apple-news')}</th>
             <th id="apple-news-automation-column-term" scope="col">{__('Term', 'apple-news')}</th>
-            <th id="apple-news-automation-column-value" scope="col">{__('Value', 'apple-news')}</th>
+            <th id="apple-news-automation-column-value" scope="col">{__('Section', 'apple-news')}</th>
             <th id="apple-news-automation-column-delete" scope="col">{__('Delete?', 'apple-news')}</th>
           </tr>
         </thead>
diff --git a/assets/js/admin-settings/rule.jsx b/assets/js/admin-settings/rule.jsx
index f03c6d62..e06b0a54 100644
--- a/assets/js/admin-settings/rule.jsx
+++ b/assets/js/admin-settings/rule.jsx
@@ -23,6 +23,7 @@ function Rule({
   value,
   index,
   hideFieldTypes,
+  hideColumns,
 }) {
   const {
     fields,
@@ -73,124 +74,148 @@ function Rule({
       draggable
       onDragEnd={onDragEnd}
     >
-      <td>
-        <SelectControl
-          aria-labelledby="apple-news-automation-column-taxonomy"
-          disabled={busy}
-          onChange={(next) => onUpdate('taxonomy', next)}
-          options={[
-            { value: '', label: __('Select Taxonomy', 'apple-news') },
-            ...Object.keys(taxonomies).map((tax) => ({ value: tax, label: tax })),
-          ]}
-          value={taxonomy}
-        />
-      </td>
-      <td>
-        <TermSelector
-          aria-labelledby="apple-news-automation-column-term"
-          disabled={busy}
-          onChange={(next) => onUpdate('term_id', next)}
-          taxonomy={taxonomy}
-          termId={termId}
-        />
-      </td>
-      <td>
-        <SelectControl
-          aria-labelledby="apple-news-automation-column-field"
-          disabled={busy}
-          onChange={(next) => onUpdate('field', next)}
-          options={getFieldTypes()}
-          value={field}
-        />
-      </td>
-      <td>
-        {fieldType === 'contentGenerationType' ? (
-          <SelectControl
-            aria-labelledby="apple-news-automation-column-value"
-            disabled={busy}
-            onChange={(next) => onUpdate('value', next)}
-            options={[
-              { value: '', label: __('None', 'apple-news') },
-              { value: 'AI', label: __('AI', 'apple-news') },
-            ]}
-            value={value}
-          />
-        ) : null}
-        {fieldType === 'sections' ? (
-          <SelectControl
-            aria-labelledby="apple-news-automation-column-value"
-            disabled={busy}
-            onChange={(next) => onUpdate('value', next)}
-            options={[
-              { value: '', label: __('Select Section', 'apple-news') },
-              ...sections.map((sect) => ({ value: sect.id, label: sect.name })),
-            ]}
-            value={value}
-          />
-        ) : null}
-        {fieldType === 'boolean-select' ? (
-          <SelectControl
-            aria-labelledby="apple-news-automation-column-value"
-            disabled={busy}
-            onChange={(next) => onUpdate('value', next)}
-            options={[
-              { value: '', label: __('Channel Default', 'apple-news') },
-              { value: 'true', label: __('True', 'apple-news') },
-              { value: 'false', label: __('False', 'apple-news') },
-            ]}
-            value={value}
-          />
-        ) : null}
-        {fieldType === 'boolean' ? (
-          <ToggleControl
-            aria-labelledby="apple-news-automation-column-value"
-            checked={value === 'true'}
-            disabled={busy}
-            label=""
-            onChange={(next) => onUpdate('value', next.toString())}
-          />
-        ) : null}
-        {fieldType === 'string' ? (
-          <TextControl
-            aria-labelledby="apple-news-automation-column-value"
-            disabled={busy}
-            onChange={(next) => onUpdate('value', next)}
-            value={value}
-          />
-        ) : null}
-        {fieldType === 'themes' ? (
-          <SelectControl
-            aria-labelledby="apple-news-automation-column-value"
-            disabled={busy}
-            onChange={(next) => onUpdate('value', next)}
-            options={[
-              { value: '', label: __('Select Theme', 'apple-news') },
-              ...themes.map((name) => ({ value: name, label: name })),
-            ]}
-            value={value}
-          />
-        ) : null}
-      </td>
-      <td>
-        <Button
-          disabled={busy}
-          isDestructive
-          onClick={onDelete}
-        >
-          {__('Delete Rule', 'apple-news')}
-        </Button>
-      </td>
+      {
+        hideColumns.includes('taxonomy')
+          ? null
+          : (
+            <td>
+              <SelectControl
+                aria-labelledby="apple-news-automation-column-taxonomy"
+                disabled={busy}
+                onChange={(next) => onUpdate('taxonomy', next)}
+                options={[
+                  { value: '', label: __('Select Taxonomy', 'apple-news') },
+                  ...Object.keys(taxonomies).map((tax) => ({ value: tax, label: tax })),
+                ]}
+                value={taxonomy}
+              />
+            </td>
+          )
+      }
+      {
+        hideColumns.includes('term') ? null : (
+          <td>
+            <TermSelector
+              aria-labelledby="apple-news-automation-column-term"
+              disabled={busy}
+              onChange={(next) => onUpdate('term_id', next)}
+              taxonomy={taxonomy}
+              termId={termId}
+            />
+          </td>
+        )
+      }
+      {
+        hideColumns.includes('field') ? null : (
+          <td>
+            <SelectControl
+              aria-labelledby="apple-news-automation-column-field"
+              disabled={busy}
+              onChange={(next) => onUpdate('field', next)}
+              options={getFieldTypes()}
+              value={field}
+            />
+          </td>
+        )
+      }
+      {
+        hideColumns.includes('value') ? null : (
+          <td>
+            {fieldType === 'contentGenerationType' ? (
+              <SelectControl
+                aria-labelledby="apple-news-automation-column-value"
+                disabled={busy}
+                onChange={(next) => onUpdate('value', next)}
+                options={[
+                  { value: '', label: __('None', 'apple-news') },
+                  { value: 'AI', label: __('AI', 'apple-news') },
+                ]}
+                value={value}
+              />
+            ) : null}
+            {fieldType === 'sections' ? (
+              <SelectControl
+                aria-labelledby="apple-news-automation-column-value"
+                disabled={busy}
+                onChange={(next) => onUpdate('value', next)}
+                options={[
+                  { value: '', label: __('Select Section', 'apple-news') },
+                  ...sections.map((sect) => ({ value: sect.id, label: sect.name })),
+                ]}
+                value={value}
+              />
+            ) : null}
+            {fieldType === 'boolean-select' ? (
+              <SelectControl
+                aria-labelledby="apple-news-automation-column-value"
+                disabled={busy}
+                onChange={(next) => onUpdate('value', next)}
+                options={[
+                  { value: '', label: __('Channel Default', 'apple-news') },
+                  { value: 'true', label: __('True', 'apple-news') },
+                  { value: 'false', label: __('False', 'apple-news') },
+                ]}
+                value={value}
+              />
+            ) : null}
+            {fieldType === 'boolean' ? (
+              <ToggleControl
+                aria-labelledby="apple-news-automation-column-value"
+                checked={value === 'true'}
+                disabled={busy}
+                label=""
+                onChange={(next) => onUpdate('value', next.toString())}
+              />
+            ) : null}
+            {fieldType === 'string' ? (
+              <TextControl
+                aria-labelledby="apple-news-automation-column-value"
+                disabled={busy}
+                onChange={(next) => onUpdate('value', next)}
+                value={value}
+              />
+            ) : null}
+            {fieldType === 'themes' ? (
+              <SelectControl
+                aria-labelledby="apple-news-automation-column-value"
+                disabled={busy}
+                onChange={(next) => onUpdate('value', next)}
+                options={[
+                  { value: '', label: __('Select Theme', 'apple-news') },
+                  ...themes.map((name) => ({ value: name, label: name })),
+                ]}
+                value={value}
+              />
+            ) : null}
+          </td>
+        )
+      }
+      {
+        hideColumns.includes('delete') ? null : (
+          <td>
+            <Button
+              disabled={busy}
+              isDestructive
+              onClick={onDelete}
+            >
+              {__('Delete Rule', 'apple-news')}
+            </Button>
+          </td>
+        )
+      }
     </tr>
   );
 }
 
 Rule.defaultProps = {
+  hideColumns: [],
   hideFieldTypes: [],
 };
 
 Rule.propTypes = {
   busy: PropTypes.bool.isRequired,
   field: PropTypes.string.isRequired,
+  hideColumns: PropTypes.arrayOf(PropTypes.string),
   hideFieldTypes: PropTypes.arrayOf(PropTypes.string),
   index: PropTypes.number.isRequired,
   onDelete: PropTypes.func.isRequired,