KEY-67 disabled future apply checkbox if select all apps switcher is …

…false (#291)
odigos-io · Jul 12, 2023 · bcf33da · bcf33da
1 parent fb8da27
commit bcf33da
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 8 deletions.
diff --git a/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx b/frontend/webapp/components/setup/sources/sources.option.menu/sources.option.menu.tsx
@@ -65,6 +65,7 @@ export function SourcesOptionMenu({
           label={SETUP.MENU.FUTURE_APPLY}
           value={checked}
           onChange={() => onFutureApplyChange(!checked)}
+          disabled={!toggle}
         />
         <KeyvalTooltip content={SETUP.MENU.TOOLTIP} />
       </CheckboxWrapper>

diff --git a/frontend/webapp/containers/setup/setup.section/setup.section.tsx b/frontend/webapp/containers/setup/setup.section/setup.section.tsx
@@ -84,6 +84,7 @@ export function SetupSection({ namespaces }: any) {
       currentNamespaceConfig = {
         ...currentNamespaceConfig,
         selected_all: false,
+        future_selected: false,
       };
     }
     handleSetNewSelectedConfig(currentNamespaceConfig);
@@ -97,7 +98,7 @@ export function SetupSection({ namespaces }: any) {
     });
 
     const currentNamespaceConfig = {
-      ...namespace,
+      future_selected: value,
       selected_all: value,
       objects,
     };

diff --git a/frontend/webapp/design.system/checkbox/checkbox.styled.tsx b/frontend/webapp/design.system/checkbox/checkbox.styled.tsx
@@ -1,10 +1,16 @@
 import { styled } from "styled-components";
 
-export const CheckboxWrapper = styled.div`
+interface CheckboxWrapperProps {
+  disabled?: boolean;
+}
+
+export const CheckboxWrapper = styled.div<CheckboxWrapperProps>`
   display: flex;
   gap: 8px;
   align-items: center;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+  opacity: ${({ disabled }) => (disabled ? "0.5" : "1")};
 `;
 
 export const Checkbox = styled.span`

diff --git a/frontend/webapp/design.system/checkbox/checkbox.tsx b/frontend/webapp/design.system/checkbox/checkbox.tsx
@@ -7,15 +7,17 @@ interface KeyvalCheckboxProps {
   value: boolean;
   onChange: () => void;
   label?: string;
+  disabled?: boolean;
 }
 
 export function KeyvalCheckbox({
   onChange,
   value,
   label = "",
+  disabled = false,
 }: KeyvalCheckboxProps) {
   return (
-    <CheckboxWrapper onClick={onChange}>
+    <CheckboxWrapper disabled={disabled || undefined} onClick={onChange}>
       {value ? <Checked /> : <Checkbox />}
       <KeyvalText size={14}>{label}</KeyvalText>
     </CheckboxWrapper>

diff --git a/frontend/webapp/design.system/drop.down/drop.down.styled.tsx b/frontend/webapp/design.system/drop.down/drop.down.styled.tsx
@@ -10,6 +10,7 @@ export const DropdownWrapper = styled.div<DropdownWrapperProps>`
   width: 260px;
   padding: 11px 13px;
   border-radius: 8px;
+  cursor: pointer;
   border: ${({ hover, theme }) =>
     `1px solid  ${hover ? theme.colors.white : theme.colors.blue_grey}`};
   background: ${({ theme }) => theme.colors.dark};
@@ -25,7 +26,6 @@ export const DropdownWrapper = styled.div<DropdownWrapperProps>`
 `;
 
 export const DropdownHeader = styled.div`
-  cursor: pointer;
   width: 100%;
   display: flex;
   justify-content: space-between;

diff --git a/frontend/webapp/design.system/drop.down/drop.down.tsx b/frontend/webapp/design.system/drop.down/drop.down.tsx
@@ -76,8 +76,9 @@ export function KeyvalDropDown({
         hover={isHover || undefined}
         onMouseEnter={() => setHover(true)}
         onMouseLeave={() => setHover(false)}
+        onClick={toggleDropdown}
       >
-        <DropdownHeader onClick={toggleDropdown}>
+        <DropdownHeader>
           {selectedItem ? selectedItem.label : SELECTED_ITEM}
           <Open className={`dropdown-arrow ${isOpen && "open"}`} />
         </DropdownHeader>

diff --git a/frontend/webapp/design.system/switch/switch.styled.tsx b/frontend/webapp/design.system/switch/switch.styled.tsx
@@ -5,7 +5,7 @@ interface SwitchToggleWrapperProps {
 }
 
 interface SwitchToggleBtnProps {
-  disabled: boolean;
+  disabled: boolean | undefined;
 }
 
 export const SwitchInputWrapper = styled.div`

diff --git a/frontend/webapp/design.system/switch/switch.tsx b/frontend/webapp/design.system/switch/switch.tsx
@@ -26,7 +26,7 @@ export function KeyvalSwitch({
         active={toggle || undefined}
         onClick={handleToggleChange}
       >
-        <SwitchButtonWrapper disabled={toggle} />
+        <SwitchButtonWrapper disabled={toggle || undefined} />
       </SwitchToggleWrapper>
       {label && <KeyvalText size={14}>{label}</KeyvalText>}
     </SwitchInputWrapper>