restore master toggle

Author: jellizaveta

client/src/components/Filters/Services/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -56,16 +56,21 @@ export const Form = ({
         defaultValues: { blocked_services: initialValues }
     });
 
-    const setAllServicesState = (isSelected: boolean) => {
+    const [masterEnabled, setMasterEnabled] = useState<boolean>(true);
+
+    const handleToggleAllServices = (isSelected: boolean) => {
+        if (!masterEnabled) {
+            return;
+        }
         blockedServices.forEach((service) => {
             if (!isServiceDisabled(processing, processingSet)) {
                 setValue(`blocked_services.${service.id}`, isSelected);
             }
         });
     };
 
-    const setGroupServicesState = (groupId: string, isSelected: boolean) => {
-        if (isServiceDisabled(processing, processingSet)) {
+    const handleToggleGroupServices = (groupId: string, isSelected: boolean) => {
+        if (isServiceDisabled(processing, processingSet) || !masterEnabled) {
             return;
         }
         blockedServices
@@ -75,11 +80,19 @@ export const Form = ({
             });
     };
 
+    const handleMasterToggle = (next: boolean) => {
+        setMasterEnabled(next);
+    };
+
     const handleSubmitWithGroups = (values: FormValues) => {
         if (!values || !values.blocked_services) {
             return onSubmit(values);
         }
 
+        if (!masterEnabled) {
+            return onSubmit({ blocked_services: {} });
+        }
+
         const enabledIdsMap = Object.fromEntries(
             blockedServices
                 .filter(service => values.blocked_services?.[service.id])
@@ -92,14 +105,23 @@ export const Form = ({
     return (
         <form onSubmit={handleSubmit(handleSubmitWithGroups)}>
             <div className="form__group">
+                <ServiceField
+                    name="blocked_services_master"
+                    value={masterEnabled}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleMasterToggle(e.target.checked)}
+                    onBlur={() => {}}
+                    placeholder={t('blocked_services_global')}
+                    className="service--global"
+                    disabled={processing || processingSet}
+                />
                 <div className="blocked_services row mb-4">
                     <div className="col-6">
                         <button
                             type="button"
                             data-testid="blocked_services_block_all"
                             className="btn btn-secondary btn-block"
-                            disabled={processing || processingSet}
-                            onClick={() => setAllServicesState(true)}>
+                            disabled={processing || processingSet || !masterEnabled}
+                            onClick={() => handleToggleAllServices(true)}>
                             <Trans>block_all</Trans>
                         </button>
                     </div>
@@ -109,8 +131,8 @@ export const Form = ({
                             type="button"
                             data-testid="blocked_services_unblock_all"
                             className="btn btn-secondary btn-block"
-                            disabled={processing || processingSet}
-                            onClick={() => setAllServicesState(false)}>
+                            disabled={processing || processingSet || !masterEnabled}
+                            onClick={() => handleToggleAllServices(false)}>
                             <Trans>unblock_all</Trans>
                         </button>
                     </div>
@@ -121,15 +143,16 @@ export const Form = ({
                         return {
                             id: group.id,
                             title: t(`servicesgroup.${group.id}.name`),
+                            disabled: processing || processingSet || !masterEnabled,
                             children: (
                                 <div className="services__wrapper">
                                     <div className="row mb-3">
                                         <div className="col-6">
                                             <button
                                                 type="button"
                                                 className="btn btn-secondary btn-block"
-                                                disabled={processing || processingSet}
-                                                onClick={() => setGroupServicesState(group.id, true)}
+                                                disabled={processing || processingSet || !masterEnabled}
+                                                onClick={() => handleToggleGroupServices(group.id, true)}
                                             >
                                                 <Trans>block_all</Trans>
                                             </button>
@@ -138,8 +161,8 @@ export const Form = ({
                                             <button
                                                 type="button"
                                                 className="btn btn-secondary btn-block"
-                                                disabled={processing || processingSet}
-                                                onClick={() => setGroupServicesState(group.id, false)}
+                                                disabled={processing || processingSet || !masterEnabled}
+                                                onClick={() => handleToggleGroupServices(group.id, false)}
                                             >
                                                 <Trans>unblock_all</Trans>
                                             </button>
@@ -159,7 +182,10 @@ export const Form = ({
                                                             data-testid={`blocked_services_${service.id}`}
                                                             data-groupid={`blocked_services_${service.group_id}`}
                                                             placeholder={service.name}
-                                                            disabled={isServiceDisabled(processing, processingSet)}
+                                                            disabled={
+                                                                !masterEnabled
+                                                                || isServiceDisabled(processing, processingSet)
+                                                            }
                                                             icon={service.icon_svg} 
                                                         />
                                                 )} />

client/src/components/ui/Accordion.tsx

@@ -23,6 +23,7 @@ const AccordionItem = (props: Props) => {
         children,
         isOpen,
         onToggle,
+        disabled,
         className = '',
     } = props;
     return (
@@ -32,9 +33,11 @@ const AccordionItem = (props: Props) => {
                     <button
                         type="button"
                         className={`accordion-item__toggle ${isOpen ? 'accordion-item__toggle--open' : ''}`}
-                        onClick={onToggle}
+                        onClick={() => { if (!disabled) { onToggle(); } }}
                         aria-expanded={isOpen}
                         aria-controls={`accordion-content-${id}`}
+                        aria-disabled={disabled}
+                        disabled={disabled}
                     >
                         <span className="accordion-item__icon" aria-hidden="true">
                             <svg width="24" height="24" viewBox="0 0 24 24">
@@ -106,6 +109,7 @@ export const Accordion: React.FC<AccordionProps> = ({
                     title={item.title}
                     isOpen={openItems.has(item.id)}
                     onToggle={() => toggleItem(item.id)}
+                    disabled={item.disabled}
                 >
                     {item.children}
                 </AccordionItem>