refactor(app): move access-control components [EE-3441] (#7559)

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

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

app/docker/models/config.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/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/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/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/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/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/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/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/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/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/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 export function VolumeViewModel(data) {
   this.Id = data.Name;

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

@@ -1,4 +1,4 @@
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('ConfigController', [
   '$scope',

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

@@ -2,8 +2,8 @@ import moment from 'moment';
 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 { FeatureId } from '@/portainer/feature-flags/enums';
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('ContainerController', [
   '$q',

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

@@ -1,4 +1,4 @@
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('SecretController', [
   '$scope',

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

@@ -21,7 +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';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('ServiceController', [
   '$q',

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

@@ -1,4 +1,4 @@
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.docker').controller('VolumeController', [
   '$scope',

app/kubernetes/custom-templates/kube-edit-custom-template-view/kube-edit-custom-template-view.controller.js

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 import { AccessControlFormData } from '@/portainer/components/accessControlForm/porAccessControlFormModel';
 import { isBE } from '@/portainer/feature-flags/feature-flags.service';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';

app/portainer/__module.js

@@ -7,7 +7,6 @@ import featureFlagModule from './feature-flags';
 import userActivityModule from './user-activity';
 import servicesModule from './services';
 import homeModule from './home';
-import { accessControlModule } from './access-control';
 import { reactModule } from './react';
 import { sidebarModule } from './react/views/sidebar';
 import environmentsModule from './environments';
@@ -39,7 +38,6 @@ angular
     userActivityModule,
     'portainer.shared.datatable',
     servicesModule,
-    accessControlModule,
     reactModule,
     sidebarModule,
     environmentsModule,

app/portainer/access-control/index.ts

@@ -1,7 +0,0 @@
-import angular from 'angular';
-
-import { AccessControlPanelAngular } from './AccessControlPanel/AccessControlPanel';
-
-export const accessControlModule = angular
-  .module('portainer.access-control', [])
-  .component('accessControlPanel', AccessControlPanelAngular).name;

app/portainer/components/accessControlForm/porAccessControlFormController.js

@@ -1,5 +1,5 @@
 import _ from 'lodash-es';
-import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
+import { ResourceControlOwnership as RCO } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.app').controller('porAccessControlFormController', [
   '$q',

app/portainer/components/accessControlForm/porAccessControlFormModel.js

@@ -1,4 +1,4 @@
-import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
+import { ResourceControlOwnership as RCO } from '@/react/portainer/access-control/types';
 
 /**
  * @deprecated use only for angularjs components. For react components use ./model.ts

app/portainer/components/datatables/genericDatatableController.js

@@ -1,6 +1,6 @@
 import _ from 'lodash-es';
 import './datatable.css';
-import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
+import { ResourceControlOwnership as RCO } from '@/react/portainer/access-control/types';
 
 function isBetween(value, a, b) {
   return (value >= a && value <= b) || (value >= b && value <= a);

app/portainer/filters/filters.js

@@ -3,7 +3,7 @@ import _ from 'lodash-es';
 import filesize from 'filesize';
 
 import { Eye, EyeOff, Users } from 'react-feather';
-import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
+import { ResourceControlOwnership as RCO } from '@/react/portainer/access-control/types';
 
 export function truncateLeftRight(text, max, left, right) {
   max = isNaN(max) ? 50 : max;

app/portainer/helpers/resourceControlHelper.js

@@ -1,6 +1,6 @@
 import _ from 'lodash-es';
 import angular from 'angular';
-import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
+import { ResourceControlOwnership as RCO } from '@/react/portainer/access-control/types';
 import { ResourceControlOwnershipParameters } from '../models/resourceControl/resourceControlOwnershipParameters';
 
 class ResourceControlHelper {

app/portainer/models/stack.js

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

app/portainer/react/components/index.ts

@@ -4,6 +4,7 @@ import { react2angular } from 'react2angular';
 import { r2a } from '@/react-tools/react2angular';
 import { Icon } from '@/react/components/Icon';
 import { ReactQueryDevtoolsWrapper } from '@/react/components/ReactQueryDevtoolsWrapper';
+import { AccessControlPanel } from '@/react/portainer/access-control';
 
 import { PageHeader } from '@@/PageHeader';
 import { TagSelector } from '@@/TagSelector';
@@ -88,4 +89,14 @@ export const componentsModule = angular
   .component(
     'boxSelectorBadgeIcon',
     react2angular(BadgeIcon, ['featherIcon', 'icon'])
+  )
+  .component(
+    'accessControlPanel',
+    r2a(AccessControlPanel, [
+      'disableOwnershipChange',
+      'onUpdateSuccess',
+      'resourceControl',
+      'resourceId',
+      'resourceType',
+    ])
   ).name;

app/portainer/services/formValidator.js

@@ -1,4 +1,4 @@
-import { ResourceControlOwnership as RCO } from '@/portainer/access-control/types';
+import { ResourceControlOwnership as RCO } from '@/react/portainer/access-control/types';
 
 angular.module('portainer.app').factory('FormValidator', [
   function FormValidatorFactory() {

app/portainer/views/custom-templates/edit-custom-template-view/editCustomTemplateViewController.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { getTemplateVariables, intersectVariables } from '@/react/portainer/custom-templates/components/utils';

app/portainer/views/stacks/edit/stackController.js

@@ -1,4 +1,4 @@
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 import { AccessControlFormData } from 'Portainer/components/accessControlForm/porAccessControlFormModel';
 import { FeatureId } from 'Portainer/feature-flags/enums';
 import { getEnvironments } from '@/portainer/environments/environment.service';

app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.tsx

@@ -4,7 +4,7 @@ import { useRouter } from '@uirouter/react';
 import { ContainerInstanceFormValues } from '@/react/azure/types';
 import * as notifications from '@/portainer/services/notifications';
 import { useUser } from '@/portainer/hooks/useUser';
-import { AccessControlForm } from '@/portainer/access-control/AccessControlForm';
+import { AccessControlForm } from '@/react/portainer/access-control/AccessControlForm';
 import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
 
 import { FormControl } from '@@/form-components/FormControl';

app/react/azure/container-instances/CreateView/CreateContainerInstanceForm.validation.ts

@@ -1,6 +1,6 @@
 import { object, string, number, boolean } from 'yup';
 
-import { validationSchema as accessControlSchema } from '@/portainer/access-control/AccessControlForm/AccessControlForm.validation';
+import { validationSchema as accessControlSchema } from '@/react/portainer/access-control/AccessControlForm/AccessControlForm.validation';
 
 import { validationSchema as portsSchema } from './PortsMappingField.validation';
 

app/react/azure/container-instances/CreateView/useCreateInstanceMutation.tsx

@@ -9,7 +9,7 @@ import {
   ContainerInstanceFormValues,
   ResourceGroup,
 } from '@/react/azure/types';
-import { applyResourceControl } from '@/portainer/access-control/access-control.service';
+import { applyResourceControl } from '@/react/portainer/access-control/access-control.service';
 
 import { getSubscriptionResourceGroups } from './utils';
 

app/react/azure/container-instances/CreateView/useLoadFormState.ts

@@ -5,7 +5,7 @@ import {
   ResourceGroup,
   Subscription,
 } from '@/react/azure/types';
-import { parseAccessControlFormData } from '@/portainer/access-control/utils';
+import { parseAccessControlFormData } from '@/react/portainer/access-control/utils';
 import { useUser } from '@/portainer/hooks/useUser';
 import { useProvider } from '@/react/azure/queries/useProvider';
 import { useResourceGroups } from '@/react/azure/queries/useResourceGroups';

app/react/azure/container-instances/ItemView/ItemView.tsx

@@ -2,9 +2,9 @@ import { useCurrentStateAndParams } from '@uirouter/react';
 import { useQueryClient } from 'react-query';
 
 import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
-import { AccessControlPanel } from '@/portainer/access-control/AccessControlPanel/AccessControlPanel';
+import { AccessControlPanel } from '@/react/portainer/access-control/AccessControlPanel/AccessControlPanel';
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 import {
   ContainerGroup,
   ResourceGroup,

app/react/azure/container-instances/ListView/columns/ownership.tsx

@@ -2,9 +2,9 @@ import { Column } from 'react-table';
 import clsx from 'clsx';
 
 import { ownershipIcon } from '@/portainer/filters/filters';
-import { ResourceControlOwnership } from '@/portainer/access-control/types';
+import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
 import { ContainerGroup } from '@/react/azure/types';
-import { determineOwnership } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { determineOwnership } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 export const ownership: Column<ContainerGroup> = {
   Header: 'Ownership',

app/react/azure/types.ts

@@ -1,4 +1,4 @@
-import { AccessControlFormData } from '@/portainer/access-control/types';
+import { AccessControlFormData } from '@/react/portainer/access-control/types';
 import { PortainerMetadata } from '@/react/docker/types';
 
 import { PortMapping } from './container-instances/CreateView/PortsMappingField';

app/react/docker/containers/ListView/ContainersDatatable/columns/ownership.tsx

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

app/react/docker/containers/types.ts

@@ -1,4 +1,4 @@
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 import { DockerContainerResponse } from './types/response';
 

app/react/docker/containers/utils.ts

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { useInfo } from 'Docker/services/system.service';
 import { EnvironmentId } from 'Portainer/environments/types';
 
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 import { DockerContainer, ContainerStatus } from './types';
 import { DockerContainerResponse } from './types/response';

app/react/docker/networks/ItemView/ItemView.tsx

@@ -5,10 +5,10 @@ import _ from 'lodash';
 
 import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
 import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
-import { AccessControlPanel } from '@/portainer/access-control/AccessControlPanel/AccessControlPanel';
+import { AccessControlPanel } from '@/react/portainer/access-control/AccessControlPanel/AccessControlPanel';
-import { ResourceControlType } from '@/portainer/access-control/types';
+import { ResourceControlType } from '@/react/portainer/access-control/types';
 import { DockerContainer } from '@/react/docker/containers/types';
-import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 import { useContainers } from '@/react/docker/containers/queries/containers';
 
 import { PageHeader } from '@@/PageHeader';

app/react/docker/types.ts

@@ -1,4 +1,4 @@
-import { ResourceControlResponse } from '@/portainer/access-control/types';
+import { ResourceControlResponse } from '@/react/portainer/access-control/types';
 
 interface AgentMetadata {
   NodeName: string;

app/react/portainer/access-control/AccessControlForm/AccessControlForm.tsx

@@ -1,11 +1,11 @@
 import { FormikErrors } from 'formik';
 
 import { useUser } from '@/portainer/hooks/useUser';
-import { EditDetails } from '@/portainer/access-control/EditDetails/EditDetails';
 
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 import { SwitchField } from '@@/form-components/SwitchField';
 
+import { EditDetails } from '../EditDetails';
 import { ResourceControlOwnership, AccessControlFormData } from '../types';
 
 export interface Props {

app/react/portainer/access-control/AccessControlPanel/AccessControlPanel.tsx

@@ -2,7 +2,6 @@ import { useReducer } from 'react';
 
 import { useUser } from '@/portainer/hooks/useUser';
 import { Icon } from '@/react/components/Icon';
-import { r2a } from '@/react-tools/react2angular';
 import { TeamMembership, TeamRole } from '@/react/portainer/users/teams/types';
 import { useUserMembership } from '@/portainer/users/queries';
 
@@ -142,11 +141,3 @@ function isLeaderOfAnyRestrictedTeams(
       resourceControl.TeamAccesses.some((ta) => ta.TeamId === membership.TeamID)
   );
 }
-
-export const AccessControlPanelAngular = r2a(AccessControlPanel, [
-  'resourceControl',
-  'resourceType',
-  'disableOwnershipChange',
-  'resourceId',
-  'onUpdateSuccess',
-]);

app/react/portainer/access-control/AccessControlPanel/index.ts

@@ -0,0 +1 @@
+export { AccessControlPanel } from './AccessControlPanel';

app/react/portainer/access-control/access-control.service.ts

@@ -1,4 +1,4 @@
-import axios, { parseAxiosError } from '../services/axios';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
 
 import {
   AccessControlFormData,

app/react/portainer/access-control/index.ts

@@ -0,0 +1,2 @@
+export { AccessControlPanel } from './AccessControlPanel';
+export { AccessControlForm } from './AccessControlForm';

app/react/portainer/access-control/utils.ts

@@ -1,6 +1,5 @@
 import { TeamId } from '@/react/portainer/users/teams/types';
-
+import { UserId } from '@/portainer/users/types';
-import { UserId } from '../users/types';
 
 import {
   AccessControlFormData,