From 1a1ca3e91d035a2b08569c0c05d3e665ba53b21b Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 30 May 2024 15:49:37 +0100
Subject: [PATCH] Added `name` attribute to feature flag checkboxes

no issue

- added `name` prop to `<Toggle>` component that corresponds to the checkbox's `name` attribute
- updated `<FeatureToggle>` to set the `name` prop on it's `<Toggle>` component to the feature flag that was passed in so all feature toggles get a useful name attribute without having to manually specify one
---
 apps/admin-x-design-system/src/global/form/Toggle.tsx          | 3 +++
 .../src/components/settings/advanced/labs/FeatureToggle.tsx    | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/admin-x-design-system/src/global/form/Toggle.tsx b/apps/admin-x-design-system/src/global/form/Toggle.tsx
index 5a056cd21a..4a3df9987f 100644
--- a/apps/admin-x-design-system/src/global/form/Toggle.tsx
+++ b/apps/admin-x-design-system/src/global/form/Toggle.tsx
@@ -9,6 +9,7 @@ export type ToggleDirections = 'ltr' | 'rtl';
 export interface ToggleProps {
     checked?: boolean;
     disabled?: boolean;
+    name?: string;
     error?: boolean;
     size?: ToggleSizes;
     label?: React.ReactNode;
@@ -33,6 +34,7 @@ const Toggle: React.FC<ToggleProps> = ({
     error,
     checked,
     disabled,
+    name,
     onChange
 }) => {
     const id = useId();
@@ -95,6 +97,7 @@ const Toggle: React.FC<ToggleProps> = ({
                     )}
                     disabled={disabled}
                     id={id}
+                    name={name}
                     role="switch"
                     type="checkbox"
                     onChange={onChange} />
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx
index 6835d89916..6cdf7944b1 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/FeatureToggle.tsx
@@ -13,7 +13,7 @@ const FeatureToggle: React.FC<{ flag: string; label?: string; }> = ({label, flag
     const client = useQueryClient();
     const handleError = useHandleError();
 
-    return <Toggle checked={labs[flag]} label={label} labelClasses='sr-only' onChange={async () => {
+    return <Toggle checked={labs[flag]} label={label} labelClasses='sr-only' name={`feature-${flag}`} onChange={async () => {
         const newValue = !labs[flag];
         try {
             await editSettings([{