refactor(edge/groups): migrate view to react [EE-2219] (#11758)

app/edge/__module.js

@@ -35,7 +35,7 @@ angular
       url: '/new',
       views: {
         'content@': {
-          component: 'createEdgeGroupView',
+          component: 'edgeGroupsCreateView',
         },
       },
     };
@@ -45,7 +45,7 @@ angular
       url: '/:groupId',
       views: {
         'content@': {
-          component: 'editEdgeGroupView',
+          component: 'edgeGroupsItemView',
         },
       },
     };

app/edge/components/group-form/groupForm.html

@@ -1,79 +0,0 @@
-<form class="form-horizontal" name="EdgeGroupForm" ng-submit="$ctrl.handleSubmit()">
-  <div class="form-group">
-    <label for="group_name" class="col-sm-3 col-lg-2 control-label required text-left"> Name </label>
-    <div class="col-sm-9 col-lg-10">
-      <input
-        type="text"
-        data-cy="edgeGroupCreate-groupNameInput"
-        class="form-control"
-        id="group_name"
-        name="group_name"
-        ng-model="$ctrl.model.Name"
-        required
-        auto-focus
-        placeholder="e.g. mygroup"
-      />
-      <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
-        <div class="small text-warning">
-          <div ng-messages="EdgeGroupForm.group_name.$error">
-            <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon> This field is required. </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="col-sm-12 form-section-title"> Group type </div>
-
-  <box-selector slim="true" value="$ctrl.model.Dynamic" on-change="($ctrl.onChangeDynamic)" options="$ctrl.groupTypeOptions" radio-name="'groupTypeDynamic'"></box-selector>
-
-  <!-- StaticGroup -->
-  <div ng-if="!$ctrl.model.Dynamic">
-    <div ng-if="!$ctrl.noEndpoints">
-      <!-- environments -->
-      <div class="col-sm-12 form-section-title"> Associated environments </div>
-      <div class="form-group">
-        <associated-edge-environments-selector value="$ctrl.model.Endpoints" on-change="($ctrl.onChangeEnvironments)"></associated-edge-environments-selector>
-      </div>
-    </div>
-    <div class="form-group" ng-if="$ctrl.noEndpoints">
-      <div class="col-sm-12 small text-muted">
-        No Edge environments are available. Head over to the <a ui-sref="portainer.endpoints">Environments view</a> to add environments.
-      </div>
-    </div>
-  </div>
-  <!-- !StaticGroup -->
-
-  <!-- DynamicGroup -->
-  <div ng-if="$ctrl.model.Dynamic">
-    <div class="col-sm-12 form-section-title"> Tags </div>
-
-    <box-selector slim="true" value="$ctrl.model.PartialMatch" on-change="($ctrl.onChangePartialMatch)" options="$ctrl.tagOptions" radio-name="'partialMatch'"></box-selector>
-
-    <tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>
-
-    <edge-group-association-table
-      title="'Associated environments by tags'"
-      empty-content-message="'No associated available'"
-      query="$ctrl.dynamicQuery"
-    ></edge-group-association-table>
-  </div>
-  <!-- !DynamicGroup -->
-
-  <!-- actions -->
-  <div class="col-sm-12 form-section-title"> Actions </div>
-  <div class="form-group">
-    <div class="col-sm-12">
-      <button
-        type="submit"
-        class="btn btn-primary btn-sm"
-        ng-disabled="$ctrl.actionInProgress || !EdgeGroupForm.$valid"
-        button-spinner="$ctrl.actionInProgress"
-        data-cy="edgeGroupCreate-addGroupButton"
-      >
-        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
-        <span ng-show="$ctrl.actionInProgress">In progress...</span>
-      </button>
-    </div>
-  </div>
-</form>

app/edge/components/group-form/groupFormController.js

@@ -1,86 +0,0 @@
-import { confirmDestructive } from '@@/modals/confirm';
-import { EdgeTypes } from '@/react/portainer/environments/types';
-import { buildConfirmButton } from '@@/modals/utils';
-import { tagOptions } from '@/react/edge/edge-groups/CreateView/tag-options';
-import { groupTypeOptions } from '@/react/edge/edge-groups/CreateView/group-type-options';
-
-export class EdgeGroupFormController {
-  /* @ngInject */
-  constructor($async, $scope) {
-    this.$async = $async;
-    this.$scope = $scope;
-
-    this.groupTypeOptions = groupTypeOptions;
-    this.tagOptions = tagOptions;
-
-    this.dynamicQuery = {
-      types: EdgeTypes,
-      tagIds: [],
-      tagsPartialMatch: false,
-    };
-
-    this.onChangeEnvironments = this.onChangeEnvironments.bind(this);
-    this.onChangeTags = this.onChangeTags.bind(this);
-    this.onChangeDynamic = this.onChangeDynamic.bind(this);
-    this.onChangeModel = this.onChangeModel.bind(this);
-    this.onChangePartialMatch = this.onChangePartialMatch.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-
-    $scope.$watch(
-      () => this.model,
-      () => {
-        if (this.model.Dynamic) {
-          this.dynamicQuery = {
-            types: EdgeTypes,
-            tagIds: this.model.TagIds,
-            tagsPartialMatch: this.model.PartialMatch,
-          };
-        }
-      },
-      true
-    );
-  }
-
-  onChangeModel(model) {
-    return this.$scope.$evalAsync(() => {
-      this.model = {
-        ...this.model,
-        ...model,
-      };
-    });
-  }
-
-  onChangePartialMatch(value) {
-    return this.onChangeModel({ PartialMatch: value });
-  }
-
-  onChangeDynamic(value) {
-    this.onChangeModel({ Dynamic: value });
-  }
-
-  onChangeTags(value) {
-    this.onChangeModel({ TagIds: value });
-  }
-
-  onChangeEnvironments(value, meta) {
-    return this.$async(async () => {
-      if (meta.type === 'remove' && this.pageType === 'edit') {
-        const confirmed = await confirmDestructive({
-          title: 'Confirm action',
-          message: 'Removing the environment from this group will remove its corresponding edge stacks',
-          confirmButton: buildConfirmButton('Confirm'),
-        });
-
-        if (!confirmed) {
-          return;
-        }
-      }
-
-      this.onChangeModel({ Endpoints: value });
-    });
-  }
-
-  handleSubmit() {
-    this.formAction(this.model);
-  }
-}

app/edge/components/group-form/index.js

@@ -1,16 +0,0 @@
-import angular from 'angular';
-
-import { EdgeGroupFormController } from './groupFormController';
-
-angular.module('portainer.edge').component('edgeGroupForm', {
-  templateUrl: './groupForm.html',
-  controller: EdgeGroupFormController,
-  bindings: {
-    model: '<',
-    formActionLabel: '@',
-    formAction: '<',
-    actionInProgress: '<',
-    loaded: '<',
-    pageType: '@',
-  },
-});

app/edge/react/components/index.ts

@@ -1,14 +1,13 @@
 import angular from 'angular';
 
-import { EdgeGroupsSelector } from '@/react/edge/edge-stacks/components/EdgeGroupsSelector';
 import { r2a } from '@/react-tools/react2angular';
 import { withReactQuery } from '@/react-tools/withReactQuery';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
+import { EdgeAsyncIntervalsForm } from '@/react/edge/components/EdgeAsyncIntervalsForm';
 import { EdgeCheckinIntervalField } from '@/react/edge/components/EdgeCheckInIntervalField';
 import { EdgeScriptForm } from '@/react/edge/components/EdgeScriptForm';
-import { EdgeAsyncIntervalsForm } from '@/react/edge/components/EdgeAsyncIntervalsForm';
+import { EdgeGroupsSelector } from '@/react/edge/edge-stacks/components/EdgeGroupsSelector';
-import { withUIRouter } from '@/react-tools/withUIRouter';
-import { EdgeGroupAssociationTable } from '@/react/edge/components/EdgeGroupAssociationTable';
-import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
 
 import { edgeJobsModule } from './edge-jobs';
 
@@ -57,20 +56,12 @@ const ngModule = angular
       'fieldSettings',
     ])
   )
-  .component(
-    'edgeGroupAssociationTable',
-    r2a(withReactQuery(EdgeGroupAssociationTable), [
-      'onClickRow',
-      'query',
-      'title',
-      'data-cy',
-    ])
-  )
   .component(
     'associatedEdgeEnvironmentsSelector',
     r2a(withReactQuery(AssociatedEdgeEnvironmentsSelector), [
       'onChange',
       'value',
+      'error',
     ])
   );
 

app/edge/react/views/groups.ts

@@ -0,0 +1,20 @@
+import angular from 'angular';
+
+import { r2a } from '@/react-tools/react2angular';
+import { withCurrentUser } from '@/react-tools/withCurrentUser';
+import { withUIRouter } from '@/react-tools/withUIRouter';
+import { ListView } from '@/react/edge/edge-groups/ListView';
+import { CreateView } from '@/react/edge/edge-groups/CreateView/CreateView';
+import { ItemView } from '@/react/edge/edge-groups/ItemView/ItemView';
+
+export const groupsModule = angular
+  .module('portainer.edge.react.views.groups', [])
+  .component('edgeGroupsView', r2a(withUIRouter(withCurrentUser(ListView)), []))
+  .component(
+    'edgeGroupsCreateView',
+    r2a(withUIRouter(withCurrentUser(CreateView)), [])
+  )
+  .component(
+    'edgeGroupsItemView',
+    r2a(withUIRouter(withCurrentUser(ItemView)), [])
+  ).name;

app/edge/react/views/index.ts

@@ -5,23 +5,20 @@ import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { WaitingRoomView } from '@/react/edge/edge-devices/WaitingRoomView';
-import { ListView as EdgeGroupsListView } from '@/react/edge/edge-groups/ListView';
 
 import { templatesModule } from './templates';
 import { jobsModule } from './jobs';
 import { stacksModule } from './edge-stacks';
+import { groupsModule } from './groups';
 
 export const viewsModule = angular
   .module('portainer.edge.react.views', [
     templatesModule,
     jobsModule,
     stacksModule,
+    groupsModule,
   ])
   .component(
     'waitingRoomView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(WaitingRoomView))), [])
-  )
-  .component(
-    'edgeGroupsView',
-    r2a(withUIRouter(withCurrentUser(EdgeGroupsListView)), [])
   ).name;

app/edge/rest/edge-groups.js

@@ -5,11 +5,7 @@ angular.module('portainer.edge').factory('EdgeGroups', function EdgeGroupsFactor
     API_ENDPOINT_EDGE_GROUPS + '/:id/:action',
     {},
     {
-      create: { method: 'POST', ignoreLoadingBar: true },
       query: { method: 'GET', isArray: true },
-      get: { method: 'GET', params: { id: '@id' } },
-      update: { method: 'PUT', params: { id: '@Id' } },
-      remove: { method: 'DELETE', params: { id: '@id' } },
     }
   );
 });

app/edge/services/edge-group.js

@@ -3,25 +3,9 @@ import angular from 'angular';
 angular.module('portainer.edge').factory('EdgeGroupService', function EdgeGroupServiceFactory(EdgeGroups) {
   var service = {};
 
-  service.group = function group(groupId) {
-    return EdgeGroups.get({ id: groupId }).$promise;
-  };
-
   service.groups = function groups() {
     return EdgeGroups.query({}).$promise;
   };
 
-  service.remove = function remove(groupId) {
-    return EdgeGroups.remove({ id: groupId }).$promise;
-  };
-
-  service.create = function create(group) {
-    return EdgeGroups.create(group).$promise;
-  };
-
-  service.update = function update(group) {
-    return EdgeGroups.update(group).$promise;
-  };
-
   return service;
 });

app/edge/views/edge-groups/createEdgeGroupView/createEdgeGroupView.html

@@ -1,18 +0,0 @@
-<page-header title="'Create edge group'" breadcrumbs="[{label:'Edge groups', link:'edge.groups'}, 'Add edge group']"> </page-header>
-
-<div class="row">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-body>
-        <edge-group-form
-          loaded="$ctrl.state.loaded"
-          page-type="create"
-          form-action-label="Add edge group"
-          form-action="$ctrl.createGroup"
-          groups="$ctrl.endpointGroups"
-          model="$ctrl.model"
-        ></edge-group-form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>

app/edge/views/edge-groups/createEdgeGroupView/createEdgeGroupViewController.js

@@ -1,47 +0,0 @@
-export class CreateEdgeGroupController {
-  /* @ngInject */
-  constructor(EdgeGroupService, GroupService, Notifications, $state, $async) {
-    this.EdgeGroupService = EdgeGroupService;
-    this.GroupService = GroupService;
-    this.Notifications = Notifications;
-    this.$state = $state;
-    this.$async = $async;
-
-    this.state = {
-      actionInProgress: false,
-      loaded: false,
-    };
-
-    this.model = {
-      Name: '',
-      Endpoints: [],
-      Dynamic: false,
-      TagIds: [],
-      PartialMatch: false,
-    };
-
-    this.createGroup = this.createGroup.bind(this);
-  }
-
-  async $onInit() {
-    const endpointGroups = await this.GroupService.groups();
-
-    this.endpointGroups = endpointGroups;
-    this.state.loaded = true;
-  }
-
-  async createGroup(model) {
-    return this.$async(async () => {
-      this.state.actionInProgress = true;
-      try {
-        await this.EdgeGroupService.create(model);
-        this.Notifications.success('Success', 'Edge group successfully created');
-        this.$state.go('edge.groups');
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to create edge group');
-      } finally {
-        this.state.actionInProgress = false;
-      }
-    });
-  }
-}

app/edge/views/edge-groups/createEdgeGroupView/index.js

@@ -1,8 +0,0 @@
-import angular from 'angular';
-
-import { CreateEdgeGroupController } from './createEdgeGroupViewController';
-
-angular.module('portainer.edge').component('createEdgeGroupView', {
-  templateUrl: './createEdgeGroupView.html',
-  controller: CreateEdgeGroupController,
-});

app/edge/views/edge-groups/editEdgeGroupView/editEdgeGroupView.html

@@ -1,19 +0,0 @@
-<page-header title="'Edit edge group'" breadcrumbs="[{label:'Edge Groups', link:'edge.groups'}, $ctrl.model.Name]"> </page-header>
-
-<div class="row" ng-if="$ctrl.model">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-body>
-        <edge-group-form
-          loaded="$ctrl.state.loaded"
-          page-type="edit"
-          form-action-label="Save edge group"
-          form-action="$ctrl.updateGroup"
-          endpoints="$ctrl.endpoints"
-          groups="$ctrl.endpointGroups"
-          model="$ctrl.model"
-        ></edge-group-form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>

app/edge/views/edge-groups/editEdgeGroupView/editEdgeGroupViewController.js

@@ -1,44 +0,0 @@
-export class EditEdgeGroupController {
-  /* @ngInject */
-  constructor(EdgeGroupService, GroupService, Notifications, $state, $async) {
-    this.EdgeGroupService = EdgeGroupService;
-    this.GroupService = GroupService;
-    this.Notifications = Notifications;
-    this.$state = $state;
-    this.$async = $async;
-
-    this.state = {
-      actionInProgress: false,
-      loaded: false,
-    };
-
-    this.updateGroup = this.updateGroup.bind(this);
-  }
-
-  async $onInit() {
-    const [endpointGroups, group] = await Promise.all([this.GroupService.groups(), this.EdgeGroupService.group(this.$state.params.groupId)]);
-
-    if (!group) {
-      this.Notifications.error('Failed to find edge group', {});
-      this.$state.go('edge.groups');
-    }
-    this.endpointGroups = endpointGroups;
-    this.model = group;
-    this.state.loaded = true;
-  }
-
-  updateGroup(group) {
-    return this.$async(async () => {
-      this.state.actionInProgress = true;
-      try {
-        await this.EdgeGroupService.update(group);
-        this.Notifications.success('Success', 'Edge group successfully updated');
-        this.$state.go('edge.groups');
-      } catch (err) {
-        this.Notifications.error('Failure', err, 'Unable to update edge group');
-      } finally {
-        this.state.actionInProgress = false;
-      }
-    });
-  }
-}

app/edge/views/edge-groups/editEdgeGroupView/index.js

@@ -1,8 +0,0 @@
-import angular from 'angular';
-
-import { EditEdgeGroupController } from './editEdgeGroupViewController';
-
-angular.module('portainer.edge').component('editEdgeGroupView', {
-  templateUrl: './editEdgeGroupView.html',
-  controller: EditEdgeGroupController,
-});

app/portainer/react/components/index.ts

@@ -70,6 +70,7 @@ export const ngModule = angular
       'allowCreate',
       'onChange',
       'value',
+      'errors',
     ])
   )
   .component(

app/react/components/Redirect.tsx

@@ -0,0 +1,10 @@
+import { useRouter } from '@uirouter/react';
+import { useEffect } from 'react';
+
+export function Redirect({ to, params = {} }: { to: string; params?: object }) {
+  const router = useRouter();
+  useEffect(() => {
+    router.stateService.go(to, params);
+  }, [params, router.stateService, to]);
+  return null;
+}

app/react/components/TagSelector/TagSelector.tsx

@@ -6,6 +6,7 @@ import { useCreateTagMutation, useTags } from '@/portainer/tags/queries';
 import { Creatable, Select } from '@@/form-components/ReactSelect';
 import { FormControl } from '@@/form-components/FormControl';
 import { Link } from '@@/Link';
+import { ArrayError } from '@@/form-components/InputList/InputList';
 
 import { TagButton } from '../TagButton';
 
@@ -13,6 +14,7 @@ interface Props {
   value: TagId[];
   allowCreate?: boolean;
   onChange(value: TagId[]): void;
+  errors?: ArrayError<TagId[]>;
 }
 
 interface Option {
@@ -20,7 +22,12 @@ interface Option {
   label: string;
 }
 
-export function TagSelector({ value, allowCreate = false, onChange }: Props) {
+export function TagSelector({
+  value,
+  allowCreate = false,
+  onChange,
+  errors,
+}: Props) {
   // change the struct because react-select has a bug with Creatable (https://github.com/JedWatson/react-select/issues/3417#issuecomment-461868989)
   const tagsQuery = useTags({
     select: (tags) => tags?.map((opt) => ({ label: opt.Name, value: opt.ID })),
@@ -62,6 +69,7 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
     <>
       {value.length > 0 && (
         <FormControl label="Selected tags">
+          <div data-cy="selected-tags">
             {selectedTags.map((tag) => (
               <TagButton
                 key={tag.value}
@@ -71,10 +79,19 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
                 onRemove={() => handleRemove(tag.value)}
               />
             ))}
+          </div>
         </FormControl>
       )}
 
-      <FormControl label="Tags" inputId="tags-selector">
+      <FormControl
+        label="Tags"
+        inputId="tags-selector"
+        errors={
+          typeof errors === 'string'
+            ? errors
+            : errors?.map((e) => e?.toString())
+        }
+      >
         <SelectComponent
           inputId="tags-selector"
           value={[] as { label: string; value: number }[]}

app/react/components/form-components/FormActions.tsx

@@ -11,6 +11,7 @@ interface Props extends AutomationTestingProps {
   loadingText: string;
   isLoading: boolean;
   isValid: boolean;
+  errors?: unknown;
 }
 
 export function FormActions({
@@ -19,6 +20,7 @@ export function FormActions({
   isLoading,
   children,
   isValid,
+  errors,
   'data-cy': dataCy,
 }: PropsWithChildren<Props>) {
   return (
@@ -35,6 +37,13 @@ export function FormActions({
             >
               {submitLabel}
             </LoadingButton>
+
+            {!isValid && (
+              <div className="hidden" data-cy="errors">
+                {JSON.stringify(errors)}
+              </div>
+            )}
+
             {children}
           </div>
         </div>

app/react/edge/components/AssociatedEdgeEnvironmentsSelector.tsx

@@ -1,16 +1,21 @@
 import { EdgeTypes, EnvironmentId } from '@/react/portainer/environments/types';
 
+import { FormError } from '@@/form-components/FormError';
+import { ArrayError } from '@@/form-components/InputList/InputList';
+
 import { EdgeGroupAssociationTable } from './EdgeGroupAssociationTable';
 
 export function AssociatedEdgeEnvironmentsSelector({
   onChange,
   value,
+  error,
 }: {
   onChange: (
     value: EnvironmentId[],
     meta: { type: 'add' | 'remove'; value: EnvironmentId }
   ) => void;
   value: EnvironmentId[];
+  error?: ArrayError<Array<EnvironmentId>>;
 }) {
   return (
     <>
@@ -20,6 +25,14 @@ export function AssociatedEdgeEnvironmentsSelector({
         environment entry to move it from one table to the other.
       </div>
 
+      {error && (
+        <div className="col-sm-12">
+          <FormError>
+            {typeof error === 'string' ? error : error.join(', ')}
+          </FormError>
+        </div>
+      )}
+
       <div className="col-sm-12 mt-4">
         <div className="flex">
           <div className="w-1/2">

app/react/edge/components/EdgeGroupAssociationTable.tsx

@@ -2,15 +2,15 @@ import { createColumnHelper } from '@tanstack/react-table';
 import { truncate } from 'lodash';
 import { useMemo, useState } from 'react';
 
+import { useTags } from '@/portainer/tags/queries';
+import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
+import { EnvironmentsQueryParams } from '@/react/portainer/environments/environment.service';
 import { useEnvironmentList } from '@/react/portainer/environments/queries';
 import { Environment } from '@/react/portainer/environments/types';
-import { useGroups } from '@/react/portainer/environments/environment-groups/queries';
-import { useTags } from '@/portainer/tags/queries';
-import { EnvironmentsQueryParams } from '@/react/portainer/environments/environment.service';
 import { AutomationTestingProps } from '@/types';
 
-import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
 import { Datatable, TableRow } from '@@/datatables';
+import { useTableStateWithoutStorage } from '@@/datatables/useTableState';
 
 type DecoratedEnvironment = Environment & {
   Tags: string[];
@@ -41,12 +41,12 @@ const columns = [
 export function EdgeGroupAssociationTable({
   title,
   query,
-  onClickRow,
+  onClickRow = () => {},
   'data-cy': dataCy,
 }: {
   title: string;
   query: EnvironmentsQueryParams;
-  onClickRow: (env: Environment) => void;
+  onClickRow?: (env: Environment) => void;
 } & AutomationTestingProps) {
   const tableState = useTableStateWithoutStorage('Name');
   const [page, setPage] = useState(0);

app/react/edge/edge-devices/WaitingRoomView/Datatable/AssignmentDialog/Selectors/EdgeGroupSelector.tsx

@@ -1,11 +1,11 @@
 import { notifySuccess } from '@/portainer/services/notifications';
-import { useCreateGroupMutation } from '@/react/edge/edge-groups/queries/useCreateEdgeGroupMutation';
+import { useCreateEdgeGroupMutation } from '@/react/edge/edge-groups/queries/useCreateEdgeGroupMutation';
 import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
 
 import { CreatableSelector } from './CreatableSelector';
 
 export function EdgeGroupsSelector() {
-  const createMutation = useCreateGroupMutation();
+  const createMutation = useCreateEdgeGroupMutation();
 
   const edgeGroupsQuery = useEdgeGroups({
     select: (edgeGroups) =>

app/react/edge/edge-groups/CreateView/CreateView.tsx

@@ -0,0 +1,55 @@
+import { useRouter } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+
+import { useCreateEdgeGroupMutation } from '../queries/useCreateEdgeGroupMutation';
+import { EdgeGroupForm } from '../components/EdgeGroupForm/EdgeGroupForm';
+
+export function CreateView() {
+  const mutation = useCreateEdgeGroupMutation();
+  const router = useRouter();
+
+  return (
+    <>
+      <PageHeader
+        title="Create edge group"
+        breadcrumbs={[
+          { label: 'Edge groups', link: 'edge.groups' },
+          'Add edge group',
+        ]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <EdgeGroupForm
+                onSubmit={({ environmentIds, ...values }) => {
+                  mutation.mutate(
+                    {
+                      endpoints: environmentIds,
+                      ...values,
+                    },
+                    {
+                      onSuccess: () => {
+                        notifySuccess(
+                          'Success',
+                          'Edge group successfully created'
+                        );
+                        router.stateService.go('^');
+                      },
+                    }
+                  );
+                }}
+                isLoading={mutation.isLoading}
+              />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}

app/react/edge/edge-groups/ItemView/ItemView.tsx

@@ -0,0 +1,72 @@
+import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
+
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { PageHeader } from '@@/PageHeader';
+import { Widget } from '@@/Widget';
+import { Redirect } from '@@/Redirect';
+
+import { useUpdateEdgeGroupMutation } from '../queries/useUpdateEdgeGroupMutation';
+import { EdgeGroupForm } from '../components/EdgeGroupForm/EdgeGroupForm';
+import { useEdgeGroup } from '../queries/useEdgeGroup';
+
+export function ItemView() {
+  const {
+    params: { groupId: id },
+  } = useCurrentStateAndParams();
+  const groupQuery = useEdgeGroup(id);
+  const mutation = useUpdateEdgeGroupMutation();
+  const router = useRouter();
+
+  if (groupQuery.isError) {
+    return <Redirect to="edge.groups" />;
+  }
+
+  if (!groupQuery.data) {
+    return null;
+  }
+
+  const group = groupQuery.data;
+  return (
+    <>
+      <PageHeader
+        title="Edit edge group"
+        breadcrumbs={[
+          { label: 'Edge groups', link: 'edge.groups' },
+          group.Name,
+        ]}
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <Widget.Body>
+              <EdgeGroupForm
+                group={group}
+                onSubmit={({ environmentIds, ...values }) => {
+                  mutation.mutate(
+                    {
+                      id,
+                      endpoints: environmentIds,
+                      ...values,
+                    },
+                    {
+                      onSuccess: () => {
+                        notifySuccess(
+                          'Success',
+                          'Edge group successfully updated'
+                        );
+                        router.stateService.go('^');
+                      },
+                    }
+                  );
+                }}
+                isLoading={mutation.isLoading}
+              />
+            </Widget.Body>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}

app/react/edge/edge-groups/components/EdgeGroupForm/DynamicGroupFieldset.tsx

@@ -0,0 +1,45 @@
+import { useFormikContext } from 'formik';
+
+import { EdgeGroupAssociationTable } from '@/react/edge/components/EdgeGroupAssociationTable';
+import { EdgeTypes } from '@/react/portainer/environments/types';
+
+import { BoxSelector } from '@@/BoxSelector';
+import { TagSelector } from '@@/TagSelector';
+import { FormSection } from '@@/form-components/FormSection';
+
+import { tagOptions } from './tag-options';
+import { FormValues } from './types';
+
+export function DynamicGroupFieldset() {
+  const { values, setFieldValue, errors } = useFormikContext<FormValues>();
+  return (
+    <>
+      <FormSection title="Tags">
+        <BoxSelector
+          slim
+          value={values.partialMatch}
+          onChange={(partialMatch) =>
+            setFieldValue('partialMatch', partialMatch)
+          }
+          options={tagOptions}
+          radioName="partialMatch"
+        />
+        <TagSelector
+          value={values.tagIds}
+          onChange={(tagIds) => setFieldValue('tagIds', tagIds)}
+          errors={errors.tagIds}
+        />
+      </FormSection>
+
+      <EdgeGroupAssociationTable
+        data-cy="edgeGroupCreate-associatedEnvironmentsTable"
+        title="Associated environments by tags"
+        query={{
+          types: EdgeTypes,
+          tagIds: values.tagIds,
+          tagsPartialMatch: values.partialMatch,
+        }}
+      />
+    </>
+  );
+}

app/react/edge/edge-groups/components/EdgeGroupForm/EdgeGroupForm.tsx

@@ -0,0 +1,90 @@
+import { Form, Formik, useFormikContext } from 'formik';
+
+import { FormSection } from '@@/form-components/FormSection';
+import { BoxSelector } from '@@/BoxSelector';
+import { FormActions } from '@@/form-components/FormActions';
+
+import { EdgeGroup } from '../../types';
+
+import { groupTypeOptions } from './group-type-options';
+import { FormValues } from './types';
+import { useValidation } from './useValidation';
+import { DynamicGroupFieldset } from './DynamicGroupFieldset';
+import { StaticGroupFieldset } from './StaticGroupFieldset';
+import { NameField } from './NameField';
+
+export function EdgeGroupForm({
+  onSubmit,
+  isLoading,
+  group,
+}: {
+  onSubmit: (values: FormValues) => void;
+  isLoading: boolean;
+  group?: EdgeGroup;
+}) {
+  const validation = useValidation({ id: group?.Id });
+  return (
+    <Formik
+      validationSchema={validation}
+      validateOnMount
+      initialValues={
+        group
+          ? {
+              dynamic: group.Dynamic,
+              environmentIds: group.Endpoints,
+              name: group.Name,
+              partialMatch: group.PartialMatch,
+              tagIds: group.TagIds,
+            }
+          : {
+              name: '',
+              dynamic: false,
+              environmentIds: [],
+              partialMatch: false,
+              tagIds: [],
+            }
+      }
+      onSubmit={onSubmit}
+    >
+      <InnerForm isLoading={isLoading} isCreate={!group} />
+    </Formik>
+  );
+}
+
+function InnerForm({
+  isLoading,
+  isCreate,
+}: {
+  isLoading: boolean;
+  isCreate: boolean;
+}) {
+  const { values, setFieldValue, isValid, errors } =
+    useFormikContext<FormValues>();
+
+  return (
+    <Form className="form-horizontal">
+      <NameField errors={errors.name} />
+
+      <FormSection title="Group type">
+        <BoxSelector
+          slim
+          value={values.dynamic}
+          onChange={(dynamic) => setFieldValue('dynamic', dynamic)}
+          options={groupTypeOptions}
+          radioName="groupTypeDynamic"
+        />
+      </FormSection>
+
+      {values.dynamic ? <DynamicGroupFieldset /> : <StaticGroupFieldset />}
+
+      <FormActions
+        submitLabel={isCreate ? 'Add edge group' : 'Save edge group'}
+        isLoading={isLoading}
+        isValid={isValid}
+        data-cy="edgeGroupCreate-addGroupButton"
+        loadingText="In progress..."
+        errors={errors}
+      />
+    </Form>
+  );
+}

app/react/edge/edge-groups/components/EdgeGroupForm/NameField.tsx

@@ -0,0 +1,42 @@
+import { Field, FormikErrors } from 'formik';
+import { string } from 'yup';
+import { useMemo } from 'react';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import { useEdgeGroups } from '../../queries/useEdgeGroups';
+import { EdgeGroup } from '../../types';
+
+export function NameField({ errors }: { errors?: FormikErrors<string> }) {
+  return (
+    <FormControl label="Name" required errors={errors} inputId="group_name">
+      <Field
+        as={Input}
+        name="name"
+        placeholder="e.g. mygroup"
+        data-cy="edgeGroupCreate-groupNameInput"
+        id="group_name"
+      />
+    </FormControl>
+  );
+}
+
+export function useNameValidation(id?: EdgeGroup['Id']) {
+  const edgeGroupsQuery = useEdgeGroups();
+
+  return useMemo(
+    () =>
+      string()
+        .required('Name is required')
+        .test({
+          name: 'is-unique',
+          test: (value) =>
+            !edgeGroupsQuery.data?.find(
+              (group) => group.Name === value && group.Id !== id
+            ),
+          message: 'Name must be unique',
+        }),
+    [edgeGroupsQuery.data, id]
+  );
+}

app/react/edge/edge-groups/components/EdgeGroupForm/StaticGroupFieldset.tsx

@@ -0,0 +1,40 @@
+import { useFormikContext } from 'formik';
+
+import { AssociatedEdgeEnvironmentsSelector } from '@/react/edge/components/AssociatedEdgeEnvironmentsSelector';
+
+import { FormSection } from '@@/form-components/FormSection';
+import { confirmDestructive } from '@@/modals/confirm';
+import { buildConfirmButton } from '@@/modals/utils';
+
+import { FormValues } from './types';
+
+export function StaticGroupFieldset({ isEdit }: { isEdit?: boolean }) {
+  const { values, setFieldValue, errors } = useFormikContext<FormValues>();
+
+  return (
+    <FormSection title="Associated environments">
+      <div className="form-group">
+        <AssociatedEdgeEnvironmentsSelector
+          value={values.environmentIds}
+          error={errors.environmentIds}
+          onChange={async (environmentIds, meta) => {
+            if (meta.type === 'remove' && isEdit) {
+              const confirmed = await confirmDestructive({
+                title: 'Confirm action',
+                message:
+                  'Removing the environment from this group will remove its corresponding edge stacks',
+                confirmButton: buildConfirmButton('Confirm'),
+              });
+
+              if (!confirmed) {
+                return;
+              }
+            }
+
+            setFieldValue('environmentIds', environmentIds);
+          }}
+        />
+      </div>
+    </FormSection>
+  );
+}

app/react/edge/edge-groups/components/EdgeGroupForm/types.tsx

@@ -0,0 +1,10 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+import { TagId } from '@/portainer/tags/types';
+
+export interface FormValues {
+  name: string;
+  dynamic: boolean;
+  environmentIds: EnvironmentId[];
+  partialMatch: boolean;
+  tagIds: TagId[];
+}

app/react/edge/edge-groups/components/EdgeGroupForm/useValidation.tsx

@@ -0,0 +1,27 @@
+import { SchemaOf, array, boolean, number, object } from 'yup';
+import { useMemo } from 'react';
+
+import { EdgeGroup } from '../../types';
+
+import { FormValues } from './types';
+import { useNameValidation } from './NameField';
+
+export function useValidation({
+  id,
+}: { id?: EdgeGroup['Id'] } = {}): SchemaOf<FormValues> {
+  const nameValidation = useNameValidation(id);
+  return useMemo(
+    () =>
+      object({
+        name: nameValidation,
+        dynamic: boolean().default(false),
+        environmentIds: array(number().required()),
+        partialMatch: boolean().default(false),
+        tagIds: array(number().required()).when('dynamic', {
+          is: true,
+          then: (schema) => schema.min(1, 'Tags are required'),
+        }),
+      }),
+    [nameValidation]
+  );
+}

app/react/edge/edge-groups/queries/query-keys.ts

@@ -1,3 +1,4 @@
 export const queryKeys = {
   base: () => ['edge', 'groups'] as const,
+  item: (id: number) => [...queryKeys.base(), id] as const,
 };

app/react/edge/edge-groups/queries/useCreateEdgeGroupMutation.ts

@@ -34,7 +34,7 @@ export async function createEdgeGroup(requestPayload: CreateGroupPayload) {
   }
 }
 
-export function useCreateGroupMutation() {
+export function useCreateEdgeGroupMutation() {
   const queryClient = useQueryClient();
 
   return useMutation(

app/react/edge/edge-groups/queries/useEdgeGroup.ts

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import {
+  EnvironmentId,
+  EnvironmentType,
+} from '@/react/portainer/environments/types';
+import { withError } from '@/react-tools/react-query';
+
+import { EdgeGroup } from '../types';
+
+import { queryKeys } from './query-keys';
+import { buildUrl } from './build-url';
+
+export interface EdgeGroupListItemResponse extends EdgeGroup {
+  EndpointTypes: Array<EnvironmentType>;
+  HasEdgeStack?: boolean;
+  HasEdgeJob?: boolean;
+  HasEdgeConfig?: boolean;
+  TrustedEndpoints: Array<EnvironmentId>;
+}
+
+async function getEdgeGroup(id: EdgeGroup['Id']) {
+  try {
+    const { data } = await axios.get<EdgeGroup>(buildUrl({ id }));
+    return data;
+  } catch (err) {
+    throw parseAxiosError(err as Error, 'Failed fetching edge groups');
+  }
+}
+
+export function useEdgeGroup<T = EdgeGroup>(
+  id?: EdgeGroup['Id'],
+  {
+    select,
+  }: {
+    select?: (groups: EdgeGroup) => T;
+  } = {}
+) {
+  return useQuery({
+    queryKey: queryKeys.item(id!),
+    queryFn: () => getEdgeGroup(id!),
+    select,
+    enabled: !!id,
+    ...withError('Failed fetching edge group'),
+  });
+}

app/react/edge/edge-groups/queries/useUpdateEdgeGroupMutation.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { TagId } from '@/portainer/tags/types';
+import {
+  mutationOptions,
+  withError,
+  withInvalidate,
+} from '@/react-tools/react-query';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { EdgeGroup } from '../types';
+
+import { buildUrl } from './build-url';
+import { queryKeys } from './query-keys';
+
+interface UpdateGroupPayload {
+  id: EdgeGroup['Id'];
+  name: string;
+  dynamic: boolean;
+  tagIds?: TagId[];
+  endpoints?: EnvironmentId[];
+  partialMatch?: boolean;
+}
+
+export async function updateEdgeGroup({
+  id,
+  ...requestPayload
+}: UpdateGroupPayload) {
+  try {
+    const { data: group } = await axios.put<EdgeGroup>(
+      buildUrl({ id }),
+      requestPayload
+    );
+    return group;
+  } catch (e) {
+    throw parseAxiosError(e as Error, 'Failed to update Edge group');
+  }
+}
+
+export function useUpdateEdgeGroupMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation(
+    updateEdgeGroup,
+    mutationOptions(
+      withError('Failed to update Edge group'),
+      withInvalidate(queryClient, [queryKeys.base()])
+    )
+  );
+}