From 0ab798768485e206ad954cc23b56f6aa8c06558b Mon Sep 17 00:00:00 2001
From: cmeng <cmenginnz@gmail.com>
Date: Fri, 10 Mar 2023 10:48:44 +1300
Subject: [PATCH] fix(edge-stack) always show edge group selector [EE-5157]
 (#8639)

---
 app/edge/react/components/index.ts                          | 3 ++-
 .../create-edge-stack-view.controller.js                    | 1 -
 .../createEdgeStackView/create-edge-stack-view.html         | 2 +-
 .../edge/edge-stacks/components/EdgeGroupsSelector.tsx      | 6 +-----
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/edge/react/components/index.ts b/app/edge/react/components/index.ts
index fb877f251..1fe7e475b 100644
--- a/app/edge/react/components/index.ts
+++ b/app/edge/react/components/index.ts
@@ -7,12 +7,13 @@ import { EdgeCheckinIntervalField } from '@/react/edge/components/EdgeCheckInInt
 import { EdgeScriptForm } from '@/react/edge/components/EdgeScriptForm';
 import { EdgeAsyncIntervalsForm } from '@/react/edge/components/EdgeAsyncIntervalsForm';
 import { EdgeStackDeploymentTypeSelector } from '@/react/edge/edge-stacks/components/EdgeStackDeploymentTypeSelector';
+import { withUIRouter } from '@/react-tools/withUIRouter';
 
 export const componentsModule = angular
   .module('portainer.edge.react.components', [])
   .component(
     'edgeGroupsSelector',
-    r2a(withReactQuery(EdgeGroupsSelector), [
+    r2a(withUIRouter(withReactQuery(EdgeGroupsSelector)), [
       'onChange',
       'value',
       'error',
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
index 1eae9715d..c30ece1a8 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.controller.js
@@ -86,7 +86,6 @@ export default class CreateEdgeStackViewController {
   async $onInit() {
     try {
       this.edgeGroups = await this.EdgeGroupService.groups();
-      this.noGroups = this.edgeGroups.length === 0;
     } catch (err) {
       this.Notifications.error('Failure', err, 'Unable to retrieve Edge groups');
     }
diff --git a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
index 7f1b730bb..0c406ad96 100644
--- a/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
+++ b/app/edge/views/edge-stacks/createEdgeStackView/create-edge-stack-view.html
@@ -39,7 +39,7 @@
           </div>
           <!-- !name-input -->
 
-          <edge-groups-selector ng-if="!$ctrl.noGroups" value="$ctrl.formValues.Groups" on-change="($ctrl.onChangeGroups)" items="$ctrl.edgeGroups"></edge-groups-selector>
+          <edge-groups-selector value="$ctrl.formValues.Groups" on-change="($ctrl.onChangeGroups)" items="$ctrl.edgeGroups"></edge-groups-selector>
 
           <edge-stack-deployment-type-selector
             value="$ctrl.formValues.DeploymentType"
diff --git a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx b/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
index 5d32f1b28..a8fcacccd 100644
--- a/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
+++ b/app/react/edge/edge-stacks/components/EdgeGroupsSelector.tsx
@@ -64,11 +64,7 @@ function InnerSelector({
 }) {
   const edgeGroupsQuery = useEdgeGroups();
 
-  if (!edgeGroupsQuery.data) {
-    return null;
-  }
-
-  const items = edgeGroupsQuery.data.filter(isGroupVisible);
+  const items = (edgeGroupsQuery.data || []).filter(isGroupVisible);
 
   const valueGroups = _.compact(
     value.map((id) => items.find((item) => item.Id === id))