refactor(access-control): create access-control-panel component [EE-2345] (#6486)

app/docker/components/datatables/networks-datatable/network-row-content/networkRowContent.js

@@ -1,4 +1,4 @@
-import { ResourceControlOwnership as RCO } from 'Portainer/models/resourceControl/resourceControlOwnership';
+import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
 
 angular.module('portainer.docker').directive('networkRowContent', [
   function networkRowContent() {

app/docker/containers/components/ContainersDatatable/columns/ownership.tsx

@@ -2,8 +2,8 @@ import { Column } from 'react-table';
 import clsx from 'clsx';
 
 import { ownershipIcon } from '@/portainer/filters/filters';
-import { ResourceControlOwnership } from '@/portainer/models/resourceControl/resourceControlOwnership';
 import type { DockerContainer } from '@/docker/containers/types';
+import { ResourceControlOwnership } from '@/portainer/access-control/types';
 
 export const ownership: Column<DockerContainer> = {
   Header: 'Ownership',

app/docker/containers/types.ts

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from '@/portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 export type DockerContainerStatus =
   | 'paused'

app/docker/models/config.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 function b64DecodeUnicode(str) {
   try {

app/docker/models/container.js

@@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 export function createStatus(statusText) {
   var status = _.toLower(statusText);

app/docker/models/network.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 export function NetworkViewModel(data) {
   this.Id = data.Id;

app/docker/models/secret.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 export function SecretViewModel(data) {
   this.Id = data.ID;

app/docker/models/service.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 export function ServiceViewModel(data, runningTasks, allTasks) {
   this.Model = data;

app/docker/models/volume.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from 'Portainer/models/resourceControl/resourceControl';
+import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 export function VolumeViewModel(data) {
   this.Id = data.Name;

app/docker/views/configs/edit/config.html

@@ -59,7 +59,14 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel ng-if="config" resource-id="config.Id" resource-control="config.ResourceControl" resource-type="'config'"> </por-access-control-panel>
+<access-control-panel
+  ng-if="config"
+  resource-id="config.Id"
+  resource-control="config.ResourceControl"
+  resource-type="resourceType"
+  on-update-success="(onUpdateResourceControlSuccess)"
+>
+</access-control-panel>
 <!-- !access-control-panel -->
 
 <div class="row" ng-if="config">

app/docker/views/configs/edit/configController.js

@@ -1,3 +1,5 @@
+import { ResourceControlType } from '@/portainer/access-control/types';
+
 angular.module('portainer.docker').controller('ConfigController', [
   '$scope',
   '$transition$',
@@ -5,6 +7,12 @@ angular.module('portainer.docker').controller('ConfigController', [
   'ConfigService',
   'Notifications',
   function ($scope, $transition$, $state, ConfigService, Notifications) {
+    $scope.resourceType = ResourceControlType.Config;
+
+    $scope.onUpdateResourceControlSuccess = function () {
+      $state.reload();
+    };
+
     $scope.removeConfig = function removeConfig(configId) {
       ConfigService.remove(configId)
         .then(function success() {

app/docker/views/containers/edit/container.html

@@ -152,7 +152,14 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel ng-if="container" resource-id="container.Id" resource-control="container.ResourceControl" resource-type="'container'"> </por-access-control-panel>
+<access-control-panel
+  ng-if="container"
+  resource-id="container.Id"
+  resource-control="container.ResourceControl"
+  resource-type="resourceType"
+  on-update-success="(onUpdateResourceControlSuccess)"
+>
+</access-control-panel>
 <!-- !access-control-panel -->
 
 <div ng-if="container.State.Health" class="row">

app/docker/views/containers/edit/containerController.js

@@ -3,6 +3,7 @@ import _ from 'lodash-es';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
 import { FeatureId } from 'Portainer/feature-flags/enums';
+import { ResourceControlType } from '@/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('ContainerController', [
   '$q',
@@ -45,6 +46,7 @@ angular.module('portainer.docker').controller('ContainerController', [
     Authentication,
     endpoint
   ) {
+    $scope.resourceType = ResourceControlType.Container;
     $scope.endpoint = endpoint;
     $scope.isAdmin = Authentication.isAdmin();
     $scope.activityTime = 0;
@@ -71,6 +73,10 @@ angular.module('portainer.docker').controller('ContainerController', [
 
     $scope.updateRestartPolicy = updateRestartPolicy;
 
+    $scope.onUpdateResourceControlSuccess = function () {
+      $state.reload();
+    };
+
     var update = function () {
       var nodeName = $transition$.params().nodeName;
       HttpRequestHelper.setPortainerAgentTargetHeader(nodeName);

app/docker/views/networks/edit/network.html

@@ -69,14 +69,15 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel
+<access-control-panel
   ng-if="network"
   resource-id="network.Id"
   resource-control="network.ResourceControl"
-  resource-type="'network'"
+  resource-type="resourceType"
   disable-ownership-change="isSystemNetwork()"
+  on-update-success="(onUpdateResourceControlSuccess)"
 >
-</por-access-control-panel>
+</access-control-panel>
 <!-- !access-control-panel -->
 
 <div class="row" ng-if="!(network.Options | emptyobject)">

app/docker/views/networks/edit/networkController.js

@@ -1,3 +1,4 @@
+import { ResourceControlType } from '@/portainer/access-control/types';
 import DockerNetworkHelper from 'Docker/helpers/networkHelper';
 
 angular.module('portainer.docker').controller('NetworkController', [
@@ -11,6 +12,12 @@ angular.module('portainer.docker').controller('NetworkController', [
   'HttpRequestHelper',
   'NetworkHelper',
   function ($scope, $state, $transition$, $filter, NetworkService, Container, Notifications, HttpRequestHelper, NetworkHelper) {
+    $scope.resourceType = ResourceControlType.Network;
+
+    $scope.onUpdateResourceControlSuccess = function () {
+      $state.reload();
+    };
+
     $scope.removeNetwork = function removeNetwork() {
       NetworkService.remove($transition$.params().id, $transition$.params().id)
         .then(function success() {

app/docker/views/secrets/edit/secret.html

@@ -56,5 +56,12 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel ng-if="secret" resource-id="secret.Id" resource-control="secret.ResourceControl" resource-type="'secret'"> </por-access-control-panel>
+<access-control-panel
+  ng-if="secret"
+  resource-id="secret.Id"
+  resource-control="secret.ResourceControl"
+  resource-type="resourceType"
+  on-update-success="(onUpdateResourceControlSuccess)"
+>
+</access-control-panel>
 <!-- !access-control-panel -->

app/docker/views/secrets/edit/secretController.js

@@ -1,3 +1,5 @@
+import { ResourceControlType } from '@/portainer/access-control/types';
+
 angular.module('portainer.docker').controller('SecretController', [
   '$scope',
   '$transition$',
@@ -5,6 +7,12 @@ angular.module('portainer.docker').controller('SecretController', [
   'SecretService',
   'Notifications',
   function ($scope, $transition$, $state, SecretService, Notifications) {
+    $scope.resourceType = ResourceControlType.Secret;
+
+    $scope.onUpdateResourceControlSuccess = function () {
+      $state.reload();
+    };
+
     $scope.removeSecret = function removeSecret(secretId) {
       SecretService.remove(secretId)
         .then(function success() {

app/docker/views/services/edit/service.html

@@ -198,7 +198,14 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel ng-if="service" resource-id="service.Id" resource-control="service.ResourceControl" resource-type="'service'"> </por-access-control-panel>
+<access-control-panel
+  ng-if="service"
+  resource-id="service.Id"
+  resource-control="service.ResourceControl"
+  resource-type="resourceType"
+  on-update-success="(onUpdateResourceControlSuccess)"
+>
+</access-control-panel>
 <!-- !access-control-panel -->
 
 <div class="row">

app/docker/views/services/edit/serviceController.js

@@ -21,6 +21,7 @@ import _ from 'lodash-es';
 
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
 import * as envVarsUtils from '@/portainer/helpers/env-vars';
+import { ResourceControlType } from '@/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('ServiceController', [
   '$q',
@@ -87,6 +88,12 @@ angular.module('portainer.docker').controller('ServiceController', [
     RegistryService,
     endpoint
   ) {
+    $scope.resourceType = ResourceControlType.Service;
+
+    $scope.onUpdateResourceControlSuccess = function () {
+      $state.reload();
+    };
+
     $scope.endpoint = endpoint;
 
     $scope.state = {

app/docker/views/volumes/edit/volume.html

@@ -52,7 +52,14 @@
 </div>
 
 <!-- access-control-panel -->
-<por-access-control-panel ng-if="volume" resource-id="volume.ResourceId" resource-control="volume.ResourceControl" resource-type="'volume'"> </por-access-control-panel>
+<access-control-panel
+  ng-if="volume"
+  resource-id="volume.ResourceId"
+  resource-control="volume.ResourceControl"
+  resource-type="resourceType"
+  on-update-success="(onUpdateResourceControlSuccess)"
+>
+</access-control-panel>
 <!-- !access-control-panel -->
 
 <div class="row" ng-if="!(volume.Options | emptyobject)">

app/docker/views/volumes/edit/volumeController.js

@@ -1,3 +1,5 @@
+import { ResourceControlType } from '@/portainer/access-control/types';
+
 angular.module('portainer.docker').controller('VolumeController', [
   '$scope',
   '$state',
@@ -9,6 +11,12 @@ angular.module('portainer.docker').controller('VolumeController', [
   'Notifications',
   'HttpRequestHelper',
   function ($scope, $state, $transition$, $q, ModalService, VolumeService, ContainerService, Notifications, HttpRequestHelper) {
+    $scope.resourceType = ResourceControlType.Volume;
+
+    $scope.onUpdateResourceControlSuccess = function () {
+      $state.reload();
+    };
+
     $scope.removeVolume = function removeVolume() {
       ModalService.confirmDeletion('Do you want to remove this volume?', (confirmed) => {
         if (confirmed) {