fix(ui): tidy up Edge Devices configuration EE-3604 (#7797)

app/edge/components/EdgeCheckInIntervalField.tsx

@@ -4,7 +4,7 @@ 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';
+import { FormControl, Size } from '@@/form-components/FormControl';
 import { Select } from '@@/form-components/Input';
 
 interface Props {
@@ -14,6 +14,7 @@ interface Props {
   label?: string;
   tooltip?: string;
   readonly?: boolean;
+  size?: Size;
 }
 
 export const checkinIntervalOptions = [
@@ -42,11 +43,17 @@ export function EdgeCheckinIntervalField({
   isDefaultHidden = false,
   label = 'Poll frequency',
   tooltip = 'Interval used by this Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features.',
+  size = 'small',
 }: Props) {
   const options = useOptions(isDefaultHidden);
 
   return (
-    <FormControl inputId="edge_checkin" label={label} tooltip={tooltip}>
+    <FormControl
+      inputId="edge_checkin"
+      label={label}
+      tooltip={tooltip}
+      size={size}
+    >
       <Select
         value={value}
         onChange={(e) => {
@@ -61,7 +68,15 @@ export function EdgeCheckinIntervalField({
 
 export const EdgeCheckinIntervalFieldAngular = r2a(
   withReactQuery(EdgeCheckinIntervalField),
-  ['value', 'onChange', 'isDefaultHidden', 'tooltip', 'label', 'readonly']
+  [
+    'value',
+    'onChange',
+    'isDefaultHidden',
+    'tooltip',
+    'label',
+    'readonly',
+    'size',
+  ]
 );
 
 function useOptions(isDefaultHidden: boolean) {

app/portainer/views/settings/settings.html

@@ -14,6 +14,17 @@
             </div>
           </div>
           <!-- !snapshot-interval -->
+
+          <!-- checkin-interval -->
+          <edge-checkin-interval-field
+            size="'xsmall'"
+            value="settings.EdgeAgentCheckinInterval"
+            label="'Edge agent default poll frequency'"
+            is-default-hidden="true"
+            on-change="(onChangeCheckInInterval)"
+          ></edge-checkin-interval-field>
+          <!-- !checkin-interval -->
+
           <!-- logo -->
           <div class="form-group">
             <por-switch-field

app/portainer/views/settings/settingsController.js

@@ -83,6 +83,13 @@ angular.module('portainer.app').controller('SettingsController', [
       $scope.state.featureLimited = limited;
     };
 
+    $scope.onChangeCheckInInterval = function (interval) {
+      $scope.$evalAsync(() => {
+        var settings = $scope.settings;
+        settings.EdgeAgentCheckinInterval = interval;
+      });
+    };
+
     $scope.removeFilteredContainerLabel = function (index) {
       var settings = $scope.settings;
       settings.BlackListedLabels.splice(index, 1);

app/react/components/form-components/FormControl/FormControl.tsx

@@ -7,7 +7,7 @@ import { FormError } from '../FormError';
 
 import styles from './FormControl.module.css';
 
-type Size = 'small' | 'medium' | 'large';
+export type Size = 'xsmall' | 'small' | 'medium' | 'large';
 
 export interface Props {
   inputId?: string;
@@ -60,6 +60,8 @@ function sizeClassLabel(size?: Size) {
       return 'col-sm-5 col-lg-4';
     case 'medium':
       return 'col-sm-4 col-lg-3';
+    case 'xsmall':
+      return 'col-sm-2';
     default:
       return 'col-sm-3 col-lg-2';
   }
@@ -71,6 +73,8 @@ function sizeClassChildren(size?: Size) {
       return 'col-sm-7 col-lg-8';
     case 'medium':
       return 'col-sm-8 col-lg-9';
+    case 'xsmall':
+      return 'col-sm-8';
     default:
       return 'col-sm-9 col-lg-10';
   }

app/react/components/form-components/FormControl/index.ts

@@ -1 +1,2 @@
 export { FormControl } from './FormControl';
+export type { Size } from './FormControl';

app/react/portainer/settings/EdgeComputeView/DeploymentSyncOptions/DeploymentSyncOptions.tsx

@@ -83,25 +83,27 @@ export function DeploymentSyncOptions() {
                 </TextTip>
 
                 <FormSection title="Check-in Intervals">
-                  {!values.Edge.AsyncMode ? (
+                  <EdgeCheckinIntervalField
-                    <EdgeCheckinIntervalField
+                    value={values.EdgeAgentCheckinInterval}
-                      value={values.EdgeAgentCheckinInterval}
+                    onChange={(value) =>
-                      onChange={(value) =>
+                      setFieldValue('EdgeAgentCheckinInterval', value)
-                        setFieldValue('EdgeAgentCheckinInterval', value)
+                    }
-                      }
+                    isDefaultHidden
-                      isDefaultHidden
+                    label="Edge agent default poll frequency"
-                      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."
-                      tooltip="Interval used by default by each Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
+                  />
-                    />
+                </FormSection>
-                  ) : (
+
+                {values.Edge.AsyncMode && (
+                  <FormSection title="Async Check-in Intervals">
                     <EdgeAsyncIntervalsForm
                       values={values.Edge}
                       onChange={(value) => setFieldValue('Edge', value)}
                       isDefaultHidden
                       fieldSettings={asyncIntervalFieldSettings}
                     />
-                  )}
+                  </FormSection>
-                </FormSection>
+                )}
 
                 <FormSection title="Actions">
                   <div className="form-group mt-5">