refactor(app): move react components to react codebase [EE-3179] (#6971)

.eslintrc.yml

@@ -31,7 +31,12 @@ rules:
     [
       'error',
       {
-        pathGroups: [{ pattern: '@/**', group: 'internal' }, { pattern: '{Kubernetes,Portainer,Agent,Azure,Docker}/**', group: 'internal' }],
+        pathGroups:
+          [
+            { pattern: '@@/**', group: 'internal', position: 'after' },
+            { pattern: '@/**', group: 'internal' },
+            { pattern: '{Kubernetes,Portainer,Agent,Azure,Docker}/**', group: 'internal' },
+          ],
         groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
         pathGroupsExcludedImportTypes: ['internal'],
       },
@@ -41,6 +46,7 @@ settings:
   'import/resolver':
     alias:
       map:
+        - ['@@', './app/react/components']
         - ['@', './app']
       extensions: ['.js', '.ts', '.tsx']
 
@@ -68,7 +74,14 @@ overrides:
         version: 'detect'
     rules:
       import/order:
-        ['error', { pathGroups: [{ pattern: '@/**', group: 'internal' }], groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 'newlines-between': 'always' }]
+        [
+          'error',
+          {
+            pathGroups: [{ pattern: '@@/**', group: 'internal', position: 'after' }, { pattern: '@/**', group: 'internal' }],
+            groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+            'newlines-between': 'always',
+          },
+        ]
       func-style: [error, 'declaration']
       import/prefer-default-export: off
       no-use-before-define: ['error', { functions: false }]

app/azure/ContainerInstances/CreateContainerInstanceForm/CreateContainerInstanceForm.tsx

@@ -1,16 +1,17 @@
 import { Field, Form, Formik } from 'formik';
 import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
 
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Input, Select } from '@/portainer/components/form-components/Input';
-import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
-import { InputListError } from '@/portainer/components/form-components/InputList/InputList';
 import { ContainerInstanceFormValues } from '@/azure/types';
 import * as notifications from '@/portainer/services/notifications';
 import { useUser } from '@/portainer/hooks/useUser';
 import { AccessControlForm } from '@/portainer/access-control/AccessControlForm';
 
+import { FormControl } from '@@/form-components/FormControl';
+import { Input, Select } from '@@/form-components/Input';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { InputListError } from '@@/form-components/InputList/InputList';
+
 import { validationSchema } from './CreateContainerInstanceForm.validation';
 import { PortMapping, PortsMappingField } from './PortsMappingField';
 import { useLoadFormState } from './useLoadFormState';

app/azure/ContainerInstances/CreateContainerInstanceForm/PortsMappingField.tsx

@@ -1,11 +1,11 @@
-import { ButtonSelector } from '@/portainer/components/form-components/ButtonSelector/ButtonSelector';
-import { FormError } from '@/portainer/components/form-components/FormError';
-import { InputGroup } from '@/portainer/components/form-components/InputGroup';
-import { InputList } from '@/portainer/components/form-components/InputList';
+import { ButtonSelector } from '@@/form-components/ButtonSelector/ButtonSelector';
+import { FormError } from '@@/form-components/FormError';
+import { InputGroup } from '@@/form-components/InputGroup';
+import { InputList } from '@@/form-components/InputList';
 import {
   InputListError,
   ItemProps,
-} from '@/portainer/components/form-components/InputList/InputList';
+} from '@@/form-components/InputList/InputList';
 
 import styles from './PortsMappingField.module.css';
 

app/azure/ContainerInstances/CreateContainerInstanceForm/useLoadFormState.ts

@@ -4,13 +4,14 @@ import { useEffect } from 'react';
 import * as notifications from '@/portainer/services/notifications';
 import PortainerError from '@/portainer/error';
 import { EnvironmentId } from '@/portainer/environments/types';
-import { Option } from '@/portainer/components/form-components/Input/Select';
 import { getResourceGroups } from '@/azure/services/resource-groups.service';
 import { getSubscriptions } from '@/azure/services/subscription.service';
 import { getContainerInstanceProvider } from '@/azure/services/provider.service';
 import { ContainerInstanceFormValues, Subscription } from '@/azure/types';
 import { parseAccessControlFormData } from '@/portainer/access-control/utils';
 
+import { Option } from '@@/form-components/Input/Select';
+
 import {
   getSubscriptionLocations,
   getSubscriptionResourceGroups,

app/azure/ContainerInstances/CreateContainerInstanceView.tsx

@@ -1,7 +1,8 @@
-import { PageHeader } from '@/portainer/components/PageHeader';
-import { Widget, WidgetBody } from '@/portainer/components/widget';
 import { r2a } from '@/react-tools/react2angular';
 
+import { PageHeader } from '@@/PageHeader';
+import { Widget, WidgetBody } from '@@/Widget';
+
 import { CreateContainerInstanceForm } from './CreateContainerInstanceForm';
 
 export function CreateContainerInstanceView() {

app/azure/Dashboard/DashboardView.tsx

@@ -1,12 +1,13 @@
 import { useEffect } from 'react';
 
 import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
-import { PageHeader } from '@/portainer/components/PageHeader';
-import { DashboardItem } from '@/portainer/components/Dashboard/DashboardItem';
 import { error as notifyError } from '@/portainer/services/notifications';
 import PortainerError from '@/portainer/error';
 import { r2a } from '@/react-tools/react2angular';
 
+import { DashboardItem } from '@@/DashboardItem';
+import { PageHeader } from '@@/PageHeader';
+
 import { useResourceGroups, useSubscriptions } from '../queries';
 
 export function DashboardView() {

app/docker/components/container-quick-actions/ContainerQuickActions.tsx

@@ -1,10 +1,11 @@
 import clsx from 'clsx';
 
 import { Authorized } from '@/portainer/hooks/useUser';
-import { Link } from '@/portainer/components/Link';
 import { react2angular } from '@/react-tools/react2angular';
 import { DockerContainerStatus } from '@/docker/containers/types';
 
+import { Link } from '@@/Link';
+
 import styles from './ContainerQuickActions.module.css';
 
 interface QuickActionsState {

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

@@ -9,11 +9,18 @@ import {
 } from 'react-table';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
 
-import { PaginationControls } from '@/portainer/components/pagination-controls';
+import { useDebounce } from '@/portainer/hooks/useDebounce';
+import type {
+  ContainersTableSettings,
+  DockerContainer,
+} from '@/docker/containers/types';
+import { useEnvironment } from '@/portainer/environments/useEnvironment';
+
+import { PaginationControls } from '@@/PaginationControls';
 import {
   QuickActionsSettings,
   buildAction,
-} from '@/portainer/components/datatables/components/QuickActionsSettings';
+} from '@@/datatables/QuickActionsSettings';
 import {
   Table,
   TableActions,
@@ -23,25 +30,16 @@ import {
   TableSettingsMenu,
   TableTitle,
   TableTitleActions,
-} from '@/portainer/components/datatables/components';
-import { multiple } from '@/portainer/components/datatables/components/filter-types';
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
-import { ColumnVisibilityMenu } from '@/portainer/components/datatables/components/ColumnVisibilityMenu';
-import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
-import { useDebounce } from '@/portainer/hooks/useDebounce';
-import {
-  SearchBar,
-  useSearchBarState,
-} from '@/portainer/components/datatables/components/SearchBar';
-import type {
-  ContainersTableSettings,
-  DockerContainer,
-} from '@/docker/containers/types';
-import { useEnvironment } from '@/portainer/environments/useEnvironment';
-import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
-import { Checkbox } from '@/portainer/components/form-components/Checkbox';
-import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
-import { SelectedRowsCount } from '@/portainer/components/datatables/components/SelectedRowsCount';
+} from '@@/datatables';
+import { multiple } from '@@/datatables/filter-types';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
+import { useRepeater } from '@@/datatables/useRepeater';
+import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';
+import { useRowSelect } from '@@/datatables/useRowSelect';
+import { Checkbox } from '@@/form-components/Checkbox';
+import { TableFooter } from '@@/datatables/TableFooter';
+import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
 
 import { ContainersDatatableActions } from './ContainersDatatableActions';
 import { ContainersDatatableSettings } from './ContainersDatatableSettings';

app/docker/containers/components/ContainersDatatable/ContainersDatatableActions.tsx

@@ -2,7 +2,6 @@ import { useRouter } from '@uirouter/react';
 
 import * as notifications from '@/portainer/services/notifications';
 import { useAuthorizations, Authorized } from '@/portainer/hooks/useUser';
-import { Link } from '@/portainer/components/Link';
 import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
 import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request.helper';
 import type { ContainerId, DockerContainer } from '@/docker/containers/types';
@@ -16,7 +15,9 @@ import {
   stopContainer,
 } from '@/docker/containers/containers.service';
 import type { EnvironmentId } from '@/portainer/environments/types';
-import { ButtonGroup, Button } from '@/portainer/components/Button';
+
+import { Link } from '@@/Link';
+import { ButtonGroup, Button } from '@@/buttons';
 
 type ContainerServiceAction = (
   endpointId: EnvironmentId,

app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx

@@ -1,8 +1,9 @@
 import { react2angular } from '@/react-tools/react2angular';
 import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
-import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
 import type { Environment } from '@/portainer/environments/types';
 
+import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+
 import {
   ContainersDatatable,
   ContainerTableProps,

app/docker/containers/components/ContainersDatatable/ContainersDatatableSettings.tsx

@@ -1,8 +1,9 @@
-import { TableSettingsMenuAutoRefresh } from '@/portainer/components/datatables/components/TableSettingsMenuAutoRefresh';
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
-import { Checkbox } from '@/portainer/components/form-components/Checkbox';
 import type { ContainersTableSettings } from '@/docker/containers/types';
 
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+import { Checkbox } from '@@/form-components/Checkbox';
+
 interface Props {
   isRefreshVisible: boolean;
 }

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

@@ -3,12 +3,13 @@ import _ from 'lodash';
 import { useSref } from '@uirouter/react';
 
 import { useEnvironment } from '@/portainer/environments/useEnvironment';
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
 import type {
   ContainersTableSettings,
   DockerContainer,
 } from '@/docker/containers/types';
 
+import { useTableSettings } from '@@/datatables/useTableSettings';
+
 export const name: Column<DockerContainer> = {
   Header: 'Name',
   accessor: (row) => {

app/docker/containers/components/ContainersDatatable/columns/quick-actions.tsx

@@ -1,6 +1,5 @@
 import { CellProps, Column } from 'react-table';
 
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
 import { useEnvironment } from '@/portainer/environments/useEnvironment';
 import { useAuthorizations } from '@/portainer/hooks/useUser';
 import { ContainerQuickActions } from '@/docker/components/container-quick-actions/ContainerQuickActions';
@@ -10,6 +9,8 @@ import type {
 } from '@/docker/containers/types';
 import { EnvironmentStatus } from '@/portainer/environments/types';
 
+import { useTableSettings } from '@@/datatables/useTableSettings';
+
 export const quickActions: Column<DockerContainer> = {
   Header: 'Quick Actions',
   id: 'actions',

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

@@ -2,12 +2,13 @@ import { Column } from 'react-table';
 import clsx from 'clsx';
 import _ from 'lodash';
 
-import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
 import type {
   DockerContainer,
   DockerContainerStatus,
 } from '@/docker/containers/types';
 
+import { DefaultFilter } from '@@/datatables/Filter';
+
 export const state: Column<DockerContainer> = {
   Header: 'State',
   accessor: 'Status',

app/docker/containers/types.ts

@@ -1,11 +1,12 @@
 import { ResourceControlViewModel } from '@/portainer/access-control/models/ResourceControlViewModel';
+
 import {
   PaginationTableSettings,
   RefreshableTableSettings,
   SettableColumnsTableSettings,
   SettableQuickActionsTableSettings,
   SortableTableSettings,
-} from '@/portainer/components/datatables/types';
+} from '@@/datatables/types';
 
 export type DockerContainerStatus =
   | 'paused'

app/docker/networks/edit/NetworkContainersTable.tsx

@@ -1,9 +1,10 @@
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { DetailsTable } from '@/portainer/components/DetailsTable';
-import { Button } from '@/portainer/components/Button';
 import { Authorized } from '@/portainer/hooks/useUser';
 import { EnvironmentId } from '@/portainer/environments/types';
-import { Link } from '@/portainer/components/Link';
+
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { DetailsTable } from '@@/DetailsTable';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
 
 import { NetworkContainer, NetworkId } from '../types';
 import { useDisconnectContainer } from '../queries';

app/docker/networks/edit/NetworkDetailsTable.tsx

@@ -1,11 +1,12 @@
 import { Fragment } from 'react';
 import DockerNetworkHelper from 'Docker/helpers/networkHelper';
 
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { DetailsTable } from '@/portainer/components/DetailsTable';
-import { Button } from '@/portainer/components/Button';
 import { Authorized } from '@/portainer/hooks/useUser';
 
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { DetailsTable } from '@@/DetailsTable';
+import { Button } from '@@/buttons';
+
 import { isSystemNetwork } from '../network.helper';
 import { DockerNetwork, IPConfig } from '../types';
 

app/docker/networks/edit/NetworkDetailsView.tsx

@@ -4,12 +4,13 @@ import { useQueryClient } from 'react-query';
 import _ from 'lodash';
 
 import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
-import { PageHeader } from '@/portainer/components/PageHeader';
 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 { PageHeader } from '@@/PageHeader';
+
 import { useNetwork, useDeleteNetwork } from '../queries';
 import { isSystemNetwork } from '../network.helper';
 import { useContainers } from '../../containers/queries';

app/docker/networks/edit/NetworkOptionsTable.tsx

@@ -1,5 +1,5 @@
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { DetailsTable } from '@/portainer/components/DetailsTable';
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { DetailsTable } from '@@/DetailsTable';
 
 import { NetworkOptions } from '../types';
 

app/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/AMTDevicesDatatable.tsx

@@ -1,18 +1,14 @@
 import { usePagination, useTable } from 'react-table';
 
-import {
-  Table,
-  TableContainer,
-  TableHeaderRow,
-  TableRow,
-} from '@/portainer/components/datatables/components';
-import { InnerDatatable } from '@/portainer/components/datatables/components/InnerDatatable';
 import { Device } from '@/portainer/hostmanagement/open-amt/model';
 import { useAMTDevices } from '@/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/useAMTDevices';
 import { RowProvider } from '@/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/RowContext';
 import { EnvironmentId } from '@/portainer/environments/types';
 import PortainerError from '@/portainer/error';
 
+import { InnerDatatable } from '@@/datatables/InnerDatatable';
+import { Table, TableContainer, TableHeaderRow, TableRow } from '@@/datatables';
+
 import { useColumns } from './columns';
 
 export interface AMTDevicesTableProps {

app/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/columns/actions.tsx

@@ -4,11 +4,12 @@ import { MenuItem, MenuLink } from '@reach/menu-button';
 import { useQueryClient } from 'react-query';
 
 import { Device } from '@/portainer/hostmanagement/open-amt/model';
-import { ActionsMenu } from '@/portainer/components/datatables/components/ActionsMenu';
 import { confirmAsync } from '@/portainer/services/modal.service/confirm';
 import { executeDeviceAction } from '@/portainer/hostmanagement/open-amt/open-amt.service';
 import * as notifications from '@/portainer/services/notifications';
-import { ActionsMenuTitle } from '@/portainer/components/datatables/components/ActionsMenuTitle';
+
+import { ActionsMenu } from '@@/datatables/ActionsMenu';
+import { ActionsMenuTitle } from '@@/datatables/ActionsMenuTitle';
 
 import { useRowContext } from './RowContext';
 

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/EdgeDevicesDatatable.tsx

@@ -3,7 +3,10 @@ import { useRowSelectColumn } from '@lineup-lite/hooks';
 import _ from 'lodash';
 
 import { Environment } from '@/portainer/environments/types';
-import { PaginationControls } from '@/portainer/components/pagination-controls';
+import { AMTDevicesDatatable } from '@/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/AMTDevicesDatatable';
+import { EnvironmentGroup } from '@/portainer/environment-groups/types';
+
+import { PaginationControls } from '@@/PaginationControls';
 import {
   Table,
   TableActions,
@@ -13,17 +16,15 @@ import {
   TableSettingsMenu,
   TableTitle,
   TableTitleActions,
-} from '@/portainer/components/datatables/components';
-import { multiple } from '@/portainer/components/datatables/components/filter-types';
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
-import { ColumnVisibilityMenu } from '@/portainer/components/datatables/components/ColumnVisibilityMenu';
-import { SearchBar } from '@/portainer/components/datatables/components/SearchBar';
-import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
-import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
-import { SelectedRowsCount } from '@/portainer/components/datatables/components/SelectedRowsCount';
-import { AMTDevicesDatatable } from '@/edge/EdgeDevices/EdgeDevicesView/AMTDevicesDatatable/AMTDevicesDatatable';
-import { TextTip } from '@/portainer/components/Tip/TextTip';
-import { EnvironmentGroup } from '@/portainer/environment-groups/types';
+} from '@@/datatables';
+import { multiple } from '@@/datatables/filter-types';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
+import { SearchBar } from '@@/datatables/SearchBar';
+import { useRowSelect } from '@@/datatables/useRowSelect';
+import { TableFooter } from '@@/datatables/TableFooter';
+import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
+import { TextTip } from '@@/Tip/TextTip';
 
 import { EdgeDevicesDatatableActions } from './EdgeDevicesDatatableActions';
 import { EdgeDevicesDatatableSettings } from './EdgeDevicesDatatableSettings';

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/EdgeDevicesDatatableActions.tsx

@@ -1,13 +1,14 @@
 import { useRouter } from '@uirouter/react';
 
 import type { Environment } from '@/portainer/environments/types';
-import { Button } from '@/portainer/components/Button';
 import { confirmAsync } from '@/portainer/services/modal.service/confirm';
 import { promptAsync } from '@/portainer/services/modal.service/prompt';
 import * as notifications from '@/portainer/services/notifications';
 import { activateDevice } from '@/portainer/hostmanagement/open-amt/open-amt.service';
 import { deleteEndpoint } from '@/portainer/environments/environment.service';
-import { Link } from '@/portainer/components/Link';
+
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
 
 interface Props {
   selectedItems: Environment[];

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/EdgeDevicesDatatableContainer.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react';
 
+import { useEnvironmentList } from '@/portainer/environments/queries/useEnvironmentList';
+import { Environment } from '@/portainer/environments/types';
+import { useDebounce } from '@/portainer/hooks/useDebounce';
+
+import { useSearchBarState } from '@@/datatables/SearchBar';
 import {
   TableSettingsProvider,
   useTableSettings,
-} from '@/portainer/components/datatables/components/useTableSettings';
-import { useEnvironmentList } from '@/portainer/environments/queries/useEnvironmentList';
-import { Environment } from '@/portainer/environments/types';
-import { useSearchBarState } from '@/portainer/components/datatables/components/SearchBar';
-import { useDebounce } from '@/portainer/hooks/useDebounce';
+} from '@@/datatables/useTableSettings';
 
 import {
   EdgeDevicesDatatable,

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/EdgeDevicesDatatableSettings.tsx

@@ -1,5 +1,5 @@
-import { TableSettingsMenuAutoRefresh } from '@/portainer/components/datatables/components/TableSettingsMenuAutoRefresh';
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
+import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { EdgeDeviceTableSettings } from './types';
 

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/columns/actions.tsx

@@ -3,11 +3,12 @@ import { MenuItem, MenuLink } from '@reach/menu-button';
 import { useRouter, useSref } from '@uirouter/react';
 
 import { Environment } from '@/portainer/environments/types';
-import { ActionsMenu } from '@/portainer/components/datatables/components/ActionsMenu';
 import { snapshotEndpoint } from '@/portainer/environments/environment.service';
 import * as notifications from '@/portainer/services/notifications';
 import { getRoute } from '@/portainer/environments/utils';
 
+import { ActionsMenu } from '@@/datatables/ActionsMenu';
+
 export const actions: Column<Environment> = {
   Header: 'Actions',
   accessor: () => 'actions',

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/columns/group.tsx

@@ -1,7 +1,8 @@
 import { Column } from 'react-table';
 
 import { Environment } from '@/portainer/environments/types';
-import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
+
+import { DefaultFilter } from '@@/datatables/Filter';
 
 import { useRowContext } from './RowContext';
 

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/columns/name.tsx

@@ -1,8 +1,9 @@
 import { CellProps, Column } from 'react-table';
 
 import { Environment } from '@/portainer/environments/types';
-import { Link } from '@/portainer/components/Link';
-import { ExpandingCell } from '@/portainer/components/datatables/components/ExpandingCell';
+
+import { Link } from '@@/Link';
+import { ExpandingCell } from '@@/datatables/ExpandingCell';
 
 import { useRowContext } from './RowContext';
 

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesDatatable/types.ts

@@ -3,7 +3,7 @@ import {
   RefreshableTableSettings,
   SettableColumnsTableSettings,
   SortableTableSettings,
-} from '@/portainer/components/datatables/types';
+} from '@@/datatables/types';
 
 export interface Pagination {
   pageLimit: number;

app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesView.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
 
-import { PageHeader } from '@/portainer/components/PageHeader';
 import { useSettings } from '@/portainer/settings/queries';
 import { useGroups } from '@/portainer/environment-groups/queries';
 import { r2a } from '@/react-tools/react2angular';
-import { ViewLoading } from '@/portainer/components/ViewLoading';
+
+import { PageHeader } from '@@/PageHeader';
+import { ViewLoading } from '@@/ViewLoading';
 
 import { EdgeDevicesDatatableContainer } from './EdgeDevicesDatatable/EdgeDevicesDatatableContainer';
 

app/edge/EdgeDevices/WaitingRoomView/Datatable/Datatable.tsx

@@ -8,18 +8,16 @@ import {
 } from 'react-table';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
 
-import { Button } from '@/portainer/components/Button';
-import { Table } from '@/portainer/components/datatables/components';
-import {
-  SearchBar,
-  useSearchBarState,
-} from '@/portainer/components/datatables/components/SearchBar';
-import { SelectedRowsCount } from '@/portainer/components/datatables/components/SelectedRowsCount';
-import { PaginationControls } from '@/portainer/components/pagination-controls';
 import { Environment } from '@/portainer/environments/types';
-import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
 import { notifySuccess } from '@/portainer/services/notifications';
 
+import { Button } from '@@/buttons';
+import { Table } from '@@/datatables';
+import { SearchBar, useSearchBarState } from '@@/datatables/SearchBar';
+import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
+import { PaginationControls } from '@@/PaginationControls';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+
 import { useAssociateDeviceMutation } from '../queries';
 
 import { TableSettings } from './types';

app/edge/EdgeDevices/WaitingRoomView/Datatable/types.ts

@@ -1,7 +1,7 @@
 import {
   PaginationTableSettings,
   SortableTableSettings,
-} from '@/portainer/components/datatables/types';
+} from '@@/datatables/types';
 
 export interface TableSettings
   extends SortableTableSettings,

app/edge/EdgeDevices/WaitingRoomView/WaitingRoomView.tsx

@@ -1,10 +1,11 @@
 import { useRouter } from '@uirouter/react';
 
-import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
-import { PageHeader } from '@/portainer/components/PageHeader';
 import { useEnvironmentList } from '@/portainer/environments/queries/useEnvironmentList';
 import { r2a } from '@/react-tools/react2angular';
 
+import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+import { PageHeader } from '@@/PageHeader';
+
 import { DataTable } from './Datatable/Datatable';
 import { TableSettings } from './Datatable/types';
 

app/edge/components/EdgeCheckInIntervalField.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Select } from '@/portainer/components/form-components/Input';
 import { useSettings } from '@/portainer/settings/queries';
 import { r2a } from '@/react-tools/react2angular';
 
+import { FormControl } from '@@/form-components/FormControl';
+import { Select } from '@@/form-components/Input';
+
 interface Props {
   value: number;
   onChange(value: number): void;

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

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

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

@@ -1,12 +1,13 @@
 import { useReducer } from 'react';
 
-import { Button } from '@/portainer/components/Button';
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
 import { useUser } from '@/portainer/hooks/useUser';
 import { r2a } from '@/react-tools/react2angular';
 import { TeamMembership, Role } from '@/portainer/teams/types';
 import { useUserMembership } from '@/portainer/users/queries';
 
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { Button } from '@@/buttons';
+
 import { ResourceControlType, ResourceId } from '../types';
 import { ResourceControlViewModel } from '../models/ResourceControlViewModel';
 

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

@@ -3,13 +3,14 @@ import { PropsWithChildren } from 'react';
 import _ from 'lodash';
 
 import { ownershipIcon, truncate } from '@/portainer/filters/filters';
-import { Tooltip } from '@/portainer/components/Tip/Tooltip';
-import { Link } from '@/portainer/components/Link';
 import { UserId } from '@/portainer/users/types';
 import { TeamId } from '@/portainer/teams/types';
 import { useTeams } from '@/portainer/teams/queries';
 import { useUsers } from '@/portainer/users/queries';
 
+import { Link } from '@@/Link';
+import { Tooltip } from '@@/Tip/Tooltip';
+
 import {
   ResourceControlOwnership,
   ResourceControlType,

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

@@ -4,11 +4,12 @@ import { useMutation } from 'react-query';
 import { object } from 'yup';
 
 import { useUser } from '@/portainer/hooks/useUser';
-import { Button } from '@/portainer/components/Button';
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
 import { confirmAsync } from '@/portainer/services/modal.service/confirm';
 import { notifySuccess } from '@/portainer/services/notifications';
 
+import { Button } from '@@/buttons';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+
 import { EditDetails } from '../EditDetails';
 import { parseAccessControlFormData } from '../utils';
 import { validationSchema } from '../AccessControlForm/AccessControlForm.validation';

app/portainer/access-control/EditDetails/EditDetails.tsx

@@ -1,9 +1,10 @@
 import { useCallback } from 'react';
 import { FormikErrors } from 'formik';
 
-import { BoxSelector } from '@/portainer/components/BoxSelector';
 import { useUser } from '@/portainer/hooks/useUser';
-import { FormError } from '@/portainer/components/form-components/FormError';
+
+import { BoxSelector } from '@@/BoxSelector';
+import { FormError } from '@@/form-components/FormError';
 
 import { ResourceControlOwnership, AccessControlFormData } from '../types';
 

app/portainer/access-control/EditDetails/TeamsField.tsx

@@ -1,8 +1,9 @@
-import { TeamsSelector } from '@/portainer/components/TeamsSelector';
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Link } from '@/portainer/components/Link';
 import { Team } from '@/portainer/teams/types';
 
+import { TeamsSelector } from '@@/TeamsSelector';
+import { FormControl } from '@@/form-components/FormControl';
+import { Link } from '@@/Link';
+
 interface Props {
   name: string;
   teams: Team[];

app/portainer/access-control/EditDetails/UsersField.tsx

@@ -1,8 +1,9 @@
-import { UsersSelector } from '@/portainer/components/UsersSelector';
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Link } from '@/portainer/components/Link';
 import { User } from '@/portainer/users/types';
 
+import { UsersSelector } from '@@/UsersSelector';
+import { FormControl } from '@@/form-components/FormControl';
+import { Link } from '@@/Link';
+
 interface Props {
   name: string;
   users: User[];

app/portainer/access-control/EditDetails/useOptions.ts

@@ -2,10 +2,11 @@ import _ from 'lodash';
 import { useEffect, useState } from 'react';
 
 import { buildOption } from '@/portainer/components/BoxSelector';
-import { BoxSelectorOption } from '@/portainer/components/BoxSelector/types';
 import { ownershipIcon } from '@/portainer/filters/filters';
 import { Team } from '@/portainer/teams/types';
 
+import { BoxSelectorOption } from '@@/BoxSelector/types';
+
 import { ResourceControlOwnership } from '../types';
 
 const publicOption: BoxSelectorOption<ResourceControlOwnership> = {

app/portainer/components/BEFeatureIndicator/BEFeatureIndicator.controller.ts

@@ -1,6 +1,6 @@
 import { FeatureId } from '@/portainer/feature-flags/enums';
 
-import { getFeatureDetails } from './utils';
+import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
 
 export default class BeIndicatorController {
   limitedToBE?: boolean;

app/portainer/components/BEFeatureIndicator/index.ts

@@ -1,8 +1,6 @@
 import controller from './BEFeatureIndicator.controller';
 
-import './BEFeatureIndicator.css';
-
-export const beFeatureIndicatorAngular = {
+export const beFeatureIndicator = {
   templateUrl: './BEFeatureIndicator.html',
   controller,
   bindings: {
@@ -10,5 +8,3 @@ export const beFeatureIndicatorAngular = {
   },
   transclude: true,
 };
-
-export { BEFeatureIndicator } from './BEFeatureIndicator';

app/portainer/components/BoxSelector/index.ts

@@ -2,12 +2,11 @@ import angular from 'angular';
 
 import { react2angular } from '@/react-tools/react2angular';
 
-import { BoxSelector, buildOption } from './BoxSelector';
+import { BoxSelector } from '@@/BoxSelector';
+
 import { BoxSelectorAngular } from './BoxSelectorAngular';
 
-export { type BoxSelectorOption } from './types';
-
-export { BoxSelector, buildOption };
+export { buildOption } from './utils';
 const BoxSelectorReact = react2angular(BoxSelector, [
   'value',
   'onChange',
@@ -15,7 +14,7 @@ const BoxSelectorReact = react2angular(BoxSelector, [
   'radioName',
 ]);
 
-export default angular
+export const boxSelectorModule = angular
   .module('app.portainer.component.box-selector', [])
   .component('boxSelectorReact', BoxSelectorReact)
   .component('boxSelector', BoxSelectorAngular).name;

app/portainer/components/BoxSelector/utils.ts

@@ -0,0 +1,14 @@
+import { FeatureId } from '@/portainer/feature-flags/enums';
+
+import { BoxSelectorOption } from '@@/BoxSelector/types';
+
+export function buildOption<T extends number | string>(
+  id: string,
+  icon: string,
+  label: string,
+  description: string,
+  value: T,
+  feature?: FeatureId
+): BoxSelectorOption<T> {
+  return { id, icon, label, description, value, feature };
+}

app/portainer/components/Button/index.ts

@@ -1,5 +0,0 @@
-import { Button } from './Button';
-import { AddButton } from './AddButton';
-import { ButtonGroup } from './ButtonGroup';
-
-export { Button, AddButton, ButtonGroup };

app/portainer/components/InformationPanel/index.ts

@@ -1,3 +1 @@
-export { InformationPanel } from './InformationPanel';
-
 export { InformationPanelAngular } from './InformationPanelAngular';

app/portainer/components/PageHeader/HeaderContainer.ts

@@ -0,0 +1,4 @@
+export const Header = {
+  transclude: true,
+  templateUrl: './HeaderContainer.html',
+};

app/portainer/components/PageHeader/HeaderContent.ts

@@ -0,0 +1,8 @@
+import controller from './HeaderContent.controller';
+
+export const HeaderContent = {
+  requires: '^rdHeader',
+  transclude: true,
+  templateUrl: './HeaderContent.html',
+  controller,
+};

app/portainer/components/PageHeader/HeaderTitle.ts

@@ -0,0 +1,11 @@
+import controller from './HeaderTitle.controller';
+
+export const HeaderTitle = {
+  requires: '^rdHeader',
+  bindings: {
+    titleText: '@',
+  },
+  transclude: true,
+  templateUrl: './HeaderTitle.html',
+  controller,
+};

app/portainer/components/PageHeader/index.ts

@@ -1,16 +1,12 @@
 import angular from 'angular';
 
-import { Breadcrumbs } from './Breadcrumbs';
-import { PageHeader } from './PageHeader';
-import { HeaderContainer, HeaderAngular } from './HeaderContainer';
-import { HeaderContent, HeaderContentAngular } from './HeaderContent';
-import { HeaderTitle, HeaderTitleAngular } from './HeaderTitle';
-
-export { PageHeader, Breadcrumbs, HeaderContainer, HeaderContent, HeaderTitle };
+import { Header } from './HeaderContainer';
+import { HeaderContent } from './HeaderContent';
+import { HeaderTitle } from './HeaderTitle';
 
 export const pageHeaderModule = angular
   .module('portainer.app.components.header', [])
 
-  .component('rdHeader', HeaderAngular)
-  .component('rdHeaderContent', HeaderContentAngular)
-  .component('rdHeaderTitle', HeaderTitleAngular).name;
+  .component('rdHeader', Header)
+  .component('rdHeaderContent', HeaderContent)
+  .component('rdHeaderTitle', HeaderTitle).name;

app/portainer/components/ReactExample.module.css

@@ -1,3 +0,0 @@
-.red-bg {
-  background: red;
-}

app/portainer/components/ReactExample.stories.tsx

@@ -1,24 +0,0 @@
-import { UIRouter, pushStateLocationPlugin } from '@uirouter/react';
-import { Meta } from '@storybook/react';
-
-import { ReactExample } from './ReactExample';
-
-const meta: Meta = {
-  title: 'ReactExample',
-  component: ReactExample,
-};
-
-export default meta;
-export { Example };
-
-interface Props {
-  text: string;
-}
-
-function Example({ text }: Props) {
-  return (
-    <UIRouter plugins={[pushStateLocationPlugin]}>
-      <ReactExample text={text} />
-    </UIRouter>
-  );
-}

app/portainer/components/ReactExample.tsx

@@ -1,59 +0,0 @@
-import { useSref } from '@uirouter/react';
-import { Trans, useTranslation } from 'react-i18next';
-
-import i18n from '@/i18n';
-import { react2angular } from '@/react-tools/react2angular';
-
-import { Link } from './Link';
-import styles from './ReactExample.module.css';
-
-export interface ReactExampleProps {
-  /**
-   * Example text to displayed in the component.
-   */
-  text: string;
-}
-
-const lngs = {
-  en: { nativeName: 'English' },
-  de: { nativeName: 'Deutsch' },
-  he: { nativeName: 'Hebrew' },
-};
-
-export function ReactExample({ text }: ReactExampleProps) {
-  const route = 'portainer.registries';
-  const { onClick, href } = useSref(route);
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <div className={styles.redBg}>{text}</div>
-      <div>
-        <a href={href} onClick={onClick}>
-          {t('Registries useSref')}
-        </a>
-      </div>
-      <div>
-        <Link to={route}>
-          <Trans>
-            Registries <strong>Link</strong>
-          </Trans>
-        </Link>
-      </div>
-      {Object.entries(lngs).map(([lng, lngConfig]) => (
-        <button
-          key={lng}
-          style={{
-            fontWeight: i18n.resolvedLanguage === lng ? 'bold' : 'normal',
-          }}
-          type="submit"
-          onClick={() => i18n.changeLanguage(lng)}
-        >
-          {lngConfig.nativeName}
-        </button>
-      ))}
-    </div>
-  );
-}
-
-export const ReactExampleAngular = react2angular(ReactExample, ['text']);

app/portainer/components/Tip/Tooltip/index.ts

@@ -1,4 +1 @@
-import { Tooltip } from './Tooltip';
-import { TooltipAngular } from './TooltipAngular';
-
-export { Tooltip, TooltipAngular };
+export { TooltipAngular } from './TooltipAngular';

app/portainer/components/ViewLoading/index.ts

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

app/portainer/components/form-components/FileUpload/index.ts

@@ -1,2 +0,0 @@
-export { FileUploadField, FileUploadFieldAngular } from './FileUploadField';
-export { FileUploadForm } from './FileUploadForm';

app/portainer/components/form-components/SwitchField/index.ts

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

app/portainer/components/form-components/index.js

@@ -3,13 +3,4 @@ import angular from 'angular';
 import { webEditorForm } from './web-editor-form';
 import { fileUploadForm } from './file-upload-form';
 
-import { SwitchFieldAngular } from './SwitchField';
-
-import { FileUploadFieldAngular } from './FileUpload';
-
-export default angular
-  .module('portainer.app.components.form', [])
-  .component('webEditorForm', webEditorForm)
-  .component('fileUploadForm', fileUploadForm)
-  .component('fileUploadField', FileUploadFieldAngular)
-  .component('porSwitchField', SwitchFieldAngular).name;
+export default angular.module('portainer.app.components.form', []).component('webEditorForm', webEditorForm).component('fileUploadForm', fileUploadForm).name;

app/portainer/components/index.js

@@ -1,28 +1,20 @@
 import angular from 'angular';
 
-import { CreateAccessTokenAngular } from '../views/account/CreateAccessToken';
-
+import formComponentsModule from './form-components';
 import sidebarModule from './sidebar';
 import gitFormModule from './forms/git-form';
 import porAccessManagementModule from './accessManagement';
-import formComponentsModule from './form-components';
 import widgetModule from './widget';
-import boxSelectorModule from './BoxSelector';
+import { boxSelectorModule } from './BoxSelector';
 import { pageHeaderModule } from './PageHeader';
 
-import { ReactExampleAngular } from './ReactExample';
 import { TooltipAngular } from './Tip/Tooltip';
-import { beFeatureIndicatorAngular } from './BEFeatureIndicator';
+import { beFeatureIndicator } from './BEFeatureIndicator';
 import { InformationPanelAngular } from './InformationPanel';
-import { PasswordCheckHintAngular } from './PasswordCheckHint';
-import { ViewLoadingAngular } from './ViewLoading';
 
 export default angular
   .module('portainer.app.components', [pageHeaderModule, boxSelectorModule, widgetModule, sidebarModule, gitFormModule, porAccessManagementModule, formComponentsModule])
   .component('informationPanel', InformationPanelAngular)
-  .component('viewLoading', ViewLoadingAngular)
+
   .component('portainerTooltip', TooltipAngular)
-  .component('reactExample', ReactExampleAngular)
-  .component('beFeatureIndicator', beFeatureIndicatorAngular)
-  .component('passwordCheckHint', PasswordCheckHintAngular)
-  .component('createAccessToken', CreateAccessTokenAngular).name;
+  .component('beFeatureIndicator', beFeatureIndicator).name;

app/portainer/components/sidebar/SidebarMenuItem/SidebarMenuItem.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import clsx from 'clsx';
 import { UISrefActive } from '@uirouter/react';
 
-import { Link } from '@/portainer/components/Link';
+import { Link } from '@@/Link';
 
 import '../sidebar.css';
 import styles from './SidebarMenuItem.module.css';

app/portainer/components/widget/index.ts

@@ -1,18 +1,14 @@
 import angular from 'angular';
 
-import { LoadingAngular } from './Loading';
-import { rdWidget, Widget } from './Widget';
-import { rdWidgetBody, WidgetBody } from './WidgetBody';
-import { rdWidgetCustomHeader } from './WidgetCustomHeader';
-import { rdWidgetFooter, WidgetFooter } from './WidgetFooter';
-import { rdWidgetTitle, WidgetTitle } from './WidgetTitle';
-import { rdWidgetTaskbar, WidgetTaskbar } from './WidgetTaskbar';
-
-export { Widget, WidgetBody, WidgetFooter, WidgetTitle, WidgetTaskbar };
+import { rdWidgetBody } from './rd-widget-body';
+import { rdWidget } from './rd-widget';
+import { rdWidgetCustomHeader } from './rd-widget-custom-header';
+import { rdWidgetFooter } from './rd-widget-footer';
+import { rdWidgetTaskbar } from './rd-widget-taskbar';
+import { rdWidgetTitle } from './rd-widget-title';
 
 export default angular
-  .module('portainer.shared.components.widget', [])
-  .component('rdLoading', LoadingAngular)
+  .module('portainer.app.components.widget', [])
   .component('rdWidget', rdWidget)
   .component('rdWidgetBody', rdWidgetBody)
   .component('rdWidgetCustomHeader', rdWidgetCustomHeader)

app/portainer/components/widget/rd-widget-body.ts

@@ -0,0 +1,14 @@
+export const rdWidgetBody = {
+  requires: '^rdWidget',
+  bindings: {
+    loading: '@?',
+    classes: '@?',
+  },
+  transclude: true,
+  template: `
+    <div class="widget-body" ng-class="$ctrl.classes">
+      <rd-loading ng-show="$ctrl.loading"></rd-loading>
+      <div ng-hide="$ctrl.loading" class="widget-content" ng-transclude></div>
+    </div>
+  `,
+};

app/portainer/components/widget/rd-widget-footer.ts

@@ -0,0 +1,7 @@
+export const rdWidgetFooter = {
+  requires: '^rdWidget',
+  transclude: true,
+  template: `
+    <div class="widget-footer" ng-transclude></div>
+  `,
+};

app/portainer/components/widget/rd-widget-taskbar.ts

@@ -0,0 +1,14 @@
+export const rdWidgetTaskbar = {
+  requires: '^rdWidget',
+  bindings: {
+    classes: '@?',
+  },
+  transclude: true,
+  template: `
+    <div class="widget-header">
+      <div class="row">
+        <div ng-class="$ctrl.classes" ng-transclude></div>
+      </div>
+    </div>
+  `,
+};

app/portainer/components/widget/rd-widget-title.ts

@@ -0,0 +1,22 @@
+export const rdWidgetTitle = {
+  requires: '^rdWidget',
+  bindings: {
+    titleText: '@',
+    icon: '@',
+    classes: '@?',
+  },
+  transclude: {
+    title: '?headerTitle',
+  },
+  template: `
+    <div class="widget-header">
+      <div class="row">
+        <span ng-class="$ctrl.classes" class="pull-left">
+          <i class="fa" ng-class="$ctrl.icon"></i>
+          <span ng-transclude="title">{{ $ctrl.titleText }}</span>
+        </span>
+        <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>
+      </div>
+    </div>
+`,
+};

app/portainer/components/widget/rd-widget.ts

@@ -0,0 +1,4 @@
+export const rdWidget = {
+  transclude: true,
+  template: `<div class="widget" ng-transclude></div>`,
+};

app/portainer/home/BackupFailedPanel.tsx

@@ -2,11 +2,12 @@ import { useQuery } from 'react-query';
 
 import { error as notifyError } from '@/portainer/services/notifications';
 
-import { InformationPanel } from '../components/InformationPanel';
-import { TextTip } from '../components/Tip/TextTip';
+import { InformationPanel } from '@@/InformationPanel';
+import { TextTip } from '@@/Tip/TextTip';
+import { Link } from '@@/Link';
+
 import { getBackupStatus } from '../services/api/backup.service';
 import { isoDate } from '../filters/filters';
-import { Link } from '../components/Link';
 
 export function BackupFailedPanel() {
   const { status, isLoading } = useBackupStatus();

app/portainer/home/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx

@@ -13,11 +13,12 @@ import {
   isEdgeEnvironment,
 } from '@/portainer/environments/utils';
 import type { TagId } from '@/portainer/tags/types';
-import { Button } from '@/portainer/components/Button';
-import { Link } from '@/portainer/components/Link';
 import { useIsAdmin } from '@/portainer/hooks/useUser';
 import { useTags } from '@/portainer/tags/queries';
 
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+
 import { EnvironmentIcon } from './EnvironmentIcon';
 import { EdgeIndicator } from './EdgeIndicator';
 import { EnvironmentStats } from './EnvironmentStats';

app/portainer/home/EnvironmentList/EnvironmentList.tsx

@@ -1,7 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
 import clsx from 'clsx';
 
-import { PaginationControls } from '@/portainer/components/pagination-controls';
 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
 import {
   Environment,
@@ -9,23 +8,11 @@ import {
   EnvironmentStatus,
 } from '@/portainer/environments/types';
 import { EnvironmentGroupId } from '@/portainer/environment-groups/types';
-import { Button } from '@/portainer/components/Button';
 import { useIsAdmin } from '@/portainer/hooks/useUser';
-import {
-  FilterSearchBar,
-  useSearchBarState,
-} from '@/portainer/components/datatables/components/FilterSearchBar';
-import { SortbySelector } from '@/portainer/components/datatables/components/SortbySelector';
 import {
   HomepageFilter,
   useHomePageFilter,
 } from '@/portainer/home/HomepageFilter';
-import {
-  TableActions,
-  TableContainer,
-  TableTitle,
-} from '@/portainer/components/datatables/components';
-import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
 import { useDebounce } from '@/portainer/hooks/useDebounce';
 import {
   refetchIfAnyOffline,
@@ -35,6 +22,16 @@ import { useGroups } from '@/portainer/environment-groups/queries';
 import { useTags } from '@/portainer/tags/queries';
 import { Filter } from '@/portainer/home/types';
 
+import { TableFooter } from '@@/datatables/TableFooter';
+import { TableActions, TableContainer, TableTitle } from '@@/datatables';
+import { SortbySelector } from '@@/datatables/SortbySelector';
+import {
+  FilterSearchBar,
+  useSearchBarState,
+} from '@@/datatables/FilterSearchBar';
+import { Button } from '@@/buttons';
+import { PaginationControls } from '@@/PaginationControls';
+
 import { EnvironmentItem } from './EnvironmentItem';
 import { KubeconfigButton } from './KubeconfigButton';
 import styles from './EnvironmentList.module.css';

app/portainer/home/EnvironmentList/KubeconfigButton.tsx

@@ -4,7 +4,8 @@ import { Environment } from '@/portainer/environments/types';
 import { EnvironmentsQueryParams } from '@/portainer/environments/environment.service/index';
 import { isKubernetesEnvironment } from '@/portainer/environments/utils';
 import { trackEvent } from '@/angulartics.matomo/analytics-services';
-import { Button } from '@/portainer/components/Button';
+
+import { Button } from '@@/buttons';
 
 import { KubeconfigPrompt } from './KubeconfigPrompt';
 import '@reach/dialog/styles.css';

app/portainer/home/EnvironmentList/KubeconfigPrompt.tsx

@@ -4,14 +4,15 @@ import { DialogOverlay } from '@reach/dialog';
 
 import * as kcService from '@/kubernetes/services/kubeconfig.service';
 import * as notifications from '@/portainer/services/notifications';
-import { Button } from '@/portainer/components/Button';
-import { Checkbox } from '@/portainer/components/form-components/Checkbox';
 import { EnvironmentType } from '@/portainer/environments/types';
 import { EnvironmentsQueryParams } from '@/portainer/environments/environment.service/index';
-import { PaginationControls } from '@/portainer/components/pagination-controls';
 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
 import { useEnvironmentList } from '@/portainer/environments/queries/useEnvironmentList';
 
+import { PaginationControls } from '@@/PaginationControls';
+import { Checkbox } from '@@/form-components/Checkbox';
+import { Button } from '@@/buttons';
+
 import { useSelection } from './KubeconfigSelection';
 import styles from './KubeconfigPrompt.module.css';
 import '@reach/dialog/styles.css';

app/portainer/home/EnvironmentList/NoEnvironmentsInfoPanel.tsx

@@ -1,6 +1,6 @@
-import { InformationPanel } from '@/portainer/components/InformationPanel';
-import { Link } from '@/portainer/components/Link';
-import { TextTip } from '@/portainer/components/Tip/TextTip';
+import { InformationPanel } from '@@/InformationPanel';
+import { Link } from '@@/Link';
+import { TextTip } from '@@/Tip/TextTip';
 
 export function NoEnvironmentsInfoPanel({ isAdmin }: { isAdmin: boolean }) {
   return (

app/portainer/home/HomeView.tsx

@@ -3,7 +3,8 @@ import { useState } from 'react';
 
 import { r2a } from '@/react-tools/react2angular';
 
-import { PageHeader } from '../components/PageHeader';
+import { PageHeader } from '@@/PageHeader';
+
 import * as notifications from '../services/notifications';
 import { Environment } from '../environments/types';
 import { snapshotEndpoints } from '../environments/environment.service';

app/portainer/home/HomepageFilter.tsx

@@ -1,9 +1,10 @@
 import { components, OptionProps } from 'react-select';
 
 import { useLocalStorage } from '@/portainer/hooks/useLocalStorage';
-import { Select } from '@/portainer/components/form-components/ReactSelect';
 import { Filter } from '@/portainer/home/types';
 
+import { Select } from '@@/form-components/ReactSelect';
+
 interface Props {
   filterOptions: Filter[];
   onChange: (filterOptions: Filter[]) => void;

app/portainer/home/LicenseNodePanel.tsx

@@ -2,8 +2,9 @@ import { useQuery } from 'react-query';
 
 import { error as notifyError } from '@/portainer/services/notifications';
 
-import { InformationPanel } from '../components/InformationPanel';
-import { TextTip } from '../components/Tip/TextTip';
+import { InformationPanel } from '@@/InformationPanel';
+import { TextTip } from '@@/Tip/TextTip';
+
 import { LicenseType } from '../license-management/types';
 import { useLicenseInfo } from '../license-management/use-license.service';
 import { getNodesCount } from '../services/api/status.service';

app/portainer/home/MotdPanel.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 
 import { useUIState } from '@/portainer/hooks/UIStateProvider';
 
-import { InformationPanel } from '../components/InformationPanel/InformationPanel';
+import { InformationPanel } from '@@/InformationPanel';
 
 import { getMotd } from './home.service';
 

app/portainer/react/components/file-upload-field.ts

@@ -0,0 +1,12 @@
+import { r2a } from '@/react-tools/react2angular';
+
+import { FileUploadField } from '@@/form-components/FileUpload';
+
+export const fileUploadField = r2a(FileUploadField, [
+  'onChange',
+  'value',
+  'title',
+  'required',
+  'accept',
+  'inputId',
+]);

app/portainer/react/components/index.ts

@@ -1,8 +1,14 @@
 import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
-import { TagSelector } from '@/react/components/TagSelector';
 
+import { TagSelector } from '@@/TagSelector';
+import { Loading } from '@@/Widget/Loading';
+import { PasswordCheckHint } from '@@/PasswordCheckHint';
+import { ViewLoading } from '@@/ViewLoading';
+
+import { fileUploadField } from './file-upload-field';
+import { switchField } from './switch-field';
 import { customTemplatesModule } from './custom-templates';
 
 export const componentsModule = angular
@@ -10,4 +16,12 @@ export const componentsModule = angular
   .component(
     'tagSelector',
     r2a(TagSelector, ['allowCreate', 'onChange', 'value'])
-  ).name;
+  )
+  .component('fileUploadField', fileUploadField)
+  .component('porSwitchField', switchField)
+  .component(
+    'passwordCheckHint',
+    r2a(PasswordCheckHint, ['forceChangePassword', 'passwordValid'])
+  )
+  .component('rdLoading', r2a(Loading, []))
+  .component('viewLoading', r2a(ViewLoading, ['message'])).name;

app/portainer/react/components/switch-field.ts

@@ -0,0 +1,15 @@
+import { r2a } from '@/react-tools/react2angular';
+
+import { SwitchField } from '@@/form-components/SwitchField';
+
+export const switchField = r2a(SwitchField, [
+  'tooltip',
+  'checked',
+  'label',
+  'name',
+  'labelClass',
+  'dataCy',
+  'disabled',
+  'onChange',
+  'featureId',
+]);

app/portainer/react/views/index.ts

@@ -1,7 +1,13 @@
 import angular from 'angular';
 
+import { r2a } from '@/react-tools/react2angular';
+import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenView';
+
 import { wizardModule } from './wizard';
 
-export const viewsModule = angular.module('portainer.app.react.views', [
-  wizardModule,
-]).name;
+export const viewsModule = angular
+  .module('portainer.app.react.views', [wizardModule])
+  .component(
+    'createAccessToken',
+    r2a(CreateAccessToken, ['onSubmit', 'onError'])
+  ).name;

app/portainer/services/modal.service/prompt.ts

@@ -1,6 +1,6 @@
 import sanitize from 'sanitize-html';
 import bootbox from 'bootbox';
-import '@/portainer/components/BoxSelector/BoxSelectorItem.css';
+import '@@/BoxSelector/BoxSelectorItem.css';
 
 import { applyBoxCSS, ButtonsOptions, confirmButtons } from './utils';
 

app/portainer/settings/authentication/components/SaveAuthSettingsButton.tsx

@@ -1,5 +1,5 @@
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
-import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 
 export interface Props {
   onSubmit(): void;

app/portainer/settings/authentication/internal-auth/InternalAuth.tsx

@@ -1,7 +1,8 @@
-import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
 import { react2angular } from '@/react-tools/react2angular';
 import { confirm } from '@/portainer/services/modal.service/confirm';
 
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
+
 import { SaveAuthSettingsButton } from '../components/SaveAuthSettingsButton';
 import { Settings } from '../../types';
 

app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx

@@ -2,14 +2,15 @@ import { Field, Form, Formik } from 'formik';
 import * as yup from 'yup';
 import { useCallback, useEffect } from 'react';
 
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
-import { Input } from '@/portainer/components/form-components/Input';
 import { baseHref } from '@/portainer/helpers/pathHelper';
 import { notifySuccess } from '@/portainer/services/notifications';
 import { useUpdateSettingsMutation } from '@/portainer/settings/queries';
 
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { FormControl } from '@@/form-components/FormControl';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
+import { Input } from '@@/form-components/Input';
+
 import { Settings } from '../types';
 
 import { EnabledWaitingRoomSwitch } from './EnableWaitingRoomSwitch';

app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx

@@ -1,12 +1,13 @@
 import { useMutation } from 'react-query';
 import { useEffect } from 'react';
 
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
 import { generateKey } from '@/portainer/environments/environment.service/edge';
 import { useSettings } from '@/portainer/settings/queries';
 import { EdgeScriptForm } from '@/react/edge/components/EdgeScriptForm';
 import { commandsTabs } from '@/react/edge/components/EdgeScriptForm/scripts';
 
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+
 import { AutoEnvCreationSettingsForm } from './AutoEnvCreationSettingsForm';
 
 const commands = {

app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx

@@ -1,9 +1,10 @@
 import { useField } from 'formik';
 
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Switch } from '@/portainer/components/form-components/SwitchField/Switch';
 import { confirmAsync } from '@/portainer/services/modal.service/confirm';
 
+import { FormControl } from '@@/form-components/FormControl';
+import { Switch } from '@@/form-components/SwitchField/Switch';
+
 export function EnabledWaitingRoomSwitch() {
   const [inputProps, meta, helpers] = useField<boolean>('TrustOnFirstConnect');
 

app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx

@@ -1,12 +1,13 @@
 import { Formik, Form } from 'formik';
 
-import { Switch } from '@/portainer/components/form-components/SwitchField/Switch';
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
-import { TextTip } from '@/portainer/components/Tip/TextTip';
 import { EdgeCheckinIntervalField } from '@/edge/components/EdgeCheckInIntervalField';
-import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
+
+import { Switch } from '@@/form-components/SwitchField/Switch';
+import { FormControl } from '@@/form-components/FormControl';
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { TextTip } from '@@/Tip/TextTip';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 
 import { Settings } from '../types';
 

app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx

@@ -1,14 +1,15 @@
 import { useTable, usePagination, useSortBy } from 'react-table';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
 import { FDOProfilesDatatableActions } from 'Portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions';
-import { SelectedRowsCount } from 'Portainer/components/datatables/components/SelectedRowsCount';
-import { PaginationControls } from 'Portainer/components/pagination-controls';
-import { TableFooter } from 'Portainer/components/datatables/components/TableFooter';
-import { useTableSettings } from 'Portainer/components/datatables/components/useTableSettings';
-import { useRowSelect } from 'Portainer/components/datatables/components/useRowSelect';
 
 import { Profile } from '@/portainer/hostmanagement/fdo/model';
 import PortainerError from '@/portainer/error';
+
+import { PaginationControls } from '@@/PaginationControls';
+import { SelectedRowsCount } from '@@/datatables/SelectedRowsCount';
+import { TableFooter } from '@@/datatables/TableFooter';
+import { useTableSettings } from '@@/datatables/useTableSettings';
+import { useRowSelect } from '@@/datatables/useRowSelect';
 import {
   Table,
   TableActions,
@@ -16,11 +17,11 @@ import {
   TableHeaderRow,
   TableRow,
   TableTitle,
-} from '@/portainer/components/datatables/components';
+} from '@@/datatables';
 import {
   PaginationTableSettings,
   SortableTableSettings,
-} from '@/portainer/components/datatables/types';
+} from '@@/datatables/types';
 
 import { useFDOProfiles } from './useFDOProfiles';
 import { useColumns } from './columns';

app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx

@@ -1,9 +1,7 @@
 import { useQueryClient } from 'react-query';
 import { useRouter } from '@uirouter/react';
 
-import { Button } from '@/portainer/components/Button';
 import { Profile } from '@/portainer/hostmanagement/fdo/model';
-import { Link } from '@/portainer/components/Link';
 import { confirmAsync } from '@/portainer/services/modal.service/confirm';
 import * as notifications from '@/portainer/services/notifications';
 import {
@@ -11,6 +9,9 @@ import {
   duplicateProfile,
 } from '@/portainer/hostmanagement/fdo/fdo.service';
 
+import { Link } from '@@/Link';
+import { Button } from '@@/buttons';
+
 interface Props {
   isFDOEnabled: boolean;
   selectedItems: Profile[];

app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableContainer.tsx

@@ -1,4 +1,4 @@
-import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
+import { TableSettingsProvider } from '@@/datatables/useTableSettings';
 
 import {
   FDOProfilesDatatable,

app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx

@@ -1,16 +1,17 @@
 import { useEffect, useState } from 'react';
 import { Formik, Field, Form } from 'formik';
 
-import { Switch } from '@/portainer/components/form-components/SwitchField/Switch';
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { FormSectionTitle } from '@/portainer/components/form-components/FormSectionTitle';
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
-import { TextTip } from '@/portainer/components/Tip/TextTip';
-import { Input } from '@/portainer/components/form-components/Input';
 import { FDOConfiguration } from '@/portainer/hostmanagement/fdo/model';
 import { FDOProfilesDatatableContainer } from '@/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableContainer';
 
+import { Switch } from '@@/form-components/SwitchField/Switch';
+import { FormControl } from '@@/form-components/FormControl';
+import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { TextTip } from '@@/Tip/TextTip';
+import { Input } from '@@/form-components/Input';
+
 import styles from './SettingsFDO.module.css';
 import { validationSchema } from './SettingsFDO.validation';
 

app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx

@@ -1,15 +1,16 @@
 import { useState } from 'react';
 import { Formik, Field, Form } from 'formik';
 
-import { Switch } from '@/portainer/components/form-components/SwitchField/Switch';
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
-import { TextTip } from '@/portainer/components/Tip/TextTip';
-import { Input } from '@/portainer/components/form-components/Input';
-import { FileUploadField } from '@/portainer/components/form-components/FileUpload';
 import { OpenAMTConfiguration } from '@/portainer/hostmanagement/open-amt/model';
 
+import { Switch } from '@@/form-components/SwitchField/Switch';
+import { FormControl } from '@@/form-components/FormControl';
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { TextTip } from '@@/Tip/TextTip';
+import { Input } from '@@/form-components/Input';
+import { FileUploadField } from '@@/form-components/FileUpload';
+
 import { validationSchema } from './SettingsOpenAMT.validation';
 
 export interface Settings {

app/portainer/teams/CreateTeamForm/CreateTeamForm.tsx

@@ -1,12 +1,13 @@
 import { Formik, Field, Form } from 'formik';
 
-import { FormControl } from '@/portainer/components/form-components/FormControl';
-import { Widget, WidgetBody, WidgetTitle } from '@/portainer/components/widget';
 import { UserViewModel } from '@/portainer/models/user';
 import { TeamViewModel } from '@/portainer/models/team';
-import { Input } from '@/portainer/components/form-components/Input';
-import { UsersSelector } from '@/portainer/components/UsersSelector';
-import { LoadingButton } from '@/portainer/components/Button/LoadingButton';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { Input } from '@@/form-components/Input';
+import { UsersSelector } from '@@/UsersSelector';
+import { LoadingButton } from '@@/buttons/LoadingButton';
 
 import { validationSchema } from './CreateTeamForm.validation';
 

app/portainer/views/account/CreateAccessToken/index.ts

@@ -1,9 +0,0 @@
-import { react2angular } from '@/react-tools/react2angular';
-
-import { CreateAccessToken } from './CreateAccessToken';
-
-const CreateAccessTokenAngular = react2angular(CreateAccessToken, [
-  'onSubmit',
-  'onError',
-]);
-export { CreateAccessToken, CreateAccessTokenAngular };