Create secrets panel is too short (hard to select last SA)

jessm12 · Aug 12, 2019 · 3925ea7 · 3925ea7
1 parent b0eec12
commit 3925ea7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 48 deletions.
diff --git a/src/components/SecretsModal/BasicAuthFields.js b/src/components/SecretsModal/BasicAuthFields.js
@@ -12,9 +12,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import { TextInput } from 'carbon-components-react';
+import { Select, SelectItem, TextInput } from 'carbon-components-react';
 import './SecretsModal.scss';
-import ServiceAccountsDropdown from '../../containers/ServiceAccountsDropdown';
 
 const BasicAuthFields = props => {
   const {
@@ -24,8 +23,19 @@ const BasicAuthFields = props => {
     handleChangeTextInput,
     handleChangeServiceAccount,
     invalidFields,
-    serviceAccount
+    serviceAccounts
   } = props;
+
+  const saItems = serviceAccounts
+    .filter(sa => sa.metadata.namespace === namespace)
+    .map(sa => (
+      <SelectItem
+        value={sa.metadata.name}
+        text={sa.metadata.name}
+        key={`${sa.metadata.namespace}:${sa.metadata.name}`}
+      />
+    ));
+
   return (
     <>
       <TextInput
@@ -49,17 +59,20 @@ const BasicAuthFields = props => {
         invalid={invalidFields.indexOf('password') > -1}
         invalidText="Required."
       />
-      <ServiceAccountsDropdown
+      <Select
         id="serviceAccount"
-        titleText="Service Account"
-        namespace={namespace}
-        selectedItem={
-          serviceAccount ? { id: serviceAccount, text: serviceAccount } : ''
-        }
+        light
+        hidden
+        defaultValue="main"
         onChange={handleChangeServiceAccount}
+        labelText="Service Account"
         invalid={invalidFields.indexOf('serviceAccount') > -1}
         invalidText="Required."
-      />
+        disabled={namespace === ''}
+      >
+        <SelectItem disabled value="main" text="Select Service account" />
+        {saItems}
+      </Select>
     </>
   );
 };

diff --git a/src/components/SecretsModal/BasicAuthFields.test.js b/src/components/SecretsModal/BasicAuthFields.test.js
@@ -16,7 +16,6 @@ import { render } from 'react-testing-library';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import * as API from '../../api';
 import BasicAuthFields from './BasicAuthFields';
 
 const middleware = [thunk];
@@ -45,47 +44,32 @@ const namespaces = {
   selected: 'default'
 };
 
-const serviceAccountsByNamespace = {
-  blue: {
-    'service-account-1': 'id-service-account-1',
-    'service-account-2': 'id-service-account-2'
-  },
-  green: {
-    'service-account-3': 'id-service-account-3'
-  }
-};
-
-const serviceAccountsById = {
-  'id-service-account-1': {
+const serviceAccounts = [
+  {
     metadata: {
       name: 'service-account-1',
       namespace: 'blue',
       uid: 'id-service-account-1'
     }
   },
-  'id-service-account-2': {
+  {
     metadata: {
       name: 'service-account-2',
       namespace: 'blue',
       uid: 'id-service-account-2'
     }
   },
-  'id-service-account-3': {
+  {
     metadata: {
       name: 'service-account-3',
       namespace: 'green',
       uid: 'id-service-account-3'
     }
   }
-};
+];
 
 const store = mockStore({
-  namespaces,
-  serviceAccounts: {
-    byId: serviceAccountsById,
-    byNamespace: serviceAccountsByNamespace,
-    isFetching: false
-  }
+  namespaces
 });
 
 it('BasicAuthFields renders with blank inputs', () => {
@@ -94,13 +78,10 @@ it('BasicAuthFields renders with blank inputs', () => {
     password: '',
     serviceAccount: '',
     handleChange() {},
-    invalidFields: []
+    invalidFields: [],
+    serviceAccounts
   };
 
-  jest
-    .spyOn(API, 'getServiceAccounts')
-    .mockImplementation(() => serviceAccountsById);
-
   const { getByLabelText, getAllByDisplayValue } = render(
     <Provider store={store}>
       <BasicAuthFields {...props} />
@@ -118,13 +99,10 @@ it('BasicAuthFields incorrect fields', () => {
     password: 'text',
     serviceAccount: '',
     handleChange() {},
-    invalidFields: ['username', 'password']
+    invalidFields: ['username', 'password'],
+    serviceAccounts
   };
 
-  jest
-    .spyOn(API, 'getServiceAccounts')
-    .mockImplementation(() => serviceAccountsById);
-
   const { getByLabelText } = render(
     <Provider store={store}>
       <BasicAuthFields {...props} />

diff --git a/src/components/SecretsModal/SecretsModal.scss b/src/components/SecretsModal/SecretsModal.scss
@@ -24,10 +24,16 @@ limitations under the License.
   }
 
   .bx--text-input__field-wrapper,
-  .bx--form__helper-text {
+  .bx--form__helper-text,
+  .bx--select,
+  .bx--select-input {
     min-width: 100%;
   }
 
+  .bx--select svg{
+    display: none;
+  }
+
   .bx--dropdown {
     background-color: $ui-background;
   }

diff --git a/src/containers/SecretsModal/SecretsModal.js b/src/containers/SecretsModal/SecretsModal.js
@@ -19,6 +19,8 @@ import Annotations from '../../components/SecretsModal/Annotations';
 import BasicAuthFields from '../../components/SecretsModal/BasicAuthFields';
 import '../../components/SecretsModal/SecretsModal.scss';
 import { createSecret } from '../../actions/secrets';
+import { getServiceAccounts } from '../../reducers';
+import { fetchServiceAccounts } from '../../actions/serviceAccounts';
 
 /* istanbul ignore next */
 function validateInputs(value, id) {
@@ -64,6 +66,10 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
     };
   }
 
+  componentDidMount() {
+    this.props.fetchServiceAccounts();
+  }
+
   handleSubmit = () => {
     const invalidFields = [];
     const postData = { type: 'userpass' };
@@ -149,7 +155,7 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
 
   handleChangeServiceAccount = e => {
     const stateVar = 'serviceAccount';
-    const stateValue = e.selectedItem.text;
+    const stateValue = e.target.value;
     this.setState(prevState => {
       const newInvalidFields = prevState.invalidFields;
       const idIndex = newInvalidFields.indexOf(stateVar);
@@ -283,7 +289,7 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
   };
 
   render() {
-    const { open, handleNew } = this.props;
+    const { open, handleNew, serviceAccounts } = this.props;
     const {
       name,
       namespace,
@@ -320,6 +326,7 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
             username={username}
             password={password}
             serviceAccount={serviceAccount}
+            serviceAccounts={serviceAccounts}
             namespace={namespace}
             handleChangeTextInput={this.handleChangeTextInput}
             handleChangeServiceAccount={this.handleChangeServiceAccount}
@@ -342,12 +349,15 @@ SecretsModal.defaultProps = {
   open: false
 };
 
-function mapStateToProps() {
-  return {};
+function mapStateToProps(state) {
+  return {
+    serviceAccounts: getServiceAccounts(state)
+  };
 }
 
 const mapDispatchToProps = {
-  createSecret
+  createSecret,
+  fetchServiceAccounts
 };
 
 export default connect(