@spinnaker/kubernetes 2026.2.3 → 2026.3.0

package/src/manifest/selector/ManifestSelector.spec.tsx

@@ -1,5 +1,7 @@
 import { mount } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import type { Option } from 'react-select';
 import Select, { Creatable } from 'react-select';
 
@@ -21,16 +23,40 @@ import LabelEditor from './labelEditor/LabelEditor';
 import Spy = jasmine.Spy;
 
 describe('<ManifestSelector />', () => {
+  let accountService: Spy;
+  let mountedComponents: Array<ReactWrapper<ManifestSelector>>;
   let searchService: Spy;
 
   beforeEach(() => {
+    mountedComponents = [];
     searchService = spyOn(ManifestKindSearchService, 'search').and.returnValue(Promise.resolve([]));
-    spyOn(AccountService, 'getAllAccountDetailsForProvider').and.returnValue(Promise.resolve([]));
+    accountService = spyOn(AccountService, 'getAllAccountDetailsForProvider').and.returnValue(Promise.resolve([]));
   });
 
+  afterEach(async () => {
+    await act(async () => {
+      await Promise.all(searchService.calls.all().map(({ returnValue }) => returnValue));
+      mountedComponents.splice(0).forEach((wrapper) => wrapper.unmount());
+    });
+  });
+
+  const component = async (selector: any, props: any = {}) => {
+    const wrapper = mount<ManifestSelector>(
+      (<ManifestSelector onChange={noop} selector={selector} {...props} />) as any,
+    );
+    mountedComponents.push(wrapper);
+
+    await act(async () => {
+      await accountService.calls.mostRecent().returnValue;
+      await Promise.resolve();
+    });
+    wrapper.update();
+    return wrapper;
+  };
+
   describe('initialization', () => {
-    it('renders namespace from input props', () => {
-      const wrapper = component({
+    it('renders namespace from input props', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -40,8 +66,8 @@ describe('<ManifestSelector />', () => {
       expect((namespace.props().value as Option).value).toEqual('default');
     });
 
-    it('renders kind from input props', () => {
-      const wrapper = component({
+    it('renders kind from input props', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -51,8 +77,8 @@ describe('<ManifestSelector />', () => {
       expect((kind.props().value as Option).value).toEqual('configMap');
     });
 
-    it('renders name from input props', () => {
-      const wrapper = component({
+    it('renders name from input props', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -62,8 +88,8 @@ describe('<ManifestSelector />', () => {
       expect((name.props().value as Option).value).toEqual('my-config-map');
     });
 
-    it('renders kinds from input props', () => {
-      const wrapper = component({
+    it('renders kinds from input props', async () => {
+      const wrapper = await component({
         account: 'my-account',
         kinds: ['configMap', 'deployment'],
         location: 'default',
@@ -74,7 +100,7 @@ describe('<ManifestSelector />', () => {
       expect(kinds.props().value).toEqual(['configMap', 'deployment']);
     });
 
-    it('renders labels from input props', () => {
+    it('renders labels from input props', async () => {
       const labelSelectors: IManifestLabelSelector[] = [
         {
           key: 'label-key',
@@ -82,7 +108,7 @@ describe('<ManifestSelector />', () => {
           values: ['label-value'],
         },
       ];
-      const wrapper = component({
+      const wrapper = await component({
         account: 'my-account',
         kinds: ['configMap', 'deployment'],
         labelSelectors: {
@@ -102,8 +128,8 @@ describe('<ManifestSelector />', () => {
         application: { getDataSource: () => ({ data }) },
       });
 
-      it("includes cluster if selected kind matches the cluster's server groups' kind", () => {
-        const wrapper = component(
+      it("includes cluster if selected kind matches the cluster's server groups' kind", async () => {
+        const wrapper = await component(
           {
             kind: 'replicaSet',
             account: 'my-account',
@@ -124,8 +150,8 @@ describe('<ManifestSelector />', () => {
         expect(cluster.props().clusters).toEqual(['replicaSet my-replica-set']);
       });
 
-      it("does not include cluster if selected kind does not match cluster's server groups' kind", () => {
-        const wrapper = component(
+      it("does not include cluster if selected kind does not match cluster's server groups' kind", async () => {
+        const wrapper = await component(
           {
             kind: 'statefulSet',
             account: 'my-account',
@@ -146,8 +172,8 @@ describe('<ManifestSelector />', () => {
         expect(cluster.props().clusters).toEqual([]);
       });
 
-      it('handles case in which a cluster has two different kinds of server groups', () => {
-        const wrapper = component(
+      it('handles case in which a cluster has two different kinds of server groups', async () => {
+        const wrapper = await component(
           {
             kind: 'statefulSet',
             account: 'my-account',
@@ -174,8 +200,8 @@ describe('<ManifestSelector />', () => {
         expect(cluster.props().clusters).toEqual(['my-cluster']);
       });
 
-      it("does not include cluster if the cluster's server groups are managed", () => {
-        const wrapper = component(
+      it("does not include cluster if the cluster's server groups are managed", async () => {
+        const wrapper = await component(
           {
             kind: 'replicaSet',
             account: 'my-account',
@@ -197,8 +223,8 @@ describe('<ManifestSelector />', () => {
         expect(cluster.props().clusters).toEqual([]);
       });
 
-      it('filters clusters by account', () => {
-        const wrapper = component(
+      it('filters clusters by account', async () => {
+        const wrapper = await component(
           {
             kind: 'replicaSet',
             account: 'my-other-account',
@@ -219,8 +245,8 @@ describe('<ManifestSelector />', () => {
         expect(cluster.props().clusters).toEqual([]);
       });
 
-      it('filters clusters by namespace', () => {
-        const wrapper = component(
+      it('filters clusters by namespace', async () => {
+        const wrapper = await component(
           {
             kind: 'replicaSet',
             account: 'my-account',
@@ -244,8 +270,8 @@ describe('<ManifestSelector />', () => {
   });
 
   describe('change handlers', () => {
-    it('calls the search service after updating the `Kind` field', () => {
-      const wrapper = component({
+    it('calls the search service after updating the `Kind` field', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -256,8 +282,8 @@ describe('<ManifestSelector />', () => {
       expect(searchService).toHaveBeenCalledWith('deployment', 'default', 'my-account');
     });
 
-    it('calls the search service after updating the `Namespace` field', () => {
-      const wrapper = component({
+    it('calls the search service after updating the `Namespace` field', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -268,8 +294,8 @@ describe('<ManifestSelector />', () => {
       expect(searchService).toHaveBeenCalledWith('configMap', 'kube-system', 'my-account');
     });
 
-    it('calls the search service after updating the `Account` field', () => {
-      const wrapper = component({
+    it('calls the search service after updating the `Account` field', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -286,8 +312,28 @@ describe('<ManifestSelector />', () => {
       expect(searchService).toHaveBeenCalledWith('configMap', 'default', 'my-other-account');
     });
 
-    it('clears namespace when changing account if account does not have selected namespace', () => {
-      const wrapper = component({
+    it('waits for complete manifest search criteria', async () => {
+      const wrapper = await component({ mode: SelectorMode.Static });
+      wrapper.setState({
+        accounts: [{ name: 'my-account', namespaces: ['default'] }],
+      } as IManifestSelectorState);
+      searchService.calls.reset();
+
+      const account = wrapper.find(AccountSelectInput).first();
+      account.props().onChange(createFakeReactSyntheticEvent({ value: 'my-account' }));
+      expect(searchService).not.toHaveBeenCalled();
+
+      const namespace = wrapper.find({ label: 'Namespace' }).find(Creatable).first();
+      namespace.props().onChange({ value: 'default', label: 'default' });
+      expect(searchService).not.toHaveBeenCalled();
+
+      const kind = wrapper.find({ label: 'Kind' }).find(Creatable).first();
+      kind.props().onChange({ value: 'deployment', label: 'deployment' });
+      expect(searchService).toHaveBeenCalledOnceWith('deployment', 'default', 'my-account');
+    });
+
+    it('clears namespace when changing account if account does not have selected namespace', async () => {
+      const wrapper = await component({
         manifestName: 'configMap my-config-map',
         account: 'my-account',
         location: 'default',
@@ -306,8 +352,8 @@ describe('<ManifestSelector />', () => {
   });
 
   describe('mode change', () => {
-    it('handles kind during static -> dynamic mode transition', () => {
-      const wrapper = component(
+    it('handles kind during static -> dynamic mode transition', async () => {
+      const wrapper = await component(
         {
           manifestName: 'configMap my-config-map',
           account: 'my-account',
@@ -320,8 +366,8 @@ describe('<ManifestSelector />', () => {
       expect(wrapper.state().selector.kind).toEqual('configMap');
     });
 
-    it('handles kind during static -> label mode transition', () => {
-      const wrapper = component(
+    it('handles kind during static -> label mode transition', async () => {
+      const wrapper = await component(
         {
           manifestName: 'configMap my-config-map',
           account: 'my-account',
@@ -336,8 +382,8 @@ describe('<ManifestSelector />', () => {
       expect(wrapper.state().selector.manifestName).toBeNull();
     });
 
-    it('handles kind during dynamic -> static mode transition', () => {
-      const wrapper = component(
+    it('handles kind during dynamic -> static mode transition', async () => {
+      const wrapper = await component(
         {
           account: 'my-account',
           location: 'default',
@@ -352,8 +398,8 @@ describe('<ManifestSelector />', () => {
       expect(wrapper.state().selector.manifestName).toEqual('configMap');
     });
 
-    it('handles kind during dynamic -> label mode transition', () => {
-      const wrapper = component(
+    it('handles kind during dynamic -> label mode transition', async () => {
+      const wrapper = await component(
         {
           account: 'my-account',
           location: 'default',
@@ -369,8 +415,8 @@ describe('<ManifestSelector />', () => {
       expect(wrapper.state().selector.manifestName).toBeNull();
     });
 
-    it('handles kind during label -> static mode transition', () => {
-      const wrapper = component(
+    it('handles kind during label -> static mode transition', async () => {
+      const wrapper = await component(
         {
           account: 'my-account',
           location: 'default',
@@ -388,8 +434,8 @@ describe('<ManifestSelector />', () => {
       expect(wrapper.state().selector.kinds).toBeNull();
     });
 
-    it('handles kind during label -> dynamic mode transition', () => {
-      const wrapper = component(
+    it('handles kind during label -> dynamic mode transition', async () => {
+      const wrapper = await component(
         {
           account: 'my-account',
           location: 'default',
@@ -408,6 +454,3 @@ describe('<ManifestSelector />', () => {
     });
   });
 });
-
-const component = (selector: any, props: any = {}) =>
-  mount<ManifestSelector>((<ManifestSelector onChange={noop} selector={selector} {...props} />) as any);

package/src/manifest/selector/ManifestSelector.tsx

@@ -10,12 +10,12 @@ import {
   AccountSelectInput,
   AccountService,
   AppListExtractor,
-  NgReact,
   noop,
   ScopeClusterSelector,
   SETTINGS,
   StageConfigField,
   StageConstants,
+  TargetSelect,
 } from '@spinnaker/core';
 
 import type { IManifestLabelSelector } from './IManifestLabelSelector';
@@ -164,7 +164,7 @@ export class ManifestSelector extends React.Component<IManifestSelectorProps, IM
 
   public componentWillUnmount = () => this.destroy$.next();
 
-  public loadAccounts = (): PromiseLike<void> => {
+  public loadAccounts = (): Promise<void> => {
     return AccountService.getAllAccountDetailsForProvider('kubernetes').then((accounts) => {
       const selector = this.state.selector;
       const kind = parseSpinnakerName(selector.manifestName).kind;
@@ -244,8 +244,8 @@ export class ManifestSelector extends React.Component<IManifestSelectorProps, IM
 
   private isExpression = (value: string): boolean => (typeof value === 'string' ? value.includes('${') : false);
 
-  private search = (kind: string, namespace: string, account: string): PromiseLike<string[]> => {
-    if (this.isExpression(account)) {
+  private search = (kind: string, namespace: string, account: string): Promise<string[]> => {
+    if (!kind || !namespace || !account || this.isExpression(account)) {
       return Promise.resolve([]);
     }
     return ManifestKindSearchService.search(kind, namespace, account).then((results) =>
@@ -310,7 +310,6 @@ export class ManifestSelector extends React.Component<IManifestSelectorProps, IM
   };
 
   public render() {
-    const { TargetSelect } = NgReact;
     const selectedMode = this.getSelectedMode();
     const modes = this.props.modes || [selectedMode];
     const { selector, accounts, kinds, namespaces, resources, loading } = this.state;

package/src/manifest/traffic/ManifestTrafficService.ts

@@ -7,7 +7,7 @@ export class ManifestTrafficService {
   public static readonly ENABLE_MANIFEST_OPERATION = 'enableManifest';
   public static readonly DISABLE_MANIFEST_OPERATION = 'disableManifest';
 
-  public static enable = (manifest: IManifest, application: Application, reason?: string): PromiseLike<ITask> => {
+  public static enable = (manifest: IManifest, application: Application, reason?: string): Promise<ITask> => {
     return TaskExecutor.executeTask({
       job: [
         {
@@ -24,7 +24,7 @@ export class ManifestTrafficService {
     });
   };
 
-  public static disable = (manifest: IManifest, application: Application, reason?: string): PromiseLike<ITask> => {
+  public static disable = (manifest: IManifest, application: Application, reason?: string): Promise<ITask> => {
     return TaskExecutor.executeTask({
       job: [
         {

package/src/manifest/wizard/ManifestWizard.tsx

@@ -47,7 +47,7 @@ export class ManifestWizard extends React.Component<IKubernetesManifestModalProp
       taskMonitor: new TaskMonitor({
         application: props.application,
         title: `${this.props.isNew ? 'Deploying' : 'Updating'} your manifest`,
-        modalInstance: TaskMonitor.modalInstanceEmulation(() => this.props.dismissModal()),
+        onDismiss: () => this.props.dismissModal(),
       }),
     };
   }

package/src/pipelines/stages/deleteManifest/DeleteManifestOptionsForm.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { noop, StageConfigField } from '@spinnaker/core';
 
-import type { IDeleteOptions } from '../../../manifest/delete/delete.controller';
+import type { IDeleteOptions } from '../../../manifest/delete/delete.types';
 
 import './deleteManifestOptionsForm.less';
 

package/src/pipelines/stages/deleteManifest/DeleteManifestStageConfig.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { Application, IStage, IStageConfigProps } from '@spinnaker/core';
 
 import DeleteManifestOptionsForm from './DeleteManifestOptionsForm';
-import type { IDeleteOptions } from '../../../manifest/delete/delete.controller';
+import type { IDeleteOptions } from '../../../manifest/delete/delete.types';
 import type { IManifestSelector } from '../../../manifest/selector/IManifestSelector';
 import { SelectorMode } from '../../../manifest/selector/IManifestSelector';
 import { ManifestSelector } from '../../../manifest/selector/ManifestSelector';

package/src/pipelines/stages/deployManifest/DeployManifestStageForm.tsx

@@ -12,6 +12,7 @@ import type {
 import {
   ArtifactTypePatterns,
   CheckboxInput,
+  NumberInput,
   RadioButtonInput,
   SETTINGS,
   StageArtifactSelectorDelegate,
@@ -254,6 +255,21 @@ export class DeployManifestStageForm extends React.Component<
           onConfigChange={(config) => this.props.formik.setFieldValue('trafficManagement', config)}
           selectedAccount={stage.account}
         />
+        <hr />
+        <h4>Stability Timeout</h4>
+        <StageConfigField label="Timeout (minutes)" helpKey="kubernetes.manifest.stableManifestTimeout">
+          <NumberInput
+            value={stage.stableManifestTimeoutMinutes ?? ''}
+            min={1}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              const val = e.target.value;
+              this.props.formik.setFieldValue('stableManifestTimeoutMinutes', val === '' ? undefined : Number(val));
+            }}
+          />
+          <div className="form-inline">
+            <span className="input-label sp-padding-xs-left">Leave blank to use the default (30 minutes).</span>
+          </div>
+        </StageConfigField>
       </div>
     );
   }

package/src/pipelines/stages/deployManifest/ManifestCopier.spec.ts

@@ -1,86 +1,13 @@
-import type { IQService, IScope } from 'angular';
-import { mock } from 'angular';
-
 import type { Application } from '@spinnaker/core';
-import { ApplicationModelBuilder, noop } from '@spinnaker/core';
+import { noop } from '@spinnaker/core';
 import { ManifestCopier } from './ManifestCopier';
 
 describe('<ManifestCopier />', () => {
   let application: Application;
 
-  beforeEach(
-    mock.inject(($q: IQService, $rootScope: IScope) => {
-      const $scope = $rootScope.$new();
-      // The application model implicitly depends on a bunch of Angular things, which is why
-      // we need the Angular mock environment (even though we're testing a React component).
-      application = ApplicationModelBuilder.createApplicationForTests(
-        'app',
-        {
-          key: 'serverGroups',
-          loader: () =>
-            $q.resolve([
-              // Replica sets in same cluster, no manager.
-              {
-                name: 'replicaSet my-replicaSet-v002',
-                region: 'default',
-                category: 'serverGroup',
-                account: 'my-k8s-account',
-                cloudProvider: 'kubernetes',
-                cluster: 'replicaSet my-replicaSet',
-              },
-              {
-                name: 'replicaSet my-replicaSet-v001',
-                region: 'default',
-                category: 'serverGroup',
-                account: 'my-k8s-account',
-                cloudProvider: 'kubernetes',
-                cluster: 'replicaSet my-replicaSet',
-              },
-              // Replica set managed by deployment.
-              {
-                name: 'replicaSet my-managed-replicaSet-v001',
-                region: 'default',
-                category: 'serverGroup',
-                account: 'my-k8s-account',
-                cloudProvider: 'kubernetes',
-                cluster: 'deployment my-deployment',
-                serverGroupManagers: [{ name: 'deployment my-deployment' }],
-              },
-            ]),
-          onLoad: (_app: Application, data: any) => $q.resolve(data),
-          defaultData: [],
-        },
-        {
-          key: 'serverGroupManagers',
-          loader: () =>
-            $q.resolve([
-              {
-                name: 'deployment my-deployment',
-                region: 'default',
-                account: 'my-k8s-account',
-                cloudProvider: 'kubernetes',
-              },
-            ]),
-          onLoad: (_app: Application, data: any) => $q.resolve(data),
-          defaultData: [],
-        },
-        {
-          key: 'securityGroups',
-          loader: () => $q.resolve([]),
-          onLoad: (_app: Application, data: any) => $q.resolve(data),
-          defaultData: [],
-        },
-        {
-          key: 'loadBalancers',
-          loader: () => $q.resolve([]),
-          onLoad: (_app: Application, data: any) => $q.resolve(data),
-          defaultData: [],
-        },
-      );
-      application.refresh();
-      $scope.$digest();
-    }),
-  );
+  beforeEach(() => {
+    application = buildApplication();
+  });
 
   describe('dropdown grouping & ordering', () => {
     it('sorts deployments to the top of the list', () => {
@@ -108,3 +35,51 @@ const buildProps = (application: Application) => ({
   onManifestSelected: noop,
   show: true,
 });
+
+const buildApplication = (): Application => {
+  const dataSources = {
+    serverGroups: [
+      // Replica sets in same cluster, no manager.
+      {
+        name: 'replicaSet my-replicaSet-v002',
+        region: 'default',
+        category: 'serverGroup',
+        account: 'my-k8s-account',
+        cloudProvider: 'kubernetes',
+        cluster: 'replicaSet my-replicaSet',
+      },
+      {
+        name: 'replicaSet my-replicaSet-v001',
+        region: 'default',
+        category: 'serverGroup',
+        account: 'my-k8s-account',
+        cloudProvider: 'kubernetes',
+        cluster: 'replicaSet my-replicaSet',
+      },
+      // Replica set managed by deployment.
+      {
+        name: 'replicaSet my-managed-replicaSet-v001',
+        region: 'default',
+        category: 'serverGroup',
+        account: 'my-k8s-account',
+        cloudProvider: 'kubernetes',
+        cluster: 'deployment my-deployment',
+        serverGroupManagers: [{ name: 'deployment my-deployment' }],
+      },
+    ],
+    serverGroupManagers: [
+      {
+        name: 'deployment my-deployment',
+        region: 'default',
+        account: 'my-k8s-account',
+        cloudProvider: 'kubernetes',
+      },
+    ],
+    securityGroups: [],
+    loadBalancers: [],
+  };
+
+  return ({
+    getDataSource: (key: keyof typeof dataSources) => ({ data: dataSources[key] }),
+  } as unknown) as Application;
+};

package/src/pipelines/stages/deployManifest/ManifestDeploymentOptions.spec.tsx

@@ -5,6 +5,7 @@ import { StageConfigField } from '@spinnaker/core';
 
 import type { IManifestDeploymentOptionsProps } from './ManifestDeploymentOptions';
 import { defaultTrafficManagementConfig, ManifestDeploymentOptions } from './ManifestDeploymentOptions';
+import { ManifestKindSearchService } from '../../../manifest/ManifestKindSearch';
 
 describe('<ManifestDeploymentOptions />', () => {
   const onConfigChangeSpy = jasmine.createSpy('onConfigChangeSpy');
@@ -12,6 +13,7 @@ describe('<ManifestDeploymentOptions />', () => {
   let props: IManifestDeploymentOptionsProps;
 
   beforeEach(() => {
+    spyOn(ManifestKindSearchService, 'search').and.returnValue(Promise.resolve([]));
     props = {
       accounts: [],
       config: defaultTrafficManagementConfig,

package/src/pipelines/stages/deployManifest/manifestStatus/DeployStatus.tsx

@@ -2,11 +2,17 @@ import { get } from 'lodash';
 import React from 'react';
 
 import type { IExecutionDetailsSectionProps, IManifest } from '@spinnaker/core';
-import { CollapsibleElement, ExecutionDetailsSection, SETTINGS, StageFailureMessage } from '@spinnaker/core';
+import {
+  CollapsibleElement,
+  ExecutionDetailsSection,
+  ManifestYaml,
+  SETTINGS,
+  StageFailureMessage,
+} from '@spinnaker/core';
 
 import { ManifestStatus } from './ManifestStatus';
-import type { IStageManifest } from '../../../../manifest/manifest.service';
-import { KubernetesManifestService } from '../../../../manifest/manifest.service';
+import type { IStageManifest, IStoredManifestReference } from '../../../../manifest/manifest.service';
+import { isStoredManifestReference, KubernetesManifestService } from '../../../../manifest/manifest.service';
 
 import './DeployStatus.less';
 
@@ -38,7 +44,9 @@ export class DeployStatus extends React.Component<IExecutionDetailsSectionProps,
   }
 
   public componentDidUpdate(_prevProps: IExecutionDetailsSectionProps, prevState: IDeployStatusState) {
-    const manifests: IStageManifest[] = get(this.props.stage, ['context', 'outputs.manifests'], []).filter((m) => !!m);
+    const manifests: IStageManifest[] = get(this.props.stage, ['context', 'outputs.manifests'], [])
+      .filter((m) => !!m)
+      .filter((m) => !isStoredManifestReference(m));
     const manifestIds = manifests.map((m) => KubernetesManifestService.manifestIdentifier(m)).sort();
     if (prevState.manifestIds.join('') !== manifestIds.join('')) {
       this.unsubscribeAll();
@@ -71,6 +79,16 @@ export class DeployStatus extends React.Component<IExecutionDetailsSectionProps,
     this.state.subscriptions.forEach(({ unsubscribe }) => unsubscribe());
   }
 
+  // Manifests the artifact-store entity storage feature replaced with a reference instead
+  // of expanding them before deck saw them. We can't determine their kind/name/namespace
+  // (and so can't subscribe to live status for them) without fetching the content, so we
+  // let the user load them on demand instead, same as a baked manifest's YAML.
+  private get storedManifestRefs(): IStoredManifestReference[] {
+    return get(this.props.stage, ['context', 'outputs.manifests'], [])
+      .filter((m: unknown) => !!m)
+      .filter(isStoredManifestReference);
+  }
+
   private stageManifestToIManifest(manifest: IStageManifest, account: string): IManifest {
     return {
       name: get(manifest, 'metadata.name', ''),
@@ -113,6 +131,23 @@ export class DeployStatus extends React.Component<IExecutionDetailsSectionProps,
               </div>
             </div>
           )}
+          {!!this.storedManifestRefs.length && (
+            <div className="row">
+              <div className="col-md-12">
+                <div className="well alert alert-info">
+                  {this.storedManifestRefs.map((ref, i) => (
+                    <div key={i}>
+                      <ManifestYaml
+                        linkName="Load Manifest Details"
+                        modalTitle="Manifest"
+                        manifestUri={ref.reference.replace(/^ref?:\/\//, '')}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
         </ExecutionDetailsSection>
       </div>
     );