Minor fixes for secrets modal (Issue #394)

tektoncd · Aug 6, 2019 · cb32ffa · cb32ffa
1 parent 0c7fa46
commit cb32ffa
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 7 deletions.
diff --git a/src/components/SecretsModal/Annotations.js b/src/components/SecretsModal/Annotations.js
@@ -45,7 +45,7 @@ const Annotations = props => {
           labelText=""
           aria-label={`Annotation Value#${index}. This is the url for the given Tekton resource.`}
           value={annotation.value}
-          placeholder="https://domain.com"
+          placeholder={annotation.placeholder}
           onChange={handleChange}
           invalid={invalidFields.indexOf(`annotation-value${index}`) > -1}
           autoComplete="off"

diff --git a/src/components/SecretsModal/BasicAuthFields.js b/src/components/SecretsModal/BasicAuthFields.js
@@ -31,9 +31,9 @@ const BasicAuthFields = props => {
       <TextInput
         id="username"
         autoComplete="off"
-        placeholder="[email protected]"
+        placeholder=""
         value={username}
-        labelText="Email:"
+        labelText="Username:"
         onChange={handleChangeTextInput}
         invalid={invalidFields.indexOf('username') > -1}
         invalidText="Required."

diff --git a/src/components/SecretsModal/BasicAuthFields.test.js b/src/components/SecretsModal/BasicAuthFields.test.js
@@ -106,7 +106,7 @@ it('BasicAuthFields renders with blank inputs', () => {
       <BasicAuthFields {...props} />
     </Provider>
   );
-  expect(getByLabelText(/Email/i)).toBeTruthy();
+  expect(getByLabelText(/Username/i)).toBeTruthy();
   expect(getByLabelText(/Password\/Token/i)).toBeTruthy();
   expect(getByLabelText(/Service Account/i)).toBeTruthy();
   expect(getAllByDisplayValue('').length).toEqual(2);
@@ -131,7 +131,7 @@ it('BasicAuthFields incorrect fields', () => {
     </Provider>
   );
 
-  const usernameInput = getByLabelText(/Email/i);
+  const usernameInput = getByLabelText(/Username/i);
   const passwordInput = getByLabelText(/Password\/Token/i);
   const serviceAccountInput = getByLabelText(/Service Account/i);
 

diff --git a/src/containers/SecretsModal/SecretsModal.js b/src/containers/SecretsModal/SecretsModal.js
@@ -27,7 +27,6 @@ function validateInputs(value, id) {
   if (trimmed === '') {
     return false;
   }
-
   if (id === 'name' || id === 'serviceAccount') {
     if (trimmed.length > 253) {
       return false;
@@ -55,6 +54,7 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
         {
           label: `tekton.dev/git-0`,
           value: '',
+          placeholder: 'https://github.com',
           id: Math.random()
             .toString(36)
             .substr(2, 9)
@@ -196,15 +196,19 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
       }
       const annotations = prevState.annotations.map(annotation => {
         let toSearch;
+        let toExampleText;
         if (stateValue === 'git') {
           toSearch = 'docker';
+          toExampleText = 'https://github.com';
         } else {
           toSearch = 'git';
+          toExampleText = 'https://index.docker.io/v1/';
         }
         return {
           label: annotation.label.split(toSearch).join(stateValue),
           value: annotation.value,
-          id: annotation.id
+          id: annotation.id,
+          placeholder: toExampleText
         };
       });
       return {
@@ -250,9 +254,16 @@ export /* istanbul ignore next */ class SecretsModal extends Component {
   handleAdd = () => {
     this.setState(prevState => {
       const { annotations, accessTo } = prevState;
+      let example;
+      if (accessTo === 'git') {
+        example = 'https://github.com';
+      } else {
+        example = 'https://index.docker.io/v1/';
+      }
       annotations.push({
         label: `tekton.dev/${accessTo}-${annotations.length}`,
         value: '',
+        placeholder: example,
         id: Math.random()
           .toString(36)
           .substr(2, 9)

diff --git a/src/containers/SecretsModal/SecretsModalAnnotationText.test.js b/src/containers/SecretsModal/SecretsModalAnnotationText.test.js
@@ -0,0 +1,122 @@
+/*
+Copyright 2019 The Tekton Authors
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { fireEvent, render, waitForElement } from 'react-testing-library';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import SecretsModal from '.';
+
+const middleware = [thunk];
+const mockStore = configureStore(middleware);
+
+const secrets = {
+  byNamespace: {},
+  errorMessage: null,
+  isFetching: false
+};
+
+const namespaces = {
+  byName: {
+    default: {
+      metadata: {
+        name: 'default',
+        selfLink: '/api/v1/namespaces/default',
+        uid: '32b35d3b-6ce1-11e9-af21-025000000001',
+        resourceVersion: '4',
+        creationTimestamp: '2019-05-02T13:50:08Z'
+      }
+    }
+  },
+  errorMessage: null,
+  isFetching: false,
+  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': {
+    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({
+  secrets,
+  namespaces,
+  serviceAccounts: {
+    byId: serviceAccountsById,
+    byNamespace: serviceAccountsByNamespace,
+    isFetching: false
+  }
+});
+
+it('Test SecretsModal Server URL examples', async () => {
+  const handleNew = jest.fn();
+  const props = {
+    open: true,
+    handleNew
+  };
+
+  const { getByLabelText, getByText } = render(
+    <Provider store={store}>
+      <SecretsModal {...props} />
+    </Provider>
+  );
+  let annotationValue0 = getByLabelText(/Annotation Value#0/i);
+  expect(annotationValue0.placeholder).toEqual('https://github.com');
+  fireEvent.click(await waitForElement(() => getByText(/Git Server/i)));
+  fireEvent.click(await waitForElement(() => getByText(/Docker Registry/i)));
+
+  annotationValue0 = getByLabelText(/Annotation Value#0/i);
+  expect(annotationValue0.placeholder).toEqual('https://index.docker.io/v1/');
+
+  fireEvent.click(document.getElementsByClassName('addIcon').item(0));
+  let annotationValue1 = getByLabelText(/Annotation Value#1/i);
+  expect(annotationValue1.placeholder).toEqual('https://index.docker.io/v1/');
+
+  fireEvent.click(await waitForElement(() => getByText(/Docker Registry/i)));
+  fireEvent.click(await waitForElement(() => getByText(/Git Server/i)));
+
+  annotationValue0 = getByLabelText(/Annotation Value#0/i);
+  expect(annotationValue0.placeholder).toEqual('https://github.com');
+  annotationValue1 = getByLabelText(/Annotation Value#1/i);
+  expect(annotationValue1.placeholder).toEqual('https://github.com');
+});