feat(kubernetes): add label mode to manifest selector component to en…

…able dynamic target selection in delete manifest stage (spinnaker#6628)

app/scripts/modules/kubernetes/src/v2/kubernetes.v2.module.ts

@@ -32,7 +32,6 @@ import { KUBERNETES_MANIFEST_LABELS } from './manifest/manifestLabels.component'
 import { KUBERNETES_MANIFEST_EVENTS } from './manifest/manifestEvents.component';
 import { KUBERNETES_MANIFEST_RESOURCES } from './manifest/manifestResources.component';
 import { KUBERNETES_MANIFEST_QOS } from './manifest/manifestQos.component';
-import { KUBERNETES_MULTI_MANIFEST_SELECTOR } from './manifest/selector/multiSelector.component';
 import { KUBERNETES_V2_LOAD_BALANCER_TRANSFORMER } from './loadBalancer/transformer';
 import { KUBERNETES_V2_SECURITY_GROUP_TRANSFORMER } from './securityGroup/transformer';
 import { KUBERNETES_ANNOTATION_CUSTOM_SECTIONS } from './manifest/annotationCustomSections.component';
@@ -85,7 +84,6 @@ module(KUBERNETES_V2_MODULE, [
   KUBERNETES_UNDO_ROLLOUT_MANIFEST_STAGE,
   KUBERNETES_FIND_ARTIFACTS_FROM_RESOURCE_STAGE,
   KUBERNETES_MANIFEST_SELECTOR,
-  KUBERNETES_MULTI_MANIFEST_SELECTOR,
   KUBERNETES_MANIFEST_LABELS,
   KUBERNETES_MANIFEST_EVENTS,
   KUBERNETES_MANIFEST_RESOURCES,

app/scripts/modules/kubernetes/src/v2/manifest/selector/IManifestSelector.ts

@@ -6,17 +6,59 @@ export interface IMultiManifestSelector extends IManifestSelector {
 }
 
 export interface IManifestSelector {
-  manifestName?: string;
-  kind?: string;
-  location: string;
   account: string;
+  app?: string;
   cluster?: string;
   criteria?: string;
+  kind?: string;
+  kinds?: string[];
+  labelSelectors?: IManifestLabelSelectors;
+  location: string;
+  manifestName?: string;
   mode?: SelectorMode;
-  app?: string;
 }
 
 export enum SelectorMode {
   Static = 'static',
-  Dynamic = 'dynamic', // TODO(dpeach): add 'Label' mode.
+  Dynamic = 'dynamic',
+  Label = 'label',
 }
+
+interface ISelectorModeData {
+  label: string;
+  selectorDefaults: Partial<IManifestSelector>;
+}
+
+export const SelectorModeDataMap: { [key in SelectorMode]: ISelectorModeData } = {
+  [SelectorMode.Static]: {
+    label: 'Choose a static target',
+    selectorDefaults: {
+      cluster: null,
+      criteria: null,
+      kind: null,
+      kinds: null,
+      labelSelectors: null,
+    },
+  },
+  [SelectorMode.Dynamic]: {
+    label: 'Choose a target dynamically',
+    selectorDefaults: {
+      kinds: null,
+      labelSelectors: null,
+      manifestName: null,
+    },
+  },
+  [SelectorMode.Label]: {
+    label: 'Match target(s) by label',
+    selectorDefaults: {
+      cluster: null,
+      criteria: null,
+      kind: null,
+      kinds: [],
+      labelSelectors: {
+        selectors: [],
+      },
+      manifestName: null,
+    },
+  },
+};

app/scripts/modules/kubernetes/src/v2/manifest/selector/ManifestSelector.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
-import { Creatable, Option } from 'react-select';
+import Select, { Creatable, Option } from 'react-select';
 import { $q } from 'ngimport';
 import Spy = jasmine.Spy;
 
@@ -15,6 +15,8 @@ import {
 import { ManifestKindSearchService } from 'kubernetes/v2/manifest/ManifestKindSearch';
 import { ManifestSelector, IManifestSelectorState } from 'kubernetes/v2/manifest/selector/ManifestSelector';
 import { SelectorMode } from 'kubernetes/v2/manifest/selector/IManifestSelector';
+import LabelEditor from 'kubernetes/v2/manifest/selector/labelEditor/LabelEditor';
+import { IManifestLabelSelector } from 'kubernetes/v2/manifest/selector/IManifestLabelSelector';
 
 describe('<ManifestSelector />', () => {
   let searchService: Spy;
@@ -67,6 +69,43 @@ describe('<ManifestSelector />', () => {
       expect((name.props().value as Option).value).toEqual('my-config-map');
     });
 
+    it('renders kinds from input props', () => {
+      const wrapper = component({
+        account: 'my-account',
+        kinds: ['configMap', 'deployment'],
+        location: 'default',
+        mode: SelectorMode.Label,
+      });
+
+      const kinds = wrapper
+        .find({ label: 'Kinds' })
+        .find(Select)
+        .first();
+      expect(kinds.props().value).toEqual(['configMap', 'deployment']);
+    });
+
+    it('renders labels from input props', () => {
+      const labelSelectors: IManifestLabelSelector[] = [
+        {
+          key: 'label-key',
+          kind: 'EQUALS',
+          values: ['label-value'],
+        },
+      ];
+      const wrapper = component({
+        account: 'my-account',
+        kinds: ['configMap', 'deployment'],
+        labelSelectors: {
+          selectors: labelSelectors,
+        },
+        location: 'default',
+        mode: SelectorMode.Label,
+      });
+
+      const labelEditor = wrapper.find(LabelEditor);
+      expect(labelEditor.prop('labelSelectors')).toEqual(labelSelectors);
+    });
+
     describe('cluster dropdown', () => {
       const buildPropsWithApplicationData = (data: any[]) => ({
         modes: [SelectorMode.Static, SelectorMode.Dynamic],
@@ -319,6 +358,26 @@ describe('<ManifestSelector />', () => {
       expect(wrapper.state().selector.kind).toEqual('configMap');
     });
 
+    it('handles kind during static -> label mode transition', () => {
+      const wrapper = component(
+        {
+          manifestName: 'configMap my-config-map',
+          account: 'my-account',
+          location: 'default',
+        },
+        { modes: [SelectorMode.Dynamic, SelectorMode.Static, SelectorMode.Label] },
+      );
+
+      wrapper
+        .find({ id: 'label' })
+        .first()
+        .props()
+        .onChange();
+      expect(wrapper.state().selector.kind).toBeNull();
+      expect(wrapper.state().selector.kinds).toEqual([]);
+      expect(wrapper.state().selector.manifestName).toBeNull();
+    });
+
     it('handles kind during dynamic -> static mode transition', () => {
       const wrapper = component(
         {
@@ -338,6 +397,73 @@ describe('<ManifestSelector />', () => {
       // `manifestName` is composed of `${kind} ${resourceName}`
       expect(wrapper.state().selector.manifestName).toEqual('configMap');
     });
+
+    it('handles kind during dynamic -> label mode transition', () => {
+      const wrapper = component(
+        {
+          account: 'my-account',
+          location: 'default',
+          kind: 'configMap',
+          mode: SelectorMode.Dynamic,
+        },
+        { modes: [SelectorMode.Dynamic, SelectorMode.Static, SelectorMode.Label] },
+      );
+
+      wrapper
+        .find({ id: 'label' })
+        .first()
+        .props()
+        .onChange();
+      expect(wrapper.state().selector.kind).toBeNull();
+      expect(wrapper.state().selector.kinds).toEqual([]);
+      expect(wrapper.state().selector.manifestName).toBeNull();
+    });
+
+    it('handles kind during label -> static mode transition', () => {
+      const wrapper = component(
+        {
+          account: 'my-account',
+          location: 'default',
+          kinds: ['configMap'],
+          labelSelectors: {
+            selectors: [],
+          },
+          mode: SelectorMode.Label,
+        },
+        { modes: [SelectorMode.Dynamic, SelectorMode.Static, SelectorMode.Label] },
+      );
+
+      wrapper
+        .find({ id: 'static' })
+        .first()
+        .props()
+        .onChange();
+      expect(wrapper.state().selector.kind).toBeNull();
+      expect(wrapper.state().selector.kinds).toBeNull();
+    });
+
+    it('handles kind during label -> dynamic mode transition', () => {
+      const wrapper = component(
+        {
+          account: 'my-account',
+          location: 'default',
+          kinds: ['configMap'],
+          labelSelectors: {
+            selectors: [],
+          },
+          mode: SelectorMode.Label,
+        },
+        { modes: [SelectorMode.Dynamic, SelectorMode.Static, SelectorMode.Label] },
+      );
+
+      wrapper
+        .find({ id: 'dynamic' })
+        .first()
+        .props()
+        .onChange();
+      expect(wrapper.state().selector.kind).toBeNull();
+      expect(wrapper.state().selector.kinds).toBeNull();
+    });
   });
 });