refactor(ui): move react components to react codebase [EE-3354] (#8258)

* refactor(ui): move react components to react codebase [EE-3354]

* refactor(app): move bocx selector options

* refactor(react): spearate portainer components

* fix(app): fix imports

app/portainer/react/components/index.ts

@@ -1,26 +1,12 @@
 import angular from 'angular';
 
 import { r2a } from '@/react-tools/react2angular';
-import {
-  DefaultRegistryAction,
-  DefaultRegistryDomain,
-  DefaultRegistryName,
-} from '@/react/portainer/registries/ListView/DefaultRegistry';
-import { Icon } from '@/react/components/Icon';
-import { ReactQueryDevtoolsWrapper } from '@/react/components/ReactQueryDevtoolsWrapper';
-import { AccessControlPanel } from '@/react/portainer/access-control';
 import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
-import { SettingsFDO } from '@/react/portainer/settings/EdgeComputeView/SettingsFDO';
-import { SettingsOpenAMT } from '@/react/portainer/settings/EdgeComputeView/SettingsOpenAMT';
-import { InternalAuth } from '@/react/portainer/settings/AuthenticationView/InternalAuth';
-import { PorAccessControlFormTeamSelector } from '@/react/portainer/access-control/PorAccessControlForm/TeamsSelector';
-import { PorAccessControlFormUserSelector } from '@/react/portainer/access-control/PorAccessControlForm/UsersSelector';
-import { PorAccessManagementUsersSelector } from '@/react/portainer/access-control/AccessManagement/PorAccessManagementUsersSelector';
-import { AccessTypeSelector } from '@/react/portainer/access-control/EditDetails/AccessTypeSelector';
-import { EdgeKeyDisplay } from '@/react/portainer/environments/ItemView/EdgeKeyDisplay';
 
+import { Icon } from '@@/Icon';
+import { ReactQueryDevtoolsWrapper } from '@@/ReactQueryDevtoolsWrapper';
 import { PageHeader } from '@@/PageHeader';
 import { TagSelector } from '@@/TagSelector';
 import { Loading } from '@@/Widget/Loading';
@@ -38,18 +24,21 @@ import { PortainerSelect } from '@@/form-components/PortainerSelect';
 import { Slider } from '@@/form-components/Slider';
 import { TagButton } from '@@/TagButton';
 import { BETeaserButton } from '@@/BETeaserButton';
-import { TimeWindowDisplay } from '@@/TimeWindowDisplay';
 import { CodeEditor } from '@@/CodeEditor';
 
 import { fileUploadField } from './file-upload-field';
 import { switchField } from './switch-field';
 import { customTemplatesModule } from './custom-templates';
 import { gitFormModule } from './git-form';
+import { settingsModule } from './settings';
+import { accessControlModule } from './access-control';
 
 export const componentsModule = angular
   .module('portainer.app.react.components', [
     customTemplatesModule,
     gitFormModule,
+    settingsModule,
+    accessControlModule,
   ])
   .component(
     'tagSelector',
@@ -74,17 +63,7 @@ export const componentsModule = angular
     'tagButton',
     r2a(TagButton, ['value', 'label', 'title', 'onRemove'])
   )
-  .component(
-    'accessTypeSelector',
-    r2a(AccessTypeSelector, [
-      'isAdmin',
-      'isPublicVisible',
-      'name',
-      'onChange',
-      'value',
-      'teams',
-    ])
-  )
+
   .component(
     'portainerTooltip',
     r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage'])
@@ -143,38 +122,6 @@ export const componentsModule = angular
     ])
   )
   .component('badgeIcon', r2a(BadgeIcon, ['icon', 'size']))
-  .component(
-    'accessControlPanel',
-    r2a(withUIRouter(withReactQuery(withCurrentUser(AccessControlPanel))), [
-      'disableOwnershipChange',
-      'onUpdateSuccess',
-      'resourceControl',
-      'resourceId',
-      'resourceType',
-      'environmentId',
-    ])
-  )
-  .component(
-    'defaultRegistryName',
-    r2a(withReactQuery(DefaultRegistryName), [])
-  )
-  .component(
-    'defaultRegistryAction',
-    r2a(withReactQuery(DefaultRegistryAction), [])
-  )
-  .component(
-    'defaultRegistryDomain',
-    r2a(withReactQuery(DefaultRegistryDomain), [])
-  )
-  .component(
-    'settingsFdo',
-    r2a(withUIRouter(withReactQuery(SettingsFDO)), ['onSubmit', 'settings'])
-  )
-  .component('settingsOpenAmt', r2a(SettingsOpenAMT, ['onSubmit', 'settings']))
-  .component(
-    'internalAuth',
-    r2a(InternalAuth, ['onSaveSettings', 'isLoading', 'value', 'onChange'])
-  )
   .component(
     'teamsSelector',
     r2a(TeamsSelector, [
@@ -188,24 +135,6 @@ export const componentsModule = angular
       'disabled',
     ])
   )
-  .component(
-    'porAccessControlFormTeamSelector',
-    r2a(PorAccessControlFormTeamSelector, [
-      'inputId',
-      'onChange',
-      'options',
-      'value',
-    ])
-  )
-  .component(
-    'porAccessControlFormUserSelector',
-    r2a(PorAccessControlFormUserSelector, [
-      'inputId',
-      'onChange',
-      'options',
-      'value',
-    ])
-  )
   .component(
     'porSelect',
     r2a(PortainerSelect, [
@@ -234,15 +163,7 @@ export const componentsModule = angular
       'dataCy',
     ])
   )
-  .component(
-    'porAccessManagementUsersSelector',
-    r2a(PorAccessManagementUsersSelector, ['onChange', 'options', 'value'])
-  )
-  .component('edgeKeyDisplay', r2a(EdgeKeyDisplay, ['edgeKey']))
-  .component(
-    'timeWindowDisplay',
-    r2a(withReactQuery(withUIRouter(TimeWindowDisplay)), [])
-  )
+
   .component(
     'reactCodeEditor',
     r2a(CodeEditor, [