Add fetching of required signoffs, finding matching signoffs for the …

…rule and setting signoff summary

ui/src/views/Rules/Rule/index.jsx

@@ -382,6 +382,39 @@ function Rule({ isNewRule, user, ...props }) {
     }
   }, [ruleId, scId]);
 
+  useEffect(() => {
+    fetchRequiredSignoffs(OBJECT_NAMES.PRODUCT_REQUIRED_SIGNOFF).then(
+      rsResponse => {
+        const requiredSignoffs = rsResponse.data.data.required_signoffs;
+
+        if (rule.product) {
+          const matchingRs = requiredSignoffs.filter(rs =>
+            ruleMatchesRequiredSignoff(rule, rs)
+          );
+
+          setRuleRequiredSignoffs(curr => curr.concat(matchingRs));
+
+          if (!requiredSignoffs.length || !matchingRs.length) {
+            setSignoffSummary(' None');
+          } else {
+            const rsSummary = matchingRs.reduce((summary, rs, idx) => {
+              const memberStr = rs.signoffs_required > 1 ? 'members' : 'member';
+              const rsStr = `${rs.signoffs_required} ${memberStr} of ${rs.role}`;
+
+              if (idx !== matchingRs.length - 1) {
+                return `${summary}${rsStr}, `;
+              }
+
+              return summary + rsStr;
+            }, ' ');
+
+            setSignoffSummary(rsSummary);
+          }
+        }
+      }
+    );
+  }, [rule.product, rule.channel]);
+
   const today = new Date();
 
   // This will make sure the helperText