From dd4d126934a7bb6c7c48ec19a84a8f6727067b05 Mon Sep 17 00:00:00 2001
From: Matt Hook <hookenz@gmail.com>
Date: Mon, 4 Jul 2022 13:05:04 +1200
Subject: [PATCH] feat(switch): add optional switch text [EE-3625] (#7164)

* add optional switch text
---
 app/portainer/react/components/switch-field.ts        |  1 +
 .../form-components/SwitchField/SwitchField.tsx       | 11 +++++++++++
 2 files changed, 12 insertions(+)

diff --git a/app/portainer/react/components/switch-field.ts b/app/portainer/react/components/switch-field.ts
index f5e132c04..288d71e09 100644
--- a/app/portainer/react/components/switch-field.ts
+++ b/app/portainer/react/components/switch-field.ts
@@ -12,4 +12,5 @@ export const switchField = r2a(SwitchField, [
   'disabled',
   'onChange',
   'featureId',
+  'switchValues',
 ]);
diff --git a/app/react/components/form-components/SwitchField/SwitchField.tsx b/app/react/components/form-components/SwitchField/SwitchField.tsx
index 3e5a0cbf2..2c8431d28 100644
--- a/app/react/components/form-components/SwitchField/SwitchField.tsx
+++ b/app/react/components/form-components/SwitchField/SwitchField.tsx
@@ -18,6 +18,10 @@ export interface Props {
   dataCy?: string;
   disabled?: boolean;
   featureId?: FeatureId;
+  switchValues?: {
+    on: string;
+    off: string;
+  };
 }
 
 export function SwitchField({
@@ -30,6 +34,7 @@ export function SwitchField({
   disabled,
   onChange,
   featureId,
+  switchValues,
 }: Props) {
   const toggleName = name ? `toggle_${name}` : '';
 
@@ -55,6 +60,12 @@ export function SwitchField({
         featureId={featureId}
         dataCy={dataCy}
       />
+      {switchValues && checked && (
+        <span className="ml-2">{switchValues.on}</span>
+      )}
+      {switchValues && !checked && (
+        <span className="ml-2">{switchValues.off}</span>
+      )}
     </label>
   );
 }