From 1e21961e6aca9be71ddef82ddddba0ca9bc62a08 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Wed, 21 Sep 2022 09:14:29 +0300
Subject: [PATCH] refactor(app): move settings components to react [EE-3442]
 (#7625)

---
 app/angulartics.matomo/analytics-services.ts  |   2 +-
 .../EdgeDevicesView/EdgeDevicesView.tsx       |   2 +-
 .../components/EdgeAsyncIntervalsForm.tsx     | 163 ++++++++++++++++++
 .../components/EdgeCheckInIntervalField.tsx   |   2 +-
 app/edge/components/useIntervalOptions.ts     |  67 +++++++
 .../environments/queries/useAgentDetails.ts   |   2 +-
 .../feature-flags/useRedirectFeatureFlag.ts   |   2 +-
 .../EnvironmentItem/EdgeIndicator.tsx         |   2 +-
 .../KubeconfigButton/KubeconfigPrompt.tsx     |   2 +-
 .../hostmanagement/fdo/fdo.service.ts         |   2 +-
 .../open-amt/open-amt.service.ts              |   3 +-
 app/portainer/react/components/index.ts       |  12 ++
 app/portainer/react/views/index.ts            |  17 ++
 .../settings/authentication/index.js          |   3 +-
 .../authentication/internal-auth/index.ts     |   1 -
 .../edge-compute/SettingsFDO/index.ts         |  11 --
 .../edge-compute/SettingsOpenAMT/index.ts     |   9 -
 app/portainer/settings/index.js               |  10 +-
 app/react/components/PasswordCheckHint.tsx    |   2 +-
 app/react/docker/containers/utils.ts          |   4 +-
 .../networks/ItemView/NetworkDetailsTable.tsx |   2 +-
 .../DefaultRegistry/DefaultRegistryAction.tsx |   9 +-
 .../DefaultRegistry/DefaultRegistryDomain.tsx |   3 +-
 .../DefaultRegistry/DefaultRegistryName.tsx   |   3 +-
 .../InternalAuth}/Badge.tsx                   |   0
 .../InternalAuth}/InternalAuth.tsx            |  15 +-
 .../PasswordLengthSlider.module.css           |   0
 .../PasswordLengthSlider.tsx                  |   4 +-
 .../InternalAuth}/SaveAuthSettingsButton.tsx  |   0
 .../AuthenticationView/InternalAuth/index.ts  |   1 +
 .../AutoEnvCreationSettingsForm.tsx           |   2 +-
 .../AutomaticEdgeEnvCreation.tsx              |   3 +-
 .../EnableWaitingRoomSwitch.tsx               |   0
 .../AutomaticEdgeEnvCreation/index.ts         |   0
 .../DeploymentSyncOptions.tsx                 | 142 +++++++++++++++
 .../DeploymentSyncOptions/types.ts            |   9 +
 .../DeploymentSyncOptions/validation.ts       |  25 +++
 .../EdgeComputeSettings.tsx                   |   0
 .../EdgeComputeSettings.validation.ts         |   0
 .../EdgeComputeSettings/index.ts              |   0
 .../EdgeComputeSettings}/types.ts             |   0
 .../EdgeComputeSettingsView.tsx               |  11 +-
 .../FDOProfilesDatatable.tsx                  |   2 +-
 .../FDOProfilesDatatableActions.tsx           |   0
 .../FDOProfilesDatatableContainer.tsx         |   0
 .../FDOProfilesDatatable/columns/created.tsx  |   0
 .../FDOProfilesDatatable/columns/index.tsx    |   0
 .../FDOProfilesDatatable/columns/name.tsx     |   0
 .../FDOProfilesDatatable/useFDOProfiles.tsx   |   0
 .../SettingsFDO/SettingsFDO.module.css        |   0
 .../SettingsFDO/SettingsFDO.tsx               |   3 +-
 .../SettingsFDO/SettingsFDO.validation.ts     |   0
 .../EdgeComputeView/SettingsFDO/index.ts      |   1 +
 .../SettingsOpenAMT/SettingsOpenAMT.tsx       |   0
 .../SettingsOpenAMT.validation.ts             |   0
 .../EdgeComputeView/SettingsOpenAMT/index.ts  |   1 +
 .../settings/EdgeComputeView/types.ts         |   7 +
 app/{ => react}/portainer/settings/queries.ts |   3 +-
 .../portainer/settings/settings.service.ts    |   3 +-
 app/{ => react}/portainer/settings/types.ts   |   0
 .../users/teams/ItemView/Details.tsx          |   2 +-
 .../users/teams/ItemView/ItemView.tsx         |   2 +-
 app/react/sidebar/SettingsSidebar.tsx         |   2 +-
 app/react/sidebar/Sidebar.tsx                 |   2 +-
 app/setup-tests/server-handlers.ts            |   2 +-
 tsconfig.json                                 |   7 +-
 66 files changed, 488 insertions(+), 96 deletions(-)
 create mode 100644 app/edge/components/EdgeAsyncIntervalsForm.tsx
 create mode 100644 app/edge/components/useIntervalOptions.ts
 delete mode 100644 app/portainer/settings/authentication/internal-auth/index.ts
 delete mode 100644 app/portainer/settings/edge-compute/SettingsFDO/index.ts
 delete mode 100644 app/portainer/settings/edge-compute/SettingsOpenAMT/index.ts
 rename app/{portainer/settings/authentication/internal-auth/components => react/portainer/settings/AuthenticationView/InternalAuth}/Badge.tsx (100%)
 rename app/{portainer/settings/authentication/internal-auth => react/portainer/settings/AuthenticationView/InternalAuth}/InternalAuth.tsx (81%)
 rename app/{portainer/settings/authentication/internal-auth/components => react/portainer/settings/AuthenticationView/InternalAuth}/PasswordLengthSlider/PasswordLengthSlider.module.css (100%)
 rename app/{portainer/settings/authentication/internal-auth/components => react/portainer/settings/AuthenticationView/InternalAuth}/PasswordLengthSlider/PasswordLengthSlider.tsx (96%)
 rename app/{portainer/settings/authentication/components => react/portainer/settings/AuthenticationView/InternalAuth}/SaveAuthSettingsButton.tsx (100%)
 create mode 100644 app/react/portainer/settings/AuthenticationView/InternalAuth/index.ts
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx (97%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx (96%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/AutomaticEdgeEnvCreation/index.ts (100%)
 create mode 100644 app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/DeploymentSyncOptions.tsx
 create mode 100644 app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/types.ts
 create mode 100644 app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/validation.ts
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/EdgeComputeSettings/EdgeComputeSettings.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/EdgeComputeSettings/EdgeComputeSettings.validation.ts (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/EdgeComputeSettings/index.ts (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView/EdgeComputeSettings}/types.ts (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/EdgeComputeSettingsView.tsx (57%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/FDOProfilesDatatable.tsx (97%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/FDOProfilesDatatableContainer.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/columns/created.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/columns/index.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/columns/name.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/FDOProfilesDatatable/useFDOProfiles.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/SettingsFDO/SettingsFDO.module.css (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/SettingsFDO/SettingsFDO.tsx (97%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/SettingsFDO/SettingsFDO.validation.ts (100%)
 create mode 100644 app/react/portainer/settings/EdgeComputeView/SettingsFDO/index.ts
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/SettingsOpenAMT/SettingsOpenAMT.tsx (100%)
 rename app/{portainer/settings/edge-compute => react/portainer/settings/EdgeComputeView}/SettingsOpenAMT/SettingsOpenAMT.validation.ts (100%)
 create mode 100644 app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/index.ts
 create mode 100644 app/react/portainer/settings/EdgeComputeView/types.ts
 rename app/{ => react}/portainer/settings/queries.ts (95%)
 rename app/{ => react}/portainer/settings/settings.service.ts (95%)
 rename app/{ => react}/portainer/settings/types.ts (100%)

diff --git a/app/angulartics.matomo/analytics-services.ts b/app/angulartics.matomo/analytics-services.ts
index c1202fd79..da543af66 100644
--- a/app/angulartics.matomo/analytics-services.ts
+++ b/app/angulartics.matomo/analytics-services.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 const categories = [
   'docker',
diff --git a/app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesView.tsx b/app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesView.tsx
index d30e464c7..ff2e0a5d9 100644
--- a/app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesView.tsx
+++ b/app/edge/EdgeDevices/EdgeDevicesView/EdgeDevicesView.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { useSettings } from '@/portainer/settings/queries';
+import { useSettings } from '@/react/portainer/settings/queries';
 import { useGroups } from '@/portainer/environment-groups/queries';
 
 import { PageHeader } from '@@/PageHeader';
diff --git a/app/edge/components/EdgeAsyncIntervalsForm.tsx b/app/edge/components/EdgeAsyncIntervalsForm.tsx
new file mode 100644
index 000000000..f36ccd9ec
--- /dev/null
+++ b/app/edge/components/EdgeAsyncIntervalsForm.tsx
@@ -0,0 +1,163 @@
+import { number, object, SchemaOf } from 'yup';
+
+import { r2a } from '@/react-tools/react2angular';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Select } from '@@/form-components/Input';
+
+import { Options, useIntervalOptions } from './useIntervalOptions';
+
+export const EDGE_ASYNC_INTERVAL_USE_DEFAULT = -1;
+
+export interface EdgeAsyncIntervalsValues {
+  PingInterval: number;
+  SnapshotInterval: number;
+  CommandInterval: number;
+}
+
+export const options: Options = [
+  { label: 'Use default interval', value: -1, isDefault: true },
+  {
+    value: 0,
+    label: 'disabled',
+  },
+  {
+    value: 60,
+    label: '1 minute',
+  },
+  {
+    value: 60 * 60,
+    label: '1 hour',
+  },
+  {
+    value: 24 * 60 * 60,
+    label: '1 day',
+  },
+  {
+    value: 7 * 24 * 60 * 60,
+    label: '1 week',
+  },
+];
+
+const defaultFieldSettings = {
+  ping: {
+    label: 'Ping interval',
+    tooltip:
+      'Interval used by this Edge agent to check in with the Portainer instance',
+  },
+  snapshot: {
+    label: 'Snapshot interval',
+    tooltip: 'Interval used by this Edge agent to snapshot the agent state',
+  },
+  command: {
+    label: 'Command interval',
+    tooltip:
+      'Interval used by this Edge agent to fetch commands from the Portainer instance',
+  },
+};
+
+interface Props {
+  values: EdgeAsyncIntervalsValues;
+  isDefaultHidden?: boolean;
+  readonly?: boolean;
+  fieldSettings?: typeof defaultFieldSettings;
+  onChange(value: EdgeAsyncIntervalsValues): void;
+}
+
+export function EdgeAsyncIntervalsForm({
+  onChange,
+  values,
+  isDefaultHidden = false,
+  readonly = false,
+  fieldSettings = defaultFieldSettings,
+}: Props) {
+  const pingIntervalOptions = useIntervalOptions(
+    'Edge.PingInterval',
+    options,
+    isDefaultHidden
+  );
+
+  const snapshotIntervalOptions = useIntervalOptions(
+    'Edge.SnapshotInterval',
+    options,
+    isDefaultHidden
+  );
+
+  const commandIntervalOptions = useIntervalOptions(
+    'Edge.CommandInterval',
+    options,
+    isDefaultHidden
+  );
+
+  return (
+    <>
+      <FormControl
+        inputId="edge_checkin_ping"
+        label={fieldSettings.ping.label}
+        tooltip={fieldSettings.ping.tooltip}
+      >
+        <Select
+          value={values.PingInterval}
+          name="PingInterval"
+          onChange={handleChange}
+          options={pingIntervalOptions}
+          disabled={readonly}
+        />
+      </FormControl>
+
+      <FormControl
+        inputId="edge_checkin_snapshot"
+        label={fieldSettings.snapshot.label}
+        tooltip={fieldSettings.snapshot.tooltip}
+      >
+        <Select
+          value={values.SnapshotInterval}
+          name="SnapshotInterval"
+          onChange={handleChange}
+          options={snapshotIntervalOptions}
+          disabled={readonly}
+        />
+      </FormControl>
+
+      <FormControl
+        inputId="edge_checkin_command"
+        label={fieldSettings.command.label}
+        tooltip={fieldSettings.command.tooltip}
+      >
+        <Select
+          value={values.CommandInterval}
+          name="CommandInterval"
+          onChange={handleChange}
+          options={commandIntervalOptions}
+          disabled={readonly}
+        />
+      </FormControl>
+    </>
+  );
+
+  function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    onChange({ ...values, [e.target.name]: parseInt(e.target.value, 10) });
+  }
+}
+
+const intervals = options.map((option) => option.value);
+
+export function edgeAsyncIntervalsValidation(): SchemaOf<EdgeAsyncIntervalsValues> {
+  return object({
+    PingInterval: number().required('This field is required.').oneOf(intervals),
+    SnapshotInterval: number()
+      .required('This field is required.')
+      .oneOf(intervals),
+    CommandInterval: number()
+      .required('This field is required.')
+      .oneOf(intervals),
+  });
+}
+
+export const EdgeAsyncIntervalsFormAngular = r2a(EdgeAsyncIntervalsForm, [
+  'values',
+  'onChange',
+  'isDefaultHidden',
+  'readonly',
+  'fieldSettings',
+]);
diff --git a/app/edge/components/EdgeCheckInIntervalField.tsx b/app/edge/components/EdgeCheckInIntervalField.tsx
index 43f133dcf..f8b6e85ff 100644
--- a/app/edge/components/EdgeCheckInIntervalField.tsx
+++ b/app/edge/components/EdgeCheckInIntervalField.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { useSettings } from '@/portainer/settings/queries';
 import { r2a } from '@/react-tools/react2angular';
+import { useSettings } from '@/react/portainer/settings/queries';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 
 import { FormControl } from '@@/form-components/FormControl';
diff --git a/app/edge/components/useIntervalOptions.ts b/app/edge/components/useIntervalOptions.ts
new file mode 100644
index 000000000..8d2a9dc5e
--- /dev/null
+++ b/app/edge/components/useIntervalOptions.ts
@@ -0,0 +1,67 @@
+import _ from 'lodash';
+import { useState, useEffect } from 'react';
+
+import { useSettings } from '@/react/portainer/settings/queries';
+
+type Option = {
+  label: string;
+  value: number;
+};
+
+type DefaultOption = Option & { isDefault: true };
+
+export type Options = [DefaultOption, ...Option[]];
+
+export function useIntervalOptions(
+  fieldName:
+    | 'Edge.PingInterval'
+    | 'Edge.SnapshotInterval'
+    | 'Edge.CommandInterval'
+    | 'EdgeAgentCheckinInterval',
+  initialOptions: Options,
+  isDefaultHidden: boolean
+) {
+  const [{ value: defaultValue }] = initialOptions;
+  const [options, setOptions] = useState<Option[]>(initialOptions);
+
+  const settingsQuery = useSettings(
+    (settings) => _.get(settings, fieldName, 0) as number,
+    !isDefaultHidden
+  );
+
+  useEffect(() => {
+    if (isDefaultHidden) {
+      setOptions(initialOptions.slice(1));
+    }
+
+    if (
+      !isDefaultHidden &&
+      typeof settingsQuery.data !== 'undefined' &&
+      settingsQuery.data !== defaultValue
+    ) {
+      setOptions((options) => {
+        let label = `${settingsQuery.data} seconds`;
+        const option = options.find((o) => o.value === settingsQuery.data);
+        if (option) {
+          label = option.label;
+        }
+
+        return [
+          {
+            value: defaultValue,
+            label: `Use default interval (${label})`,
+          },
+          ...options.slice(1),
+        ];
+      });
+    }
+  }, [
+    settingsQuery.data,
+    setOptions,
+    isDefaultHidden,
+    initialOptions,
+    defaultValue,
+  ]);
+
+  return options;
+}
diff --git a/app/portainer/environments/queries/useAgentDetails.ts b/app/portainer/environments/queries/useAgentDetails.ts
index 7415e4b7c..98f03a2eb 100644
--- a/app/portainer/environments/queries/useAgentDetails.ts
+++ b/app/portainer/environments/queries/useAgentDetails.ts
@@ -1,5 +1,5 @@
 import { useStatus } from '@/portainer/services/api/status.service';
-import { useSettings } from '@/portainer/settings/queries';
+import { useSettings } from '@/react/portainer/settings/queries';
 
 export function useAgentDetails() {
   const settingsQuery = useSettings((settings) => settings.AgentSecret);
diff --git a/app/portainer/feature-flags/useRedirectFeatureFlag.ts b/app/portainer/feature-flags/useRedirectFeatureFlag.ts
index 5aac02015..32e1dfe4a 100644
--- a/app/portainer/feature-flags/useRedirectFeatureFlag.ts
+++ b/app/portainer/feature-flags/useRedirectFeatureFlag.ts
@@ -1,6 +1,6 @@
 import { useRouter } from '@uirouter/react';
 
-import { usePublicSettings } from '../settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 export enum FeatureFlag {
   EdgeRemoteUpdate = 'edgeRemoteUpdate',
diff --git a/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx b/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx
index 87cffc5cc..74ee343f9 100644
--- a/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx
+++ b/app/portainer/home/EnvironmentList/EnvironmentItem/EdgeIndicator.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
 import { Environment } from '@/portainer/environments/types';
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 import { PublicSettingsViewModel } from '@/portainer/models/settings';
 
 interface Props {
diff --git a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
index d52706174..865e05f64 100644
--- a/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
+++ b/app/portainer/home/EnvironmentList/KubeconfigButton/KubeconfigPrompt.tsx
@@ -7,7 +7,7 @@ import * as kcService from '@/kubernetes/services/kubeconfig.service';
 import * as notifications from '@/portainer/services/notifications';
 import { EnvironmentType } from '@/portainer/environments/types';
 import { usePaginationLimitState } from '@/portainer/hooks/usePaginationLimitState';
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 import {
   Query,
   useEnvironmentList,
diff --git a/app/portainer/hostmanagement/fdo/fdo.service.ts b/app/portainer/hostmanagement/fdo/fdo.service.ts
index a023a7295..b5d9554b3 100644
--- a/app/portainer/hostmanagement/fdo/fdo.service.ts
+++ b/app/portainer/hostmanagement/fdo/fdo.service.ts
@@ -1,4 +1,4 @@
-import axios, { parseAxiosError } from 'Portainer/services/axios';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
 
 import { FDOConfiguration, DeviceConfiguration, Profile } from './model';
 
diff --git a/app/portainer/hostmanagement/open-amt/open-amt.service.ts b/app/portainer/hostmanagement/open-amt/open-amt.service.ts
index f39ad3eb3..378143bd2 100644
--- a/app/portainer/hostmanagement/open-amt/open-amt.service.ts
+++ b/app/portainer/hostmanagement/open-amt/open-amt.service.ts
@@ -1,5 +1,4 @@
-import axios, { parseAxiosError } from 'Portainer/services/axios';
-
+import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/portainer/environments/types';
 
 import {
diff --git a/app/portainer/react/components/index.ts b/app/portainer/react/components/index.ts
index fca7dd7aa..8470bea1c 100644
--- a/app/portainer/react/components/index.ts
+++ b/app/portainer/react/components/index.ts
@@ -14,6 +14,9 @@ import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
 import { withI18nSuspense } from '@/react-tools/withI18nSuspense';
+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 { PageHeader } from '@@/PageHeader';
 import { TagSelector } from '@@/TagSelector';
@@ -128,4 +131,13 @@ export const componentsModule = angular
       'onSubmit',
       'onError',
     ])
+  )
+  .component(
+    'settingsFdo',
+    r2a(withUIRouter(withReactQuery(SettingsFDO)), ['onSubmit', 'settings'])
+  )
+  .component('settingsOpenAmt', r2a(SettingsOpenAMT, ['onSubmit', 'settings']))
+  .component(
+    'internalAuth',
+    r2a(InternalAuth, ['onSaveSettings', 'isLoading', 'value', 'onChange'])
   ).name;
diff --git a/app/portainer/react/views/index.ts b/app/portainer/react/views/index.ts
index 852012638..ccb0336fc 100644
--- a/app/portainer/react/views/index.ts
+++ b/app/portainer/react/views/index.ts
@@ -5,6 +5,9 @@ import { withCurrentUser } from '@/react-tools/withCurrentUser';
 import { r2a } from '@/react-tools/react2angular';
 import { withReactQuery } from '@/react-tools/withReactQuery';
 import { withUIRouter } from '@/react-tools/withUIRouter';
+import { CreateAccessToken } from '@/react/portainer/account/CreateAccessTokenView';
+import { EdgeComputeSettingsView } from '@/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView';
+import { withI18nSuspense } from '@/react-tools/withI18nSuspense';
 
 import { wizardModule } from './wizard';
 import { teamsModule } from './teams';
@@ -19,4 +22,18 @@ export const viewsModule = angular
   .component(
     'homeView',
     r2a(withUIRouter(withReactQuery(withCurrentUser(HomeView))), [])
+  )
+  .component(
+    'createAccessToken',
+    r2a(withI18nSuspense(withUIRouter(CreateAccessToken)), [
+      'onSubmit',
+      'onError',
+    ])
+  )
+  .component(
+    'settingsEdgeCompute',
+    r2a(withReactQuery(withCurrentUser(EdgeComputeSettingsView)), [
+      'onSubmit',
+      'settings',
+    ])
   ).name;
diff --git a/app/portainer/settings/authentication/index.js b/app/portainer/settings/authentication/index.js
index 001fcc0fe..e44cdd1ae 100644
--- a/app/portainer/settings/authentication/index.js
+++ b/app/portainer/settings/authentication/index.js
@@ -2,10 +2,9 @@ import angular from 'angular';
 import ldapModule from './ldap';
 import { autoUserProvisionToggle } from './auto-user-provision-toggle';
 import { saveAuthSettingsButton } from './save-auth-settings-button';
-import { InternalAuthAngular } from './internal-auth';
 
 export default angular
   .module('portainer.settings.authentication', [ldapModule])
-  .component('internalAuth', InternalAuthAngular)
+
   .component('saveAuthSettingsButton', saveAuthSettingsButton)
   .component('autoUserProvisionToggle', autoUserProvisionToggle).name;
diff --git a/app/portainer/settings/authentication/internal-auth/index.ts b/app/portainer/settings/authentication/internal-auth/index.ts
deleted file mode 100644
index dadb26707..000000000
--- a/app/portainer/settings/authentication/internal-auth/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { InternalAuthAngular, InternalAuth } from './InternalAuth';
diff --git a/app/portainer/settings/edge-compute/SettingsFDO/index.ts b/app/portainer/settings/edge-compute/SettingsFDO/index.ts
deleted file mode 100644
index 5c8190a33..000000000
--- a/app/portainer/settings/edge-compute/SettingsFDO/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { react2angular } from '@/react-tools/react2angular';
-import { withReactQuery } from '@/react-tools/withReactQuery';
-import { withUIRouter } from '@/react-tools/withUIRouter';
-
-import { SettingsFDO } from './SettingsFDO';
-
-const SettingsFDOAngular = react2angular(
-  withUIRouter(withReactQuery(SettingsFDO)),
-  ['settings', 'onSubmit']
-);
-export { SettingsFDO, SettingsFDOAngular };
diff --git a/app/portainer/settings/edge-compute/SettingsOpenAMT/index.ts b/app/portainer/settings/edge-compute/SettingsOpenAMT/index.ts
deleted file mode 100644
index 91bcc88ca..000000000
--- a/app/portainer/settings/edge-compute/SettingsOpenAMT/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { react2angular } from '@/react-tools/react2angular';
-
-import { SettingsOpenAMT } from './SettingsOpenAMT';
-
-const SettingsOpenAMTAngular = react2angular(SettingsOpenAMT, [
-  'settings',
-  'onSubmit',
-]);
-export { SettingsOpenAMT, SettingsOpenAMTAngular };
diff --git a/app/portainer/settings/index.js b/app/portainer/settings/index.js
index dd6e9e694..629f9b5ed 100644
--- a/app/portainer/settings/index.js
+++ b/app/portainer/settings/index.js
@@ -3,12 +3,4 @@ import angular from 'angular';
 import authenticationModule from './authentication';
 import generalModule from './general';
 
-import { SettingsFDOAngular } from './edge-compute/SettingsFDO';
-import { SettingsOpenAMTAngular } from './edge-compute/SettingsOpenAMT';
-import { EdgeComputeSettingsViewAngular } from './edge-compute/EdgeComputeSettingsView';
-
-export default angular
-  .module('portainer.settings', [authenticationModule, generalModule])
-  .component('settingsEdgeCompute', EdgeComputeSettingsViewAngular)
-  .component('settingsFdo', SettingsFDOAngular)
-  .component('settingsOpenAmt', SettingsOpenAMTAngular).name;
+export default angular.module('portainer.settings', [authenticationModule, generalModule]).name;
diff --git a/app/react/components/PasswordCheckHint.tsx b/app/react/components/PasswordCheckHint.tsx
index d75da6a7d..e65b648d1 100644
--- a/app/react/components/PasswordCheckHint.tsx
+++ b/app/react/components/PasswordCheckHint.tsx
@@ -1,4 +1,4 @@
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 import { Icon } from '@@/Icon';
 
diff --git a/app/react/docker/containers/utils.ts b/app/react/docker/containers/utils.ts
index e7f2c7d17..26e1a2815 100644
--- a/app/react/docker/containers/utils.ts
+++ b/app/react/docker/containers/utils.ts
@@ -1,7 +1,7 @@
 import _ from 'lodash';
-import { useInfo } from 'Docker/services/system.service';
-import { EnvironmentId } from 'Portainer/environments/types';
 
+import { useInfo } from '@/docker/services/system.service';
+import { EnvironmentId } from '@/portainer/environments/types';
 import { ResourceControlViewModel } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
 import { DockerContainer, ContainerStatus } from './types';
diff --git a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
index b845945d7..762c85c10 100644
--- a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
-import DockerNetworkHelper from 'Docker/helpers/networkHelper';
 
+import DockerNetworkHelper from '@/docker/helpers/networkHelper';
 import { Authorized } from '@/portainer/hooks/useUser';
 
 import { Table, TableContainer, TableTitle } from '@@/datatables';
diff --git a/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryAction.tsx b/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryAction.tsx
index 3b1c19e75..3ccc52d59 100644
--- a/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryAction.tsx
+++ b/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryAction.tsx
@@ -1,11 +1,10 @@
+import { notifySuccess } from '@/portainer/services/notifications';
+import { FeatureId } from '@/portainer/feature-flags/enums';
+import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
 import {
   usePublicSettings,
   useUpdateDefaultRegistrySettingsMutation,
-} from 'Portainer/settings/queries';
-import { notifySuccess } from 'Portainer/services/notifications';
-import { FeatureId } from 'Portainer/feature-flags/enums';
-
-import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
+} from '@/react/portainer/settings/queries';
 
 import { Tooltip } from '@@/Tip/Tooltip';
 import { Button } from '@@/buttons';
diff --git a/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryDomain.tsx b/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryDomain.tsx
index 16af67530..55510ee69 100644
--- a/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryDomain.tsx
+++ b/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryDomain.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import { usePublicSettings } from 'Portainer/settings/queries';
+
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 export function DefaultRegistryDomain() {
   const settingsQuery = usePublicSettings({
diff --git a/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryName.tsx b/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryName.tsx
index 7c242cc19..8e7512269 100644
--- a/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryName.tsx
+++ b/app/react/portainer/registries/ListView/DefaultRegistry/DefaultRegistryName.tsx
@@ -1,6 +1,7 @@
-import { usePublicSettings } from 'Portainer/settings/queries';
 import clsx from 'clsx';
 
+import { usePublicSettings } from '@/react/portainer/settings/queries';
+
 export function DefaultRegistryName() {
   const settingsQuery = usePublicSettings({
     select: (settings) => settings.DefaultRegistry?.Hide,
diff --git a/app/portainer/settings/authentication/internal-auth/components/Badge.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/Badge.tsx
similarity index 100%
rename from app/portainer/settings/authentication/internal-auth/components/Badge.tsx
rename to app/react/portainer/settings/AuthenticationView/InternalAuth/Badge.tsx
diff --git a/app/portainer/settings/authentication/internal-auth/InternalAuth.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/InternalAuth.tsx
similarity index 81%
rename from app/portainer/settings/authentication/internal-auth/InternalAuth.tsx
rename to app/react/portainer/settings/AuthenticationView/InternalAuth/InternalAuth.tsx
index c55ef9700..9207c61cc 100644
--- a/app/portainer/settings/authentication/internal-auth/InternalAuth.tsx
+++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/InternalAuth.tsx
@@ -1,12 +1,10 @@
-import { react2angular } from '@/react-tools/react2angular';
 import { confirmDestructive } from '@/portainer/services/modal.service/confirm';
+import { Settings } from '@/react/portainer/settings/types';
 
 import { FormSectionTitle } from '@@/form-components/FormSectionTitle';
 
-import { SaveAuthSettingsButton } from '../components/SaveAuthSettingsButton';
-import { Settings } from '../../types';
-
-import { PasswordLengthSlider } from './components/PasswordLengthSlider/PasswordLengthSlider';
+import { PasswordLengthSlider } from './PasswordLengthSlider/PasswordLengthSlider';
+import { SaveAuthSettingsButton } from './SaveAuthSettingsButton';
 
 export interface Props {
   onSaveSettings(): void;
@@ -69,10 +67,3 @@ export function InternalAuth({
     </>
   );
 }
-
-export const InternalAuthAngular = react2angular(InternalAuth, [
-  'onSaveSettings',
-  'isLoading',
-  'value',
-  'onChange',
-]);
diff --git a/app/portainer/settings/authentication/internal-auth/components/PasswordLengthSlider/PasswordLengthSlider.module.css b/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.module.css
similarity index 100%
rename from app/portainer/settings/authentication/internal-auth/components/PasswordLengthSlider/PasswordLengthSlider.module.css
rename to app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.module.css
diff --git a/app/portainer/settings/authentication/internal-auth/components/PasswordLengthSlider/PasswordLengthSlider.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
similarity index 96%
rename from app/portainer/settings/authentication/internal-auth/components/PasswordLengthSlider/PasswordLengthSlider.tsx
rename to app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
index 17d21c2ae..f514e4a8a 100644
--- a/app/portainer/settings/authentication/internal-auth/components/PasswordLengthSlider/PasswordLengthSlider.tsx
+++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx
@@ -2,10 +2,10 @@ import RcSlider from 'rc-slider';
 import clsx from 'clsx';
 import { Lock, XCircle, CheckCircle } from 'react-feather';
 
-import { Badge } from '@/portainer/settings/authentication/internal-auth/components/Badge';
-
 import 'rc-slider/assets/index.css';
 
+import { Badge } from '../Badge';
+
 import styles from './PasswordLengthSlider.module.css';
 
 export interface Props {
diff --git a/app/portainer/settings/authentication/components/SaveAuthSettingsButton.tsx b/app/react/portainer/settings/AuthenticationView/InternalAuth/SaveAuthSettingsButton.tsx
similarity index 100%
rename from app/portainer/settings/authentication/components/SaveAuthSettingsButton.tsx
rename to app/react/portainer/settings/AuthenticationView/InternalAuth/SaveAuthSettingsButton.tsx
diff --git a/app/react/portainer/settings/AuthenticationView/InternalAuth/index.ts b/app/react/portainer/settings/AuthenticationView/InternalAuth/index.ts
new file mode 100644
index 000000000..1dcfda363
--- /dev/null
+++ b/app/react/portainer/settings/AuthenticationView/InternalAuth/index.ts
@@ -0,0 +1 @@
+export { InternalAuth } from './InternalAuth';
diff --git a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
similarity index 97%
rename from app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
rename to app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
index f41579dc6..32a50998b 100644
--- a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutoEnvCreationSettingsForm.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect } from 'react';
 
 import { baseHref } from '@/portainer/helpers/pathHelper';
 import { notifySuccess } from '@/portainer/services/notifications';
-import { useUpdateSettingsMutation } from '@/portainer/settings/queries';
+import { useUpdateSettingsMutation } from '@/react/portainer/settings/queries';
 
 import { LoadingButton } from '@@/buttons/LoadingButton';
 import { FormControl } from '@@/form-components/FormControl';
diff --git a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
similarity index 96%
rename from app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
rename to app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
index c8f4c2cac..5b1539e7c 100644
--- a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/AutomaticEdgeEnvCreation.tsx
@@ -2,12 +2,13 @@ import { useMutation } from 'react-query';
 import { useEffect } from 'react';
 
 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 { useSettings } from '../../queries';
+
 import { AutoEnvCreationSettingsForm } from './AutoEnvCreationSettingsForm';
 
 const commands = {
diff --git a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx
rename to app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/EnableWaitingRoomSwitch.tsx
diff --git a/app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/index.ts b/app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/index.ts
similarity index 100%
rename from app/portainer/settings/edge-compute/AutomaticEdgeEnvCreation/index.ts
rename to app/react/portainer/settings/EdgeComputeView/AutomaticEdgeEnvCreation/index.ts
diff --git a/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/DeploymentSyncOptions.tsx b/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/DeploymentSyncOptions.tsx
new file mode 100644
index 000000000..90605b8d2
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/DeploymentSyncOptions.tsx
@@ -0,0 +1,142 @@
+import { Form, Formik } from 'formik';
+import { useReducer } from 'react';
+
+import { EdgeCheckinIntervalField } from '@/edge/components/EdgeCheckInIntervalField';
+import { EdgeAsyncIntervalsForm } from '@/edge/components/EdgeAsyncIntervalsForm';
+import { notifySuccess } from '@/portainer/services/notifications';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Switch } from '@@/form-components/SwitchField/Switch';
+import { Widget, WidgetBody, WidgetTitle } from '@@/Widget';
+import { FormSection } from '@@/form-components/FormSection';
+import { LoadingButton } from '@@/buttons/LoadingButton';
+import { TextTip } from '@@/Tip/TextTip';
+
+import { useSettings, useUpdateSettingsMutation } from '../../queries';
+
+import { FormValues } from './types';
+
+const asyncIntervalFieldSettings = {
+  ping: {
+    label: 'Edge agent default ping frequency',
+    tooltip:
+      'Interval used by default by each Edge agent to ping the Portainer instance. Affects Edge environment management and Edge compute features.',
+  },
+  snapshot: {
+    label: 'Edge agent default snapshot frequency',
+    tooltip:
+      'Interval used by default by each Edge agent to snapshot the agent state.',
+  },
+  command: {
+    label: 'Edge agent default command frequency',
+    tooltip: 'Interval used by default by each Edge agent to execute commands.',
+  },
+};
+
+export function DeploymentSyncOptions() {
+  const settingsQuery = useSettings();
+  const settingsMutation = useUpdateSettingsMutation();
+  const [formKey, resetForm] = useReducer((state) => state + 1, 0);
+
+  if (!settingsQuery.data) {
+    return null;
+  }
+
+  const initialValues = {
+    Edge: settingsQuery.data.Edge,
+    EdgeAgentCheckinInterval: settingsQuery.data.EdgeAgentCheckinInterval,
+  };
+
+  return (
+    <div className="row">
+      <Widget>
+        <WidgetTitle icon="svg-laptop" title="Deployment sync options" />
+        <WidgetBody>
+          <Formik<FormValues>
+            initialValues={initialValues}
+            onSubmit={handleSubmit}
+            key={formKey}
+          >
+            {({ errors, setFieldValue, values, isValid, dirty }) => (
+              <Form className="form-horizontal">
+                <FormControl
+                  inputId="edge_async_mode"
+                  label="Use Async mode by default"
+                  size="small"
+                  errors={errors?.Edge?.AsyncMode}
+                  tooltip="Using Async allows the ability to define different ping,
+                  snapshot and command frequencies."
+                >
+                  <Switch
+                    id="edge_async_mode"
+                    name="edge_async_mode"
+                    className="space-right"
+                    checked={values.Edge.AsyncMode}
+                    onChange={(e) =>
+                      setFieldValue('Edge.AsyncMode', e.valueOf())
+                    }
+                  />
+                </FormControl>
+
+                <TextTip color="orange">
+                  Enabling Async disables the tunnel function.
+                </TextTip>
+
+                <FormSection title="Check-in Intervals">
+                  {!values.Edge.AsyncMode ? (
+                    <EdgeCheckinIntervalField
+                      value={values.EdgeAgentCheckinInterval}
+                      onChange={(value) =>
+                        setFieldValue('EdgeAgentCheckinInterval', value)
+                      }
+                      isDefaultHidden
+                      label="Edge agent default poll frequency"
+                      tooltip="Interval used by default by each Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
+                    />
+                  ) : (
+                    <EdgeAsyncIntervalsForm
+                      values={values.Edge}
+                      onChange={(value) => setFieldValue('Edge', value)}
+                      isDefaultHidden
+                      fieldSettings={asyncIntervalFieldSettings}
+                    />
+                  )}
+                </FormSection>
+
+                <FormSection title="Actions">
+                  <div className="form-group mt-5">
+                    <div className="col-sm-12">
+                      <LoadingButton
+                        disabled={!isValid || !dirty}
+                        data-cy="settings-deploySyncOptionsButton"
+                        isLoading={settingsMutation.isLoading}
+                        loadingText="Saving settings..."
+                      >
+                        Save settings
+                      </LoadingButton>
+                    </div>
+                  </div>
+                </FormSection>
+              </Form>
+            )}
+          </Formik>
+        </WidgetBody>
+      </Widget>
+    </div>
+  );
+
+  function handleSubmit(values: FormValues) {
+    settingsMutation.mutate(
+      {
+        Edge: values.Edge,
+        EdgeAgentCheckinInterval: values.EdgeAgentCheckinInterval,
+      },
+      {
+        onSuccess() {
+          notifySuccess('Success', 'Settings updated successfully');
+          resetForm();
+        },
+      }
+    );
+  }
+}
diff --git a/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/types.ts b/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/types.ts
new file mode 100644
index 000000000..b58c80f66
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/types.ts
@@ -0,0 +1,9 @@
+export interface FormValues {
+  Edge: {
+    PingInterval: number;
+    SnapshotInterval: number;
+    CommandInterval: number;
+    AsyncMode: boolean;
+  };
+  EdgeAgentCheckinInterval: number;
+}
diff --git a/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/validation.ts b/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/validation.ts
new file mode 100644
index 000000000..02b0c3a86
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/validation.ts
@@ -0,0 +1,25 @@
+import { boolean, number, object, SchemaOf } from 'yup';
+
+import { options as asyncIntervalOptions } from '@/edge/components/EdgeAsyncIntervalsForm';
+
+import { FormValues } from './types';
+
+const intervals = asyncIntervalOptions.map((option) => option.value);
+
+export function validationSchema(): SchemaOf<FormValues> {
+  return object({
+    EdgeAgentCheckinInterval: number().required('This field is required.'),
+    Edge: object({
+      PingInterval: number()
+        .required('This field is required.')
+        .oneOf(intervals),
+      SnapshotInterval: number()
+        .required('This field is required.')
+        .oneOf(intervals),
+      CommandInterval: number()
+        .required('This field is required.')
+        .oneOf(intervals),
+      AsyncMode: boolean().default(false),
+    }),
+  });
+}
diff --git a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.tsx
rename to app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx
diff --git a/app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.validation.ts b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.validation.ts
similarity index 100%
rename from app/portainer/settings/edge-compute/EdgeComputeSettings/EdgeComputeSettings.validation.ts
rename to app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.validation.ts
diff --git a/app/portainer/settings/edge-compute/EdgeComputeSettings/index.ts b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/index.ts
similarity index 100%
rename from app/portainer/settings/edge-compute/EdgeComputeSettings/index.ts
rename to app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/index.ts
diff --git a/app/portainer/settings/edge-compute/types.ts b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/types.ts
similarity index 100%
rename from app/portainer/settings/edge-compute/types.ts
rename to app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/types.ts
diff --git a/app/portainer/settings/edge-compute/EdgeComputeSettingsView.tsx b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView.tsx
similarity index 57%
rename from app/portainer/settings/edge-compute/EdgeComputeSettingsView.tsx
rename to app/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView.tsx
index 991ca2e2e..5735d92cb 100644
--- a/app/portainer/settings/edge-compute/EdgeComputeSettingsView.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/EdgeComputeSettingsView.tsx
@@ -1,8 +1,4 @@
-import { withCurrentUser } from '@/react-tools/withCurrentUser';
-import { r2a } from '@/react-tools/react2angular';
-import { withReactQuery } from '@/react-tools/withReactQuery';
-
-import { Settings } from '../types';
+import { Settings } from '@/react/portainer/settings/types';
 
 import { EdgeComputeSettings } from './EdgeComputeSettings';
 import { AutomaticEdgeEnvCreation } from './AutomaticEdgeEnvCreation';
@@ -21,8 +17,3 @@ export function EdgeComputeSettingsView({ settings, onSubmit }: Props) {
     </div>
   );
 }
-
-export const EdgeComputeSettingsViewAngular = r2a(
-  withReactQuery(withCurrentUser(EdgeComputeSettingsView)),
-  ['settings', 'onSubmit']
-);
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
similarity index 97%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
index 0e1f5179c..969bf9e62 100644
--- a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatable.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
@@ -1,6 +1,5 @@
 import { useTable, usePagination, useSortBy } from 'react-table';
 import { useRowSelectColumn } from '@lineup-lite/hooks';
-import { FDOProfilesDatatableActions } from 'Portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions';
 
 import { Profile } from '@/portainer/hostmanagement/fdo/model';
 import PortainerError from '@/portainer/error';
@@ -24,6 +23,7 @@ import {
 
 import { useFDOProfiles } from './useFDOProfiles';
 import { useColumns } from './columns';
+import { FDOProfilesDatatableActions } from './FDOProfilesDatatableActions';
 
 export interface FDOProfilesTableSettings
   extends SortableTableSettings,
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableActions.tsx
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableContainer.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableContainer.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/FDOProfilesDatatableContainer.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatableContainer.tsx
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/columns/created.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/created.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/columns/created.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/created.tsx
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/columns/index.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/columns/index.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/columns/name.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/name.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/columns/name.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/name.tsx
diff --git a/app/portainer/settings/edge-compute/FDOProfilesDatatable/useFDOProfiles.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/useFDOProfiles.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/FDOProfilesDatatable/useFDOProfiles.tsx
rename to app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/useFDOProfiles.tsx
diff --git a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.module.css b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.module.css
similarity index 100%
rename from app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.module.css
rename to app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.module.css
diff --git a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
similarity index 97%
rename from app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
rename to app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
index bc549cca0..60c2ac5d5 100644
--- a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx
@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 import { Formik, Field, Form } from 'formik';
 
 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';
@@ -12,6 +11,8 @@ import { LoadingButton } from '@@/buttons/LoadingButton';
 import { TextTip } from '@@/Tip/TextTip';
 import { Input } from '@@/form-components/Input';
 
+import { FDOProfilesDatatableContainer } from '../FDOProfilesDatatable/FDOProfilesDatatableContainer';
+
 import styles from './SettingsFDO.module.css';
 import { validationSchema } from './SettingsFDO.validation';
 
diff --git a/app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.validation.ts b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.validation.ts
similarity index 100%
rename from app/portainer/settings/edge-compute/SettingsFDO/SettingsFDO.validation.ts
rename to app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.validation.ts
diff --git a/app/react/portainer/settings/EdgeComputeView/SettingsFDO/index.ts b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/index.ts
new file mode 100644
index 000000000..600c80856
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/SettingsFDO/index.ts
@@ -0,0 +1 @@
+export { SettingsFDO } from './SettingsFDO';
diff --git a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
similarity index 100%
rename from app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.tsx
rename to app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx
diff --git a/app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.validation.ts b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.validation.ts
similarity index 100%
rename from app/portainer/settings/edge-compute/SettingsOpenAMT/SettingsOpenAMT.validation.ts
rename to app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.validation.ts
diff --git a/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/index.ts b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/index.ts
new file mode 100644
index 000000000..075283962
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/index.ts
@@ -0,0 +1 @@
+export { SettingsOpenAMT } from './SettingsOpenAMT';
diff --git a/app/react/portainer/settings/EdgeComputeView/types.ts b/app/react/portainer/settings/EdgeComputeView/types.ts
new file mode 100644
index 000000000..a89b71acd
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/types.ts
@@ -0,0 +1,7 @@
+export interface Settings {
+  EdgeAgentCheckinInterval: number;
+  EnableEdgeComputeFeatures: boolean;
+  TrustOnFirstConnect: boolean;
+  EnforceEdgeID: boolean;
+  EdgePortainerUrl: string;
+}
diff --git a/app/portainer/settings/queries.ts b/app/react/portainer/settings/queries.ts
similarity index 95%
rename from app/portainer/settings/queries.ts
rename to app/react/portainer/settings/queries.ts
index 157e35466..70f29e669 100644
--- a/app/portainer/settings/queries.ts
+++ b/app/react/portainer/settings/queries.ts
@@ -5,8 +5,7 @@ import {
   withError,
   withInvalidate,
 } from '@/react-tools/react-query';
-
-import { PublicSettingsViewModel } from '../models/settings';
+import { PublicSettingsViewModel } from '@/portainer/models/settings';
 
 import {
   getSettings,
diff --git a/app/portainer/settings/settings.service.ts b/app/react/portainer/settings/settings.service.ts
similarity index 95%
rename from app/portainer/settings/settings.service.ts
rename to app/react/portainer/settings/settings.service.ts
index 620c02f02..996133b56 100644
--- a/app/portainer/settings/settings.service.ts
+++ b/app/react/portainer/settings/settings.service.ts
@@ -1,6 +1,5 @@
 import { PublicSettingsViewModel } from '@/portainer/models/settings';
-
-import axios, { parseAxiosError } from '../services/axios';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
 
 import { DefaultRegistry, PublicSettingsResponse, Settings } from './types';
 
diff --git a/app/portainer/settings/types.ts b/app/react/portainer/settings/types.ts
similarity index 100%
rename from app/portainer/settings/types.ts
rename to app/react/portainer/settings/types.ts
diff --git a/app/react/portainer/users/teams/ItemView/Details.tsx b/app/react/portainer/users/teams/ItemView/Details.tsx
index 5d2074e28..d6a3d3c3c 100644
--- a/app/react/portainer/users/teams/ItemView/Details.tsx
+++ b/app/react/portainer/users/teams/ItemView/Details.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from 'react-query';
 import { Trash2, Users } from 'react-feather';
 
 import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 import {
   mutationOptions,
   withError,
diff --git a/app/react/portainer/users/teams/ItemView/ItemView.tsx b/app/react/portainer/users/teams/ItemView/ItemView.tsx
index 89c711374..712346a73 100644
--- a/app/react/portainer/users/teams/ItemView/ItemView.tsx
+++ b/app/react/portainer/users/teams/ItemView/ItemView.tsx
@@ -2,7 +2,7 @@ import { useRouter } from '@uirouter/react';
 
 import { useUsers } from '@/portainer/users/queries';
 import { useUser } from '@/portainer/hooks/useUser';
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 import { TextTip } from '@@/Tip/TextTip';
 import { PageHeader } from '@@/PageHeader';
diff --git a/app/react/sidebar/SettingsSidebar.tsx b/app/react/sidebar/SettingsSidebar.tsx
index fb6a8c32f..75c350379 100644
--- a/app/react/sidebar/SettingsSidebar.tsx
+++ b/app/react/sidebar/SettingsSidebar.tsx
@@ -7,7 +7,7 @@ import {
   FileText,
 } from 'react-feather';
 
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 import {
   FeatureFlag,
   useFeatureFlag,
diff --git a/app/react/sidebar/Sidebar.tsx b/app/react/sidebar/Sidebar.tsx
index 98df5cf26..507622eb8 100644
--- a/app/react/sidebar/Sidebar.tsx
+++ b/app/react/sidebar/Sidebar.tsx
@@ -3,7 +3,7 @@ import { Home } from 'react-feather';
 
 import { useUser } from '@/portainer/hooks/useUser';
 import { useIsTeamLeader } from '@/portainer/users/queries';
-import { usePublicSettings } from '@/portainer/settings/queries';
+import { usePublicSettings } from '@/react/portainer/settings/queries';
 
 import styles from './Sidebar.module.css';
 import { EdgeComputeSidebar } from './EdgeComputeSidebar';
diff --git a/app/setup-tests/server-handlers.ts b/app/setup-tests/server-handlers.ts
index 734a43509..819a025bb 100644
--- a/app/setup-tests/server-handlers.ts
+++ b/app/setup-tests/server-handlers.ts
@@ -9,7 +9,7 @@ import { EnvironmentGroup } from '@/portainer/environment-groups/types';
 import { Tag } from '@/portainer/tags/types';
 import { StatusResponse } from '@/portainer/services/api/status.service';
 import { createMockTeams } from '@/react-tools/test-mocks';
-import { PublicSettingsResponse } from '@/portainer/settings/types';
+import { PublicSettingsResponse } from '@/react/portainer/settings/types';
 import { UserId } from '@/portainer/users/types';
 
 import { azureHandlers } from './setup-handlers/azure';
diff --git a/tsconfig.json b/tsconfig.json
index 476f76334..16acc6a2d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -30,12 +30,7 @@
     "paths": {
       // paths relative to the baseUrl
       "@@/*": ["react/components/*"],
-      "@/*": ["./*", "../app/*"],
-      "Agent/*": ["agent/*"],
-      "Azure/*": ["azure/*"],
-      "Docker/*": ["docker/*"],
-      "Kubernetes/*": ["kubernetes/*"],
-      "Portainer/*": ["portainer/*"]
+      "@/*": ["./*", "../app/*"]
     }
   },
   "exclude": ["api", "build", "dist", "distribution", "node_modules", "test", "webpack"],