comments #1

Author: jhadvig

frontend/public/components/_secret.scss

@@ -1,29 +1,31 @@
-.btn-file {
-  position: relative;
-  overflow: hidden;
-}
+.co-create-secret-form {
+  .btn-file {
+    position: relative;
+    overflow: hidden;
+  }
 
-.btn-file input[type=file] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
-  text-align: right;
-  filter: alpha(opacity=0);
-  opacity: 0;
-  outline: none;
-  background: white;
-  cursor: inherit;
-  display: block;
-}
+  .btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    outline: none;
+    background: white;
+    cursor: inherit;
+    display: block;
+  }
 
-.form-textarea {
-  min-height: 300px;
-  width: 100%;
-}
+  .form-textarea {
+    min-height: 300px;
+    width: 100%;
+  }
 
-.create-secret-form .help-block {
-  margin-bottom: 10px;
+  .help-block {
+    margin-bottom: 10px;
+  }
 }

frontend/public/components/secrets/create-secret.tsx

@@ -22,14 +22,15 @@ export enum SecretType {
 }
 
 const secretFormExplanation = {
-  source: 'Source secrets allow you to authenticate against the SCM server.',
-  webhook: 'Webhook secrets allow you to authenticate a webhook trigger.',
+  [SecretTypeAbstraction.source]: 'Source secrets allow you to authenticate against the SCM server.',
+  [SecretTypeAbstraction.webhook]: 'Webhook secrets allow you to authenticate a webhook trigger.',
 };
 
-const determineDefaultSecretType = (typeAbstraction) => {
-  return typeAbstraction === 'source' ? SecretType.basicAuth : SecretType.opaque;
+const determineDefaultSecretType = (typeAbstraction: SecretTypeAbstraction) => {
+  return typeAbstraction === SecretTypeAbstraction.source ? SecretType.basicAuth : SecretType.opaque;
 };
 
+
 const determineSecretTypeAbstraction = (data) => {
   return _.has(data, WebHookSecretKey) ? SecretTypeAbstraction.webhook : SecretTypeAbstraction.source;
 };
@@ -40,12 +41,11 @@ const generateSecret = () => {
   return s4() + s4() + s4() + s4();
 };
 
-// withSecretForm returns SubformComponent which is a Higher Order Component for all the types of secret forms.
-const withSecretForm = (SubformComponent) => class SecretFormComponent extends React.Component<BaseEditSecretProps_, BaseEditSecretState_> {
+// withSecretForm returns SubForm which is a Higher Order Component for all the types of secret forms.
+const withSecretForm = (SubForm) => class SecretFormComponent extends React.Component<BaseEditSecretProps_, BaseEditSecretState_> {
   constructor (props) {
     super(props);
-    const inputObj = _.get(props.obj, 'data');
-    const existingSecret = _.pick(inputObj, ['metadata', 'type']);
+    const existingSecret = _.pick(props.obj, ['metadata', 'type']);
     const defaultSecretType = determineDefaultSecretType(this.props.secretTypeAbstraction);
     const secret = _.defaultsDeep({}, props.fixed, existingSecret, {
       apiVersion: 'v1',
@@ -62,7 +62,7 @@ const withSecretForm = (SubformComponent) => class SecretFormComponent extends R
       secret: secret,
       inProgress: false,
       type: defaultSecretType,
-      stringData: _.mapValues(_.get(inputObj, 'data'), window.atob),
+      stringData: _.mapValues(_.get(props.obj, 'data'), window.atob),
     };
     this.onDataChanged = this.onDataChanged.bind(this);
     this.onNameChanged = this.onNameChanged.bind(this);
@@ -71,7 +71,7 @@ const withSecretForm = (SubformComponent) => class SecretFormComponent extends R
   onDataChanged (secretsData) {
     this.setState({
       stringData: {...secretsData.stringData},
-      type: secretsData.authenticationType,
+      type: secretsData.type,
     });
   }
   onNameChanged (event) {
@@ -100,7 +100,7 @@ const withSecretForm = (SubformComponent) => class SecretFormComponent extends R
       <Helmet>
         <title>{title}</title>
       </Helmet>
-      <form className="co-m-pane__body-group create-secret-form" onSubmit={this.save}>
+      <form className="co-m-pane__body-group co-create-secret-form" onSubmit={this.save}>
         <h1 className="co-m-pane__heading">{title}</h1>
         <p className="co-m-pane__explanation">{this.props.explanation}</p>
 
@@ -119,7 +119,7 @@ const withSecretForm = (SubformComponent) => class SecretFormComponent extends R
             </div>
           </div>
         </fieldset>
-        <SubformComponent
+        <SubForm
           onChange={this.onDataChanged.bind(this)}
           stringData={this.state.stringData}
           secretType={this.state.secret.type}
@@ -178,14 +178,15 @@ class SourceSecretForm extends React.Component<SourceSecretFormProps, SourceSecr
   constructor (props) {
     super(props);
     this.state = {
-      authenticationType: this.props.secretType,
+      type: this.props.secretType,
       stringData: this.props.stringData || {},
     };
     this.changeAuthenticationType = this.changeAuthenticationType.bind(this);
+    this.onDataChanged = this.onDataChanged.bind(this);
   }
   changeAuthenticationType(event) {
     this.setState({
-      authenticationType: event.target.value
+      type: event.target.value
     }, () => this.props.onChange(this.state));
   }
   onDataChanged (secretsData) {
@@ -197,26 +198,26 @@ class SourceSecretForm extends React.Component<SourceSecretFormProps, SourceSecr
     return <React.Fragment>
       {this.props.isCreate
         ? <div className="form-group">
-          <label className="control-label">Authentication Type</label>
-          <div className="modal-body__field">
-            <select onChange={this.changeAuthenticationType} value={this.state.authenticationType} className="form-control">
-              <option key="kubernetes.io/basic-auth" value="kubernetes.io/basic-auth">Basic Authentication</option>
-              <option key="kubernetes.io/ssh-auth" value="kubernetes.io/ssh-auth">SSH Key</option>
+          <label className="control-label" htmlFor="secret-type" >Authentication Type</label>
+          <div>
+            <select onChange={this.changeAuthenticationType} value={this.state.type} className="form-control" id="secret-type">
+              <option value="kubernetes.io/basic-auth">Basic Authentication</option>
+              <option value="kubernetes.io/ssh-auth">SSH Key</option>
             </select>
           </div>
         </div>
         : null
       }
-      { this.state.authenticationType === 'kubernetes.io/basic-auth'
-        ? <BasicAuthSubform onChange={this.onDataChanged.bind(this)} stringData={this.state.stringData}/>
-        : <SSHAuthSubform onChange={this.onDataChanged.bind(this)} stringData={this.state.stringData}/>
+      { this.state.type === 'kubernetes.io/basic-auth'
+        ? <BasicAuthSubform onChange={this.onDataChanged} stringData={this.state.stringData} />
+        : <SSHAuthSubform onChange={this.onDataChanged} stringData={this.state.stringData} />
       }
     </React.Fragment>;
   }
 }
 
 const secretFormFactory = secretType => {
-  return secretType === 'webhook' ? withSecretForm(WebHookSecretForm) : withSecretForm(SourceSecretForm);
+  return secretType === SecretTypeAbstraction.webhook ? withSecretForm(WebHookSecretForm) : withSecretForm(SourceSecretForm);
 };
 
 class BasicAuthSubform extends React.Component<BasicAuthSubformProps, BasicAuthSubformState> {
@@ -237,7 +238,7 @@ class BasicAuthSubform extends React.Component<BasicAuthSubformProps, BasicAuthS
     return <React.Fragment>
       <div className="form-group">
         <label className="control-label" htmlFor="username">Username</label>
-        <div className="modal-body__field">
+        <div>
           <input className="form-control"
             id="username"
             aria-describedby="username-help"
@@ -251,7 +252,7 @@ class BasicAuthSubform extends React.Component<BasicAuthSubformProps, BasicAuthS
       </div>
       <div className="form-group">
         <label className="control-label" htmlFor="password">Password or Token</label>
-        <div className="modal-body__field">
+        <div>
           <input className="form-control"
             id="password"
             aria-describedby="password-help"
@@ -274,6 +275,7 @@ class SSHAuthSubform extends React.Component<SSHAuthSubformProps, SSHAuthSubform
       'ssh-privatekey': this.props.stringData['ssh-privatekey'] || '',
     };
     this.changeData = this.changeData.bind(this);
+    this.onFileChange = this.onFileChange.bind(this);
   }
   changeData(event) {
     this.setState({
@@ -288,17 +290,17 @@ class SSHAuthSubform extends React.Component<SSHAuthSubformProps, SSHAuthSubform
   render() {
     return <div className="form-group">
       <label className="control-label" htmlFor="ssh-privatekey">SSH Private Key</label>
-      <div className="modal-body__field">
-        <FileInput onChange={this.onFileChange.bind(this)}/>
+      <div>
+        <FileInput onChange={this.onFileChange} />
         <p className="help-block">Upload your private SSH key file.</p>
         <textarea className="form-control form-textarea"
           id="ssh-privatekey"
           name="privateKey"
           onChange={this.changeData}
           value={this.state['ssh-privatekey']}
-          required>
-        </textarea>
-        <p className="help-block">Private SSH key file for Git authentication.</p>
+          aria-describedby="ssh-privatekey-help"
+          required />
+        <p className="help-block" id="ssh-privatekey-help">Private SSH key file for Git authentication.</p>
       </div>
     </div>;
   }
@@ -309,12 +311,11 @@ const SecretLoadingWrapper = props => {
   const SecretFormComponent = secretFormFactory(secretTypeAbstraction);
   const fixed = _.reduce(props.fixedKeys, (acc, k) => ({...acc, k: _.get(props.obj.data, k)}), {});
   return <StatusBox {...props.obj}>
-    <SecretFormComponent
+    <SecretFormComponent {...props}
       secretTypeAbstraction={secretTypeAbstraction}
       obj={props.obj.data}
       fixed={fixed}
       explanation={secretFormExplanation[secretTypeAbstraction]}
-      {...props}
     />
   </StatusBox>;
 };
@@ -338,7 +339,7 @@ export type BaseEditSecretState_ = {
   secretTypeAbstraction?: SecretTypeAbstraction,
   secret: K8sResourceKind,
   inProgress: boolean,
-  type: string,
+  type: SecretType,
   stringData: {[key: string]: string},
   error?: any,
 };
@@ -355,13 +356,17 @@ export type BaseEditSecretProps_ = {
 };
 
 export type SourceSecretFormState = {
-  authenticationType: SecretType,
-  stringData: {[key: string]: string},
+  type: SecretType,
+  stringData: {
+    [key: string]: string
+  },
 };
 
 export type SourceSecretFormProps = {
   onChange: Function;
-  stringData: {[key: string]: string},
+  stringData: {
+    [key: string]: string
+  },
   secretType: SecretType,
   isCreate: boolean,
 };
@@ -373,7 +378,9 @@ export type BasicAuthSubformState = {
 
 export type BasicAuthSubformProps = {
   onChange: Function,
-  stringData: {[key: string]: string},
+  stringData: {
+    [key: string]: string
+  },
 };
 
 export type SSHAuthSubformState = {
@@ -382,15 +389,21 @@ export type SSHAuthSubformState = {
 
 export type SSHAuthSubformProps = {
   onChange: Function;
-  stringData: {[key: string]: string},
+  stringData: {
+    [key: string]: string
+  },
 };
 
 export type WebHookSecretFormState = {
-  stringData: {[key: string]: string},
+  stringData: {
+    [key: string]: string
+  },
 };
 
 export type WebHookSecretFormProps = {
   onChange: Function;
-  stringData: {[WebHookSecretKey: string]: string},
+  stringData: {
+    WebHookSecretKey: string
+  },
 };
 /* eslint-enable no-undef */