refactor(docker): move components to react [EE-3348] (#7084)

app/docker/__module.js

@@ -3,11 +3,8 @@ import angular from 'angular';
 import { EnvironmentStatus } from '@/portainer/environments/types';
 
 import { reactModule } from './react';
-import containersModule from './containers';
-import { componentsModule } from './components';
-import { networksModule } from './networks';
 
-angular.module('portainer.docker', ['portainer.app', containersModule, componentsModule, networksModule, reactModule]).config([
+angular.module('portainer.docker', ['portainer.app', reactModule]).config([
   '$stateRegistryProvider',
   function ($stateRegistryProvider) {
     'use strict';

app/docker/components/index.ts

@@ -1,7 +0,0 @@
-import angular from 'angular';
-
-import { ContainerQuickActionsAngular } from './container-quick-actions';
-
-export const componentsModule = angular
-  .module('portainer.docker.components', [])
-  .component('containerQuickActions', ContainerQuickActionsAngular).name;

app/docker/containers/index.ts

@@ -1,7 +0,0 @@
-import angular from 'angular';
-
-import { ContainersDatatableAngular } from './components/ContainersDatatable/ContainersDatatableContainer';
-
-export default angular
-  .module('portainer.docker.containers', [])
-  .component('containersDatatable', ContainersDatatableAngular).name;

app/docker/networks/edit/index.ts

@@ -1,5 +0,0 @@
-import { react2angular } from '@/react-tools/react2angular';
-
-import { NetworkDetailsView } from './NetworkDetailsView';
-
-export const NetworkDetailsViewAngular = react2angular(NetworkDetailsView, []);

app/docker/networks/index.ts

@@ -1,7 +0,0 @@
-import angular from 'angular';
-
-import { NetworkDetailsViewAngular } from './edit';
-
-export const networksModule = angular
-  .module('portainer.docker.networks', [])
-  .component('networkDetailsView', NetworkDetailsViewAngular).name;

app/docker/react/components/index.ts

@@ -1,6 +1,29 @@
 import angular from 'angular';
 
-export const componentsModule = angular.module(
+import { r2a } from '@/react-tools/react2angular';
-  'portainer.docker.react.components',
+import { ContainersDatatableContainer } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableContainer';
-  []
+import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
-).name;
+
+export const componentsModule = angular
+  .module('portainer.docker.react.components', [])
+  .component(
+    'containersDatatable',
+    r2a(ContainersDatatableContainer, [
+      'endpoint',
+      'isAddActionVisible',
+      'dataset',
+      'onRefresh',
+      'isHostColumnVisible',
+      'tableKey',
+    ])
+  )
+  .component(
+    'containerQuickActions',
+    r2a(ContainerQuickActions, [
+      'containerId',
+      'nodeName',
+      'state',
+      'status',
+      'taskId',
+    ])
+  ).name;

app/docker/react/views/index.ts

@@ -1,6 +1,8 @@
 import angular from 'angular';
 
-export const viewsModule = angular.module(
+import { ItemView } from '@/react/docker/networks/ItemView';
-  'portainer.docker.react.views',
+import { r2a } from '@/react-tools/react2angular';
-  []
+
-).name;
+export const viewsModule = angular
+  .module('portainer.docker.react.views', [])
+  .component('networkDetailsView', r2a(ItemView, [])).name;

app/docker/services/containerService.js

@@ -8,7 +8,7 @@ import {
   resumeContainer,
   startContainer,
   stopContainer,
-} from '@/docker/containers/containers.service';
+} from '@/react/docker/containers/containers.service';
 import { ContainerDetailsViewModel, ContainerStatsViewModel, ContainerViewModel } from '../models/container';
 
 angular.module('portainer.docker').factory('ContainerService', ContainerServiceFactory);

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

@@ -13,7 +13,7 @@ import { useDebounce } from '@/portainer/hooks/useDebounce';
 import type {
   ContainersTableSettings,
   DockerContainer,
-} from '@/docker/containers/types';
+} from '@/react/docker/containers/types';
 import { useEnvironment } from '@/portainer/environments/useEnvironment';
 
 import { PaginationControls } from '@@/PaginationControls';

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableActions.tsx

@@ -4,7 +4,10 @@ import * as notifications from '@/portainer/services/notifications';
 import { useAuthorizations, Authorized } from '@/portainer/hooks/useUser';
 import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
 import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request.helper';
-import type { ContainerId, DockerContainer } from '@/docker/containers/types';
+import type {
+  ContainerId,
+  DockerContainer,
+} from '@/react/docker/containers/types';
 import {
   killContainer,
   pauseContainer,
@@ -13,7 +16,7 @@ import {
   resumeContainer,
   startContainer,
   stopContainer,
-} from '@/docker/containers/containers.service';
+} from '@/react/docker/containers/containers.service';
 import type { EnvironmentId } from '@/portainer/environments/types';
 
 import { Link } from '@@/Link';

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableContainer.tsx

@@ -1,4 +1,3 @@
-import { react2angular } from '@/react-tools/react2angular';
 import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
 import type { Environment } from '@/portainer/environments/types';
 
@@ -36,15 +35,3 @@ export function ContainersDatatableContainer({
     </EnvironmentProvider>
   );
 }
-
-export const ContainersDatatableAngular = react2angular(
-  ContainersDatatableContainer,
-  [
-    'endpoint',
-    'isAddActionVisible',
-    'dataset',
-    'onRefresh',
-    'isHostColumnVisible',
-    'tableKey',
-  ]
-);

app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings.tsx

@@ -1,4 +1,4 @@
-import type { ContainersTableSettings } from '@/docker/containers/types';
+import type { ContainersTableSettings } from '@/react/docker/containers/types';
 
 import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
 import { useTableSettings } from '@@/datatables/useTableSettings';

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

@@ -1,7 +1,7 @@
 import { Column } from 'react-table';
 
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
-import type { DockerContainer } from '@/docker/containers/types';
+import type { DockerContainer } from '@/react/docker/containers/types';
 
 export const created: Column<DockerContainer> = {
   Header: 'Created',

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

@@ -1,6 +1,6 @@
 import { Column } from 'react-table';
 
-import type { DockerContainer } from '@/docker/containers/types';
+import type { DockerContainer } from '@/react/docker/containers/types';
 
 export const host: Column<DockerContainer> = {
   Header: 'Host',

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

@@ -3,7 +3,7 @@ import { useSref } from '@uirouter/react';
 
 import { useEnvironment } from '@/portainer/environments/useEnvironment';
 import { EnvironmentStatus } from '@/portainer/environments/types';
-import type { DockerContainer } from '@/docker/containers/types';
+import type { DockerContainer } from '@/react/docker/containers/types';
 
 export const image: Column<DockerContainer> = {
   Header: 'Image',

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

@@ -1,6 +1,6 @@
 import { Column } from 'react-table';
 
-import type { DockerContainer } from '@/docker/containers/types';
+import type { DockerContainer } from '@/react/docker/containers/types';
 
 export const ip: Column<DockerContainer> = {
   Header: 'IP Address',

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

@@ -6,7 +6,7 @@ import { useEnvironment } from '@/portainer/environments/useEnvironment';
 import type {
   ContainersTableSettings,
   DockerContainer,
-} from '@/docker/containers/types';
+} from '@/react/docker/containers/types';
 
 import { useTableSettings } from '@@/datatables/useTableSettings';
 

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

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

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

@@ -2,7 +2,7 @@ import { Column } from 'react-table';
 import _ from 'lodash';
 
 import { useEnvironment } from '@/portainer/environments/useEnvironment';
-import type { DockerContainer, Port } from '@/docker/containers/types';
+import type { DockerContainer, Port } from '@/react/docker/containers/types';
 
 export const ports: Column<DockerContainer> = {
   Header: 'Published Ports',

app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx

@@ -2,11 +2,11 @@ import { CellProps, Column } from 'react-table';
 
 import { useEnvironment } from '@/portainer/environments/useEnvironment';
 import { useAuthorizations } from '@/portainer/hooks/useUser';
-import { ContainerQuickActions } from '@/docker/components/container-quick-actions/ContainerQuickActions';
+import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions';
 import type {
   ContainersTableSettings,
   DockerContainer,
-} from '@/docker/containers/types';
+} from '@/react/docker/containers/types';
 import { EnvironmentStatus } from '@/portainer/environments/types';
 
 import { useTableSettings } from '@@/datatables/useTableSettings';

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

@@ -1,6 +1,6 @@
 import { Column } from 'react-table';
 
-import type { DockerContainer } from '@/docker/containers/types';
+import type { DockerContainer } from '@/react/docker/containers/types';
 
 export const stack: Column<DockerContainer> = {
   Header: 'Stack',

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

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import type {
   DockerContainer,
   DockerContainerStatus,
-} from '@/docker/containers/types';
+} from '@/react/docker/containers/types';
 
 import { DefaultFilter } from '@@/datatables/Filter';
 

app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 
+import { DockerContainerStatus } from '@/react/docker/containers/types';
 import { Authorized } from '@/portainer/hooks/useUser';
 import { react2angular } from '@/react-tools/react2angular';
-import { DockerContainerStatus } from '@/docker/containers/types';
 
 import { Link } from '@@/Link';
 

app/react/docker/containers/containers.service.ts

@@ -1,9 +1,9 @@
 import { EnvironmentId } from '@/portainer/environments/types';
 import PortainerError from '@/portainer/error';
 import axios from '@/portainer/services/axios';
+import { genericHandler } from '@/docker/rest/response/handlers';
 
 import { NetworkId } from '../networks/types';
-import { genericHandler } from '../rest/response/handlers';
 
 import { ContainerId, DockerContainer } from './types';
 

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

@@ -7,21 +7,21 @@ import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
 import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
 import { AccessControlPanel } from '@/portainer/access-control/AccessControlPanel/AccessControlPanel';
 import { ResourceControlType } from '@/portainer/access-control/types';
-import { DockerContainer } from '@/docker/containers/types';
+import { DockerContainer } from '@/react/docker/containers/types';
 import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
 
 import { PageHeader } from '@@/PageHeader';
 
 import { useNetwork, useDeleteNetwork } from '../queries';
 import { isSystemNetwork } from '../network.helper';
-import { useContainers } from '../../containers/queries';
 import { DockerNetwork, NetworkContainer } from '../types';
+import { useContainers } from '../../containers/queries';
 
 import { NetworkDetailsTable } from './NetworkDetailsTable';
 import { NetworkOptionsTable } from './NetworkOptionsTable';
 import { NetworkContainersTable } from './NetworkContainersTable';
 
-export function NetworkDetailsView() {
+export function ItemView() {
   const router = useRouter();
   const queryClient = useQueryClient();
 

app/react/docker/networks/ItemView/index.ts

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

app/react/docker/networks/network.service.ts

@@ -1,8 +1,7 @@
+import { ContainerId } from '@/react/docker/containers/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/portainer/environments/types';
 
-import { ContainerId } from '../containers/types';
-
 import { NetworkId, DockerNetwork } from './types';
 
 type NetworkAction = 'connect' | 'disconnect' | 'create';

app/react/docker/networks/queries.ts

@@ -5,8 +5,7 @@ import {
   error as notifyError,
   success as notifySuccess,
 } from '@/portainer/services/notifications';
-
+import { ContainerId } from '@/react/docker/containers/types';
-import { ContainerId } from '../containers/types';
 
 import {
   getNetwork,