fix(containers): address review feedback on Info tab

- Reorder v-if/v-else-if/v-else so error/unknown state is the final
  fallback; use `{{ error || 'An unknown error has occurred' }}`
- Wrap Name and Image summary fields in <code> for consistent styling
- Replace .section-summary class with nested > summary selector in
  .inspect-section, removing the redundant class from all <summary>
  elements
- Move ContainerInspectData fetch into the container-engine store:
  export ContainerMount/ContainerInspectData interfaces, add
  inspectData state, SET_INSPECT_DATA mutation, and
  fetchContainerInspect action; clear inspectData on backend/namespace
  change; component now dispatches the action and reads data from store
- Simplify e2e nav helper usage (navPage.navigateTo returns the page)

Signed-off-by: Gildas Le Nadan <3ntr0p13+github@gmail.com>

Author: endemics

e2e/containers.e2e.spec.ts

@@ -440,9 +440,7 @@ test.describe.serial('Container Info Tab', () => {
     );
     infoContainerId = output.trim();
 
-    const navPage2 = new NavPage(page);
-    await navPage2.navigateTo('Containers');
-    const containersPage = new ContainersPage(page);
+    const containersPage = await navPage.navigateTo('Containers');
     await containersPage.waitForTableToLoad();
     await containersPage.waitForContainerToAppear(infoContainerId);
     await containersPage.clickContainerAction(infoContainerId, 'info');

pkg/rancher-desktop/components/ContainerInspect.vue

@@ -12,15 +12,6 @@
       Loading container details…
     </div>
 
-    <div
-      v-else-if="error"
-      class="error-state"
-      data-testid="info-error"
-    >
-      <i class="icon icon-warning" />
-      {{ error }}
-    </div>
-
     <template v-else-if="data">
       <!-- Summary table -->
       <table
@@ -30,15 +21,15 @@
         <tbody>
           <tr data-testid="info-row-name">
             <th>Name</th>
-            <td>{{ displayName }}</td>
+            <td><code>{{ displayName }}</code></td>
           </tr>
           <tr data-testid="info-row-id">
             <th>ID</th>
             <td><code>{{ shortId }}</code></td>
           </tr>
           <tr data-testid="info-row-image">
             <th>Image</th>
-            <td>{{ data.Config.Image }}</td>
+            <td><code>{{ data.Config.Image }}</code></td>
           </tr>
           <tr data-testid="info-row-ip">
             <th>IP Address</th>
@@ -63,7 +54,7 @@
         class="inspect-section"
         data-testid="info-section-mounts"
       >
-        <summary class="section-summary">
+        <summary>
           Mounts <span class="count">({{ data.Mounts.length }})</span>
         </summary>
         <div
@@ -105,7 +96,7 @@
         class="inspect-section"
         data-testid="info-section-env"
       >
-        <summary class="section-summary">
+        <summary>
           Environment <span class="count">({{ envVars.length }})</span>
         </summary>
         <div
@@ -127,7 +118,7 @@
         class="inspect-section"
         data-testid="info-section-command"
       >
-        <summary class="section-summary">
+        <summary>
           Command &amp; Args
         </summary>
         <div class="section-body">
@@ -155,7 +146,7 @@
         class="inspect-section"
         data-testid="info-section-capabilities"
       >
-        <summary class="section-summary">
+        <summary>
           Capabilities
         </summary>
         <div class="section-body">
@@ -179,7 +170,7 @@
         class="inspect-section"
         data-testid="info-section-ports"
       >
-        <summary class="section-summary">
+        <summary>
           Ports <span class="count">({{ portEntries.length }})</span>
         </summary>
         <div
@@ -208,7 +199,7 @@
         class="inspect-section"
         data-testid="info-section-labels"
       >
-        <summary class="section-summary">
+        <summary>
           Labels <span class="count">({{ labelEntries.length }})</span>
         </summary>
         <div
@@ -235,55 +226,33 @@
         </div>
       </details>
     </template>
+
+    <div
+      v-else
+      class="error-state"
+      data-testid="info-error"
+    >
+      <i class="icon icon-warning" />
+      {{ error || 'An unknown error has occurred' }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
 
-interface ContainerMount {
-  Type:        string;
-  Source:      string;
-  Destination: string;
-  RW:          boolean;
-  Mode:        string;
-}
-
-interface ContainerInspectData {
-  Id:      string;
-  Name:    string;
-  Created: string;
-  State: {
-    Status:     string;
-    StartedAt:  string;
-    FinishedAt: string;
-  };
-  Config: {
-    Image:      string;
-    Env:        string[] | null;
-    Cmd:        string[] | null;
-    Entrypoint: string[] | null;
-    Labels:     Record<string, string> | null;
-  };
-  HostConfig: {
-    CapAdd:  string[] | null;
-    CapDrop: string[] | null;
-  };
-  Mounts:          ContainerMount[];
-  NetworkSettings: {
-    IPAddress: string;
-    Ports:     Record<string, ({ HostIp: string; HostPort: string }[]) | null>;
-    Networks:  Record<string, { IPAddress: string }>;
-  };
-  Args: string[];
-}
+import type { ContainerInspectData } from '@pkg/store/container-engine';
 
 const props = defineProps<{
   containerId: string;
   namespace:   string | undefined;
 }>();
 
-const data = ref<ContainerInspectData | null>(null);
+const store = useStore();
+const data = computed<ContainerInspectData | undefined>(
+  () => store.state['container-engine'].inspectData[props.containerId],
+);
 const loading = ref(false);
 const error = ref<string | null>(null);
 
@@ -293,17 +262,12 @@ const fetchInspect = async() => {
   }
   loading.value = true;
   error.value = null;
-  data.value = null;
 
   try {
-    const result = await window.ddClient.docker.cli.exec(
-      'inspect',
-      [props.containerId],
-      { namespace: props.namespace },
-    );
-    const parsed = result.parseJsonObject() as ContainerInspectData[];
-
-    data.value = parsed[0];
+    await store.dispatch('container-engine/fetchContainerInspect', {
+      containerId: props.containerId,
+      namespace:   props.namespace,
+    });
   } catch (err: any) {
     error.value = err?.message ?? 'Failed to load container details.';
   } finally {
@@ -413,38 +377,38 @@ const formatDate = (iso: string): string => {
   border-radius: var(--border-radius);
   overflow: hidden;
 
-  &[open] .section-summary {
+  &[open] > summary {
     border-bottom: 1px solid var(--border);
-  }
-}
-
-.section-summary {
-  padding: 0.5rem 0.75rem;
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  list-style: none;
 
-  &::-webkit-details-marker {
-    display: none;
+    &::before {
+      transform: rotate(90deg);
+    }
   }
 
-  &::before {
-    content: '▶';
-    display: inline-block;
-    margin-right: 0.5rem;
-    transition: transform 0.15s ease;
-    font-size: 0.7em;
-  }
+  > summary {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    user-select: none;
+    font-weight: 500;
+    list-style: none;
 
-  details[open] &::before {
-    transform: rotate(90deg);
-  }
+    &::-webkit-details-marker {
+      display: none;
+    }
 
-  .count {
-    color: var(--muted);
-    font-weight: 400;
-    font-size: 0.875em;
+    &::before {
+      content: '▶';
+      display: inline-block;
+      margin-right: 0.5rem;
+      transition: transform 0.15s ease;
+      font-size: 0.7em;
+    }
+
+    .count {
+      color: var(--muted);
+      font-weight: 400;
+      font-size: 0.875em;
+    }
   }
 }
 

pkg/rancher-desktop/store/container-engine.ts

@@ -8,7 +8,44 @@ import type { RDXClient } from '@pkg/preload/extensions';
 
 type ValidContainerEngine = Exclude<ContainerEngine, ContainerEngine.NONE>;
 type SubscriberType = 'containers' | 'volumes';
-type ErrorSource = 'containers' | 'volumes' | 'namespaces';
+type ErrorSource = 'containers' | 'volumes' | 'namespaces' | 'inspect';
+
+export interface ContainerMount {
+  Type:        string;
+  Source:      string;
+  Destination: string;
+  RW:          boolean;
+  Mode:        string;
+}
+
+export interface ContainerInspectData {
+  Id:      string;
+  Name:    string;
+  Created: string;
+  State: {
+    Status:     string;
+    StartedAt:  string;
+    FinishedAt: string;
+  };
+  Config: {
+    Image:      string;
+    Env:        string[] | null;
+    Cmd:        string[] | null;
+    Entrypoint: string[] | null;
+    Labels:     Record<string, string> | null;
+  };
+  HostConfig: {
+    CapAdd:  string[] | null;
+    CapDrop: string[] | null;
+  };
+  Mounts:          ContainerMount[];
+  NetworkSettings: {
+    IPAddress: string;
+    Ports:     Record<string, ({ HostIp: string; HostPort: string }[]) | null>;
+    Networks:  Record<string, { IPAddress: string }>;
+  };
+  Args: string[];
+}
 
 /**
  * Shared extension API container list result parts
@@ -179,29 +216,31 @@ function subscriberConstructor(backend: ValidContainerEngine, type: SubscriberTy
 
 export interface ContainersState {
   /** The backend in use; this may not match the committed preferences. */
-  backend:    ContainerEngine;
+  backend:     ContainerEngine;
   /** The type of object to monitor. */
-  type:       SubscriberType;
-  client:     RDXClient | null;
-  namespaces: string[] | null;
-  namespace:  string | undefined;
-  subscriber: Subscriber | null;
-  containers: Record<string, Container> | null;
-  volumes:    Record<string, Volume> | null;
+  type:        SubscriberType;
+  client:      RDXClient | null;
+  namespaces:  string[] | null;
+  namespace:   string | undefined;
+  subscriber:  Subscriber | null;
+  containers:  Record<string, Container> | null;
+  volumes:     Record<string, Volume> | null;
+  inspectData: Record<string, ContainerInspectData>;
   /** The last error encountered, plus which fetch caused it. */
-  error:      { source: ErrorSource, error: Error } | null;
+  error:       { source: ErrorSource, error: Error } | null;
 }
 
 export const state: () => ContainersState = () => ({
-  backend:    ContainerEngine.NONE,
-  type:       'containers',
-  client:     null,
-  namespaces: null,
-  namespace:  undefined,
-  subscriber: null,
-  containers: null,
-  volumes:    null,
-  error:      null,
+  backend:     ContainerEngine.NONE,
+  type:        'containers',
+  client:      null,
+  namespaces:  null,
+  namespace:   undefined,
+  subscriber:  null,
+  containers:  null,
+  volumes:     null,
+  inspectData: {},
+  error:       null,
 });
 
 type BulkParams = Pick<ContainersState, 'backend' | 'type' | 'client' | 'namespace'>;
@@ -223,6 +262,9 @@ export const mutations = {
   SET_ERROR(state, error) {
     state.error = error;
   },
+  SET_INSPECT_DATA(state, { containerId, data }: { containerId: string, data: ContainerInspectData }) {
+    state.inspectData = { ...state.inspectData, [containerId]: data };
+  },
   SET_PARAMS(state, params: BulkParams) {
     let clearData = false;
     switch (true) {
@@ -242,6 +284,7 @@ export const mutations = {
       state.subscriber = null;
       state.containers = null;
       state.volumes = null;
+      state.inspectData = {};
     }
   },
 } satisfies Partial<MutationsType<ContainersState>> & MutationTree<ContainersState>;
@@ -351,6 +394,16 @@ export const actions = {
       commit('SET_ERROR', { source: 'containers', error });
     }
   },
+  async fetchContainerInspect({ commit, state }, { containerId, namespace }: { containerId: string, namespace?: string }) {
+    const result = await state.client?.docker.cli.exec(
+      'inspect',
+      [containerId],
+      { namespace },
+    );
+    const parsed = result.parseJsonObject() as ContainerInspectData[];
+
+    commit('SET_INSPECT_DATA', { containerId, data: parsed[0] });
+  },
   async fetchVolumes({ commit, getters, state }) {
     try {
       const { client, namespace } = state;