EDM-3383: Refresh device before displaying YAML

libs/i18n/locales/en/translation.json

@@ -465,6 +465,7 @@
   "System image mismatch": "System image mismatch",
   "Desired system image: {{ desiredOsImage }}": "Desired system image: {{ desiredOsImage }}",
   "System services": "System services",
+  "Refreshing device": "Refreshing device",
   "Connection was closed": "Connection was closed",
   "Reconnect": "Reconnect",
   "Show decommissioned devices": "Show decommissioned devices",

libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx

@@ -27,12 +27,12 @@ import { getEditDisabledReason, getResumeDisabledReason, isDeviceEnrolled } from
 import TabsNav from '../../TabsNav/TabsNav';
 import { RESOURCE, VERB } from '../../../types/rbac';
 import { usePermissionsContext } from '../../common/PermissionsContext';
-import EventsCard from '../../Events/EventsCard';
 import PageWithPermissions from '../../common/PageWithPermissions';
-import YamlEditor from '../../common/CodeEditor/YamlEditor';
-import DeviceAliasEdit from './DeviceAliasEdit';
 import { SystemRestoreBanners } from '../../SystemRestore/SystemRestoreBanners';
 import DeviceDetailsCatalog from './DeviceDetailsCatalog';
+import EventsCard from '../../Events/EventsCard';
+import DeviceAliasEdit from './DeviceAliasEdit';
+import DeviceYamlTab from './DeviceYamlTab';
 
 type DeviceDetailsPageProps = React.PropsWithChildren<{ hideTerminal?: boolean }>;
 
@@ -203,10 +203,10 @@ const DeviceDetailsPage = ({ children, hideTerminal }: DeviceDetailsPageProps) =
           <Route
             path="yaml"
             element={
-              <YamlEditor
-                apiObj={device}
+              <DeviceYamlTab
+                device={device}
                 refetch={refetch}
-                disabledEditReason={editDisabledReason}
+                editDisabledReason={editDisabledReason}
                 canEdit={hasEditPermissions}
               />
             }

libs/ui-components/src/components/Device/DeviceDetails/DeviceYamlTab.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Bullseye, Spinner } from '@patternfly/react-core';
+
+import { Device } from '@flightctl/types';
+import YamlEditor from '../../common/CodeEditor/YamlEditor';
+import { showSpinnerBriefly } from '../../../utils/time';
+import { useTranslation } from '../../../hooks/useTranslation';
+
+const YAML_TAB_REFETCH_DELAY_MS = 500;
+
+const DeviceYamlTab = ({
+  device,
+  refetch,
+  editDisabledReason,
+  canEdit,
+}: {
+  device: Required<Device>;
+  refetch: VoidFunction;
+  editDisabledReason?: string;
+  canEdit: boolean;
+}) => {
+  const { t } = useTranslation();
+  const [ready, setReady] = React.useState(false);
+
+  React.useEffect(() => {
+    // We want the YAML editor to open with the latest device version from the beginning.
+    // We add a delay that should be enough for refetch to have finished
+    const updateDevice = async () => {
+      refetch();
+      setReady(false);
+      await showSpinnerBriefly(YAML_TAB_REFETCH_DELAY_MS);
+      setReady(true);
+    };
+    void updateDevice();
+  }, [refetch]);
+
+  if (!ready) {
+    return (
+      <Bullseye>
+        <Spinner size="lg" aria-label={t('Refreshing device')} />
+      </Bullseye>
+    );
+  }
+
+  return <YamlEditor apiObj={device} refetch={refetch} disabledEditReason={editDisabledReason} canEdit={canEdit} />;
+};
+
+export default DeviceYamlTab;