From 6674df6dc9ed737938d7dbe7c4a80784439b06e3 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chaim.levi-ari@portainer.io>
Date: Sun, 29 Oct 2023 09:47:24 +0200
Subject: [PATCH] feat(edge/groups): make selector required

---
 app/edge/react/components/index.ts                          | 1 +
 .../edge/edge-stacks/components/EdgeGroupsSelector.tsx      | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/edge/react/components/index.ts b/app/edge/react/components/index.ts
index 608fe3a0b..13dbe0f2b 100644
--- a/app/edge/react/components/index.ts
+++ b/app/edge/react/components/index.ts
@@ -28,6 +28,7 @@ export const componentsModule = angular
       'error',
       'horizontal',
       'isGroupVisible',
+      'required',
     ])
   )
   .component(
diff --git a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx b/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
index a8fcacccd..0e01b9514 100644
--- a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
+++ b/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
@@ -18,6 +18,7 @@ interface Props {
   error?: string | string[];
   horizontal?: boolean;
   isGroupVisible?(group: EdgeGroup): boolean;
+  required?: boolean;
 }
 
 export function EdgeGroupsSelector({
@@ -26,6 +27,7 @@ export function EdgeGroupsSelector({
   error,
   horizontal,
   isGroupVisible = () => true,
+  required,
 }: Props) {
   const selector = (
     <InnerSelector
@@ -36,11 +38,11 @@ export function EdgeGroupsSelector({
   );
 
   return horizontal ? (
-    <FormControl errors={error} label="Edge Groups">
+    <FormControl errors={error} label="Edge Groups" required={required}>
       {selector}
     </FormControl>
   ) : (
-    <FormSection title="Edge Groups">
+    <FormSection title={`Edge Groups${required ? ' *' : ''}`}>
       <div className="form-group">
         <div className="col-sm-12">{selector} </div>
         {error && (