From f9d5d0a2c3431526079c08626c6ecdd518ecb9c6 Mon Sep 17 00:00:00 2001
From: Jesse Chan <jc@linux.com>
Date: Sat, 31 Oct 2020 22:44:24 +0800
Subject: [PATCH] DownloadRulesTab: display form right under the editing rule

---
 .../modals/feeds-modal/DownloadRulesTab.tsx   | 49 +++++++++++++++----
 1 file changed, 39 insertions(+), 10 deletions(-)

diff --git a/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx b/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx
index 68420774..8bf8388e 100644
--- a/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx
+++ b/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx
@@ -370,22 +370,41 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
     );
   }
 
-  getRulesList() {
+  getRulesList(): [React.ReactNode, React.ReactNode] {
     const {rules} = FeedStore;
 
     if (rules.length === 0) {
-      return (
-        <ul className="interactive-list">
+      return [
+        <ul className="interactive-list" key="before-editing">
           <li className="interactive-list__item">
             <FormattedMessage id="feeds.no.rules.defined" />
           </li>
-        </ul>
-      );
+        </ul>,
+        null,
+      ];
     }
 
     const rulesList = rules.map((rule) => this.getRulesListItem(rule));
 
-    return <ul className="interactive-list">{rulesList}</ul>;
+    if (this.state.currentlyEditingRule == null || this.state.currentlyEditingRule === defaultRule) {
+      return [
+        <ul className="interactive-list" key="before-editing">
+          {rulesList}
+        </ul>,
+        null,
+      ];
+    }
+
+    const editingRuleIndex = rules.indexOf(this.state.currentlyEditingRule as Rule);
+
+    return [
+      <ul className="interactive-list" key="before-editing">
+        {rulesList.slice(0, editingRuleIndex + 1)}
+      </ul>,
+      <ul className="interactive-list" key="after-editing">
+        {rulesList.slice(editingRuleIndex + 1)}
+      </ul>,
+    ];
   }
 
   handleFormChange = ({
@@ -500,6 +519,8 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
       });
     }
 
+    const [listBeforeEditingRule, listAfterEditingRule] = this.getRulesList();
+
     return (
       <Form
         className="inverse"
@@ -512,10 +533,18 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
           <FormattedMessage id="feeds.existing.rules" />
         </ModalFormSectionHeader>
         {errors}
-        <FormRow>
-          <FormRowItem>{this.getRulesList()}</FormRowItem>
-        </FormRow>
-        {this.state.currentlyEditingRule ? (
+        {listAfterEditingRule == null ? (
+          <FormRow>
+            <FormRowItem>{listBeforeEditingRule}</FormRowItem>
+          </FormRow>
+        ) : (
+          <FormRowGroup>
+            <FormRow>{listBeforeEditingRule}</FormRow>
+            {this.getModifyRuleForm(this.state.currentlyEditingRule as Partial<Rule>)}
+            <FormRow>{listAfterEditingRule}</FormRow>
+          </FormRowGroup>
+        )}
+        {this.state.currentlyEditingRule && listAfterEditingRule == null ? (
           this.getModifyRuleForm(this.state.currentlyEditingRule)
         ) : (
           <FormRow>