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

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: '@',
-  },
-});