Add in the ability to hide field types from the field dropdown

alleyinteractive · Nov 18, 2024 · 9df0eb6 · 9df0eb6
1 parent 891b751
commit 9df0eb6
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 36 deletions.
diff --git a/assets/js/admin-settings/index.jsx b/assets/js/admin-settings/index.jsx
@@ -81,37 +81,47 @@ function AdminSettings() {
     updateSettings(updatedRules);
   };
 
+  /**
+   * Generates a rule component.
+   * @param {object} item - The rule object.
+   * @param {number} index - The index of the rule.
+   * @param {array} hideFieldValues - An array of field values to hide.
+   * @return {React.JSX.Element}
+   */
+  const generateRule = (item, index, hideFieldValues = []) => (
+    <Rule
+      busy={busy}
+      field={item.field}
+      key={index} // eslint-disable-line react/no-array-index-key
+      onDelete={() => updateSettings(deleteAtIndex(ruleList, index))}
+      onDragEnd={(e) => {
+        const targetRow = document
+          .elementFromPoint(e.clientX, e.clientY)
+          .closest('.apple-news-automation-row');
+        // Checking for the parent element ensures that the row is in the same table.
+        if (targetRow && targetRow.parentElement === e.currentTarget.parentElement) {
+          reorderRule(
+            Number(e.currentTarget.dataset.index),
+            Number(targetRow.dataset.index),
+          );
+        }
+      }}
+      onUpdate={(key, value) => updateRule(index, key, value)}
+      taxonomy={item.taxonomy}
+      termId={item.term_id}
+      value={item.value}
+      index={index}
+      hideFieldTypes={hideFieldValues}
+    />
+  );
+
   // Split the rows into sections and non-sections.
   ruleList.forEach((item, index) => {
-    const row = (
-      <Rule
-        busy={busy}
-        field={item.field}
-        key={index} // eslint-disable-line react/no-array-index-key
-        onDelete={() => updateSettings(deleteAtIndex(ruleList, index))}
-        onDragEnd={(e) => {
-          const targetRow = document
-            .elementFromPoint(e.clientX, e.clientY)
-            .closest('.apple-news-automation-row');
-          // Checking for the parent element ensures that the row is in the same table.
-          if (targetRow && targetRow.parentElement === e.currentTarget.parentElement) {
-            reorderRule(
-              Number(e.currentTarget.dataset.index),
-              Number(targetRow.dataset.index),
-            );
-          }
-        }}
-        onUpdate={(key, value) => updateRule(index, key, value)}
-        taxonomy={item.taxonomy}
-        termId={item.term_id}
-        value={item.value}
-        index={index}
-      />
-    );
     if (item.field === 'links.sections') {
-      sectionAutomationRows.push(row);
+      const allFieldsButSections = Object.keys(fields).filter((field) => field !== 'links.sections');
+      sectionAutomationRows.push(generateRule(item, index, allFieldsButSections));
     } else {
-      additionalAutomationRows.push(row);
+      additionalAutomationRows.push(generateRule(item, index, ['links.sections']));
     }
   });
 
@@ -128,7 +138,6 @@ 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-field" scope="col">{__('Field', 'apple-news')}</th>
             <th id="apple-news-automation-column-value" scope="col">{__('Value', 'apple-news')}</th>
             <th id="apple-news-automation-column-delete" scope="col">{__('Delete?', 'apple-news')}</th>
           </tr>

diff --git a/assets/js/admin-settings/rule.jsx b/assets/js/admin-settings/rule.jsx
@@ -22,6 +22,7 @@ function Rule({
   termId,
   value,
   index,
+  hideFieldTypes,
 }) {
   const {
     fields,
@@ -44,6 +45,27 @@ function Rule({
     fieldType = 'string';
   }
 
+  /**
+   * Get field type options.
+   */
+  const getFieldTypes = () => {
+    // Filter out field types that should be hidden.
+    const filteredFieldsObject = Object.keys(fields).reduce((acc, fieldSlug) => {
+      if (!hideFieldTypes.includes(fieldSlug)) {
+        acc[fieldSlug] = fields[fieldSlug];
+      }
+      return acc;
+    }, {});
+
+    return [
+      { value: '', label: __('Select Field', 'apple-news') },
+      ...Object.keys(filteredFieldsObject).map((fieldSlug) => ({
+        label: fields[fieldSlug].label,
+        value: fieldSlug,
+      })),
+    ];
+  };
+
   return (
     <tr
       className="apple-news-automation-row"
@@ -77,13 +99,7 @@ function Rule({
           aria-labelledby="apple-news-automation-column-field"
           disabled={busy}
           onChange={(next) => onUpdate('field', next)}
-          options={[
-            { value: '', label: __('Select Field', 'apple-news') },
-            ...Object.keys(fields).map((fieldSlug) => ({
-              label: fields[fieldSlug].label,
-              value: fieldSlug,
-            })),
-          ]}
+          options={getFieldTypes()}
           value={field}
         />
       </td>
@@ -168,16 +184,21 @@ function Rule({
   );
 }
 
+Rule.defaultProps = {
+  hideFieldTypes: [],
+};
+
 Rule.propTypes = {
   busy: PropTypes.bool.isRequired,
   field: PropTypes.string.isRequired,
+  hideFieldTypes: PropTypes.arrayOf(PropTypes.string),
+  index: PropTypes.number.isRequired,
   onDelete: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
   taxonomy: PropTypes.string.isRequired,
   termId: PropTypes.number.isRequired,
   value: PropTypes.string.isRequired,
-  index: PropTypes.number.isRequired,
 };
 
 export default Rule;