Render `Unknown` for sync settings when `syncStatusUnavailable` is true

ee/app/assets/javascripts/geo_nodes/components/geo_node_sync_settings.vue

@@ -14,6 +14,11 @@
       icon,
     },
     props: {
+      syncStatusUnavailable: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       selectiveSyncType: {
         type: String,
         required: false,
@@ -105,6 +110,13 @@
     class="node-detail-value"
   >
     <span
+      v-if="syncStatusUnavailable"
+      class="node-detail-value-bold"
+    >
+      {{ __('Unknown') }}
+    </span>
+    <span
+      v-else
       v-tooltip
       class="node-sync-settings inline"
       data-placement="bottom"

spec/javascripts/geo_nodes/components/geo_node_sync_settings_spec.js

@@ -5,12 +5,14 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { mockNodeDetails } from '../mock_data';
 
 const createComponent = (
+  syncStatusUnavailable = false,
   selectiveSyncType = mockNodeDetails.selectiveSyncType,
   lastEvent = mockNodeDetails.lastEvent,
   cursorLastEvent = mockNodeDetails.cursorLastEvent) => {
   const Component = Vue.extend(geoNodeSyncSettingsComponent);
 
   return mountComponent(Component, {
+    syncStatusUnavailable,
     selectiveSyncType,
     lastEvent,
     cursorLastEvent,
@@ -29,7 +31,7 @@ describe('GeoNodeSyncSettingsComponent', () => {
 
     describe('eventTimestampEmpty', () => {
       it('returns `true` if one of the event timestamp is empty', () => {
-        const vmEmptyTimestamp = createComponent(mockNodeDetails.namespaces, {
+        const vmEmptyTimestamp = createComponent(false, mockNodeDetails.namespaces, {
           id: 0,
           timeStamp: 0,
         }, {
@@ -87,4 +89,12 @@ describe('GeoNodeSyncSettingsComponent', () => {
       });
     });
   });
+
+  describe('template', () => {
+    it('renders `Unknown` when `syncStatusUnavailable` prop is true', () => {
+      const vmSyncUnavailable = createComponent(true);
+      expect(vmSyncUnavailable.$el.innerText.trim()).toBe('Unknown');
+      vmSyncUnavailable.$destroy();
+    });
+  });
 });