refactor(kubernetes): namespace selector component (#7012)

create a namespace selector component which can be reused. optional
creatable functionality to support cases where SpEL is allowable.

app/scripts/modules/kubernetes/src/v2/pipelines/stages/deployManifest/ManifestDeploymentOptions.tsx

@@ -1,12 +1,13 @@
 import * as DOMPurify from 'dompurify';
 import * as React from 'react';
-import { cloneDeep, find, get, map, set, split } from 'lodash';
+import { cloneDeep, map, set, split } from 'lodash';
 import Select, { Option } from 'react-select';
 
 import { IAccountDetails, IDeploymentStrategy, StageConfigField } from '@spinnaker/core';
 
 import { ManifestKindSearchService } from 'kubernetes/v2/manifest/ManifestKindSearch';
 import { rolloutStrategies } from 'kubernetes/v2/rolloutStrategy';
+import { NamespaceSelector } from './NamespaceSelector';
 
 export interface ITrafficManagementConfig {
   enabled: boolean;
@@ -66,13 +67,6 @@ export class ManifestDeploymentOptions extends React.Component<
     });
   };
 
-  private getNamespaceOptions = (): Array<Option<string>> => {
-    const { accounts, selectedAccount } = this.props;
-    const selectedAccountDetails = find(accounts, a => a.name === selectedAccount);
-    const namespaces = get(selectedAccountDetails, 'namespaces', []);
-    return map(namespaces, n => ({ label: n, value: n }));
-  };
-
   private strategyOptionRenderer = (option: IDeploymentStrategy) => {
     return (
       <div className="body-regular">
@@ -125,11 +119,11 @@ export class ManifestDeploymentOptions extends React.Component<
         {config.enabled && (
           <>
             <StageConfigField fieldColumns={8} label="Service(s) Namespace">
-              <Select
-                clearable={false}
-                onChange={(option: Option<string>) => this.onConfigChange('options.namespace', option.value)}
-                options={this.getNamespaceOptions()}
-                value={config.options.namespace}
+              <NamespaceSelector
+                onChange={(namespace: string): void => this.onConfigChange('options.namespace', namespace)}
+                accounts={this.props.accounts}
+                selectedAccount={this.props.selectedAccount}
+                selectedNamespace={config.options.namespace}
               />
             </StageConfigField>
             <StageConfigField fieldColumns={8} label="Service(s)">

app/scripts/modules/kubernetes/src/v2/pipelines/stages/deployManifest/NamespaceSelector.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Select, { Creatable, Option } from 'react-select';
+import { get, find, map } from 'lodash';
+import { IAccountDetails } from '@spinnaker/core';
+
+export interface INamespaceSelectorProps {
+  onChange: (namespace: string) => void;
+  accounts: IAccountDetails[];
+  selectedAccount: string;
+  selectedNamespace: string;
+  createable?: boolean;
+}
+
+export class NamespaceSelector extends React.Component<INamespaceSelectorProps> {
+  public defaultProps = { createable: false };
+
+  private getNamespaceOptions(): Array<Option<string>> {
+    const { accounts, selectedAccount, selectedNamespace } = this.props;
+    const selectedAccountDetails = find(accounts, a => a.name === selectedAccount);
+    const namespaces = get(selectedAccountDetails, 'namespaces', []);
+    const options = map(namespaces, n => ({ label: n, value: n }));
+    // only create a value for selectedNamespace if it contains a SPeL expression
+    if (this.props.createable && selectedNamespace.includes('${')) {
+      options.push({ label: selectedNamespace, value: selectedNamespace });
+    }
+    return options;
+  }
+
+  public render() {
+    const componentProps = {
+      clearable: false,
+      options: this.getNamespaceOptions(),
+      value: this.props.selectedNamespace,
+      onChange: (option: Option) => this.props.onChange(option.value.toString()),
+    };
+    return this.props.createable ? <Creatable {...componentProps} /> : <Select {...componentProps} />;
+  }
+}