feat: clear-choice-button

Author: tractorss

web/src/components/DisputeFeatures/GroupsUI.tsx

@@ -3,6 +3,8 @@ import styled from "styled-components";
 
 import { Group } from "consts/disputeFeature";
 
+import LightButton from "../LightButton";
+
 const Container = styled.div`
   width: 100%;
   display: flex;
@@ -18,9 +20,12 @@ const HeaderContainer = styled.div`
 `;
 
 const Header = styled.h2`
+  display: flex;
   font-size: 16px;
   font-weight: 600;
   margin: 0;
+  align-items: center;
+  gap: 8px;
 `;
 
 const SubTitle = styled.p`
@@ -30,21 +35,39 @@ const SubTitle = styled.p`
   margin: 0;
 `;
 
-export type GroupUI = (props: { children: JSX.Element }) => JSX.Element;
+const StyledLightButton = styled(LightButton)`
+  padding: 0 !important;
+  .button-text {
+    color: ${({ theme }) => theme.primaryBlue};
+    font-size: 14px;
+  }
+  :hover {
+    background-color: transparent !important;
+    .button-text {
+      color: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;
+
+export type GroupUI = (props: { children: JSX.Element; clearAll: () => void }) => JSX.Element;
 export const GroupsUI: Record<Group, GroupUI> = {
-  [Group.Voting]: ({ children }) => (
+  [Group.Voting]: ({ children, clearAll }) => (
     <Container key={Group.Voting}>
       <HeaderContainer>
-        <Header>Shielded Voting</Header>
+        <Header>
+          Shielded Voting <StyledLightButton text="Clear" onClick={clearAll} />
+        </Header>
         <SubTitle>This feature hides the jurors votes until the end of the voting period.</SubTitle>
       </HeaderContainer>
       {children}
     </Container>
   ),
-  [Group.Eligibility]: ({ children }) => (
+  [Group.Eligibility]: ({ children, clearAll }) => (
     <Container key={Group.Eligibility}>
       <HeaderContainer>
-        <Header>Jurors Eligibility</Header>
+        <Header>
+          Jurors Eligibility <StyledLightButton text="Clear" onClick={clearAll} />
+        </Header>
         <SubTitle>This feature determines who can be selected as a juror.</SubTitle>
       </HeaderContainer>
       {children}

web/src/pages/Resolver/Parameters/Court/FeatureSelection/index.tsx

@@ -11,6 +11,7 @@ import {
   findMatchingKits,
   getDisabledOptions,
   getVisibleFeaturesForCourt,
+  Group,
   toggleFeature,
 } from "consts/disputeFeature";
 import { IGatedDisputeData, useNewDisputeContext } from "context/NewDisputeContext";
@@ -101,6 +102,17 @@ const FeatureSelection: React.FC = () => {
     });
   };
 
+  const handleGroupDisable = (group: Group) => {
+    const groupFeatures = courtGroups[group];
+    // we have a feature selected from this group
+    for (const feature of groupFeatures) {
+      if (selected.includes(feature)) {
+        // turn off this feature
+        handleToggle(feature);
+      }
+    }
+  };
+
   // if each group only has one feature, select them by default
   // This should not clash with the initial selection logic,
   // as it only runs when there's one disputeKit and featureSet to pick
@@ -140,6 +152,7 @@ const FeatureSelection: React.FC = () => {
         Object.entries(courtGroups).map(([groupName, features], index) => (
           <>
             {GroupsUI[groupName]({
+              clearAll: () => handleGroupDisable(groupName as Group),
               children: (
                 <Fragment key={groupName}>
                   {features.map((feature) =>