From a7429923fb364e530df3f273ab9dd893fc77f32e Mon Sep 17 00:00:00 2001
From: Celia Amador <camadorg@redhat.com>
Date: Wed, 25 Feb 2026 13:04:07 +0100
Subject: [PATCH] EDM-3383: Refresh device before displaying YAML

---
 libs/i18n/locales/en/translation.json         |  1 +
 .../DeviceDetails/DeviceDetailsPage.tsx       | 12 ++---
 .../Device/DeviceDetails/DeviceYamlTab.tsx    | 48 +++++++++++++++++++
 3 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 libs/ui-components/src/components/Device/DeviceDetails/DeviceYamlTab.tsx

diff --git a/libs/i18n/locales/en/translation.json b/libs/i18n/locales/en/translation.json
index f04be819c..f37dc432f 100644
--- a/libs/i18n/locales/en/translation.json
+++ b/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",
diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx
index 3df653123..086e16a1d 100644
--- a/libs/ui-components/src/components/Device/DeviceDetails/DeviceDetailsPage.tsx
+++ b/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}
               />
             }
diff --git a/libs/ui-components/src/components/Device/DeviceDetails/DeviceYamlTab.tsx b/libs/ui-components/src/components/Device/DeviceDetails/DeviceYamlTab.tsx
new file mode 100644
index 000000000..8378d0066
--- /dev/null
+++ b/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;