refactor

mia-platform · Oct 13, 2021 · 5f63dad · 5f63dad
1 parent f6a7d01
commit 5f63dad
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/packages/api-explorer/src/AuthBox.jsx b/packages/api-explorer/src/AuthBox.jsx
@@ -7,6 +7,9 @@ import uniq from 'lodash.uniq'
 
 import AuthForm from './components/AuthForm';
 
+const UNLOCK = 'unlock'
+const LOCK = 'lock'
+
 function filterSecurityScheme(security, securitySchemes) {
   const securities = uniq(flatten(security.map(elem => Object.keys(elem))))
   const newSecurityScheme = {}
@@ -33,7 +36,7 @@ class AuthBox extends Component {
 
     return (
       <Icon
-        type={open ? 'unlock' : 'lock'}
+        type={open ? UNLOCK : LOCK}
         onClick={toggle}
       />
     )
@@ -42,19 +45,8 @@ class AuthBox extends Component {
   renderAuthAlert() {
     const { needsAuth } = this.props
 
-    const message = (
-      <FormattedMessage
-        id='warning'
-        defaultMessage='Warning'
-      />
-    )
-
-    const description = (
-      <FormattedMessage
-        id='api.auth.required'
-        defaultMessage='Authentication is required for this endpoint'
-      />
-    )
+    const message = <FormattedMessage id='warning' defaultMessage='Warning' />
+    const description = <FormattedMessage id='api.auth.required' defaultMessage='Authentication is required for this endpoint' />
 
     return( needsAuth ?
       <Alert
@@ -126,7 +118,7 @@ class AuthBox extends Component {
         style={{padding: 0}}
         trigger={'click'}
         visible={this.props.open}
-        onVisibleChange={visibility => onVisibleChange(visibility)}
+        onVisibleChange={onVisibleChange}
       >
         {this.renderIconLock()}
       </Popover>

diff --git a/packages/api-explorer/src/security-input-types/ApiKey.jsx b/packages/api-explorer/src/security-input-types/ApiKey.jsx
@@ -3,11 +3,17 @@ const PropTypes = require('prop-types');
 
 const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1);
 
+const styles = {
+  label: {
+    padding: 0
+  }
+}
+
 function ApiKey({ apiKey, scheme, authInputRef, change, Input }) {
   return (
     <div>
       <div>
-        <label htmlFor="apiKey" style={{padding: 0}}>{capitalize(scheme.name)}</label> 
+        <label htmlFor="apiKey" style={styles.label}>{capitalize(scheme.name)}</label> 
       </div>
       <div>
         <Input

diff --git a/packages/api-explorer/src/security-input-types/Basic.jsx b/packages/api-explorer/src/security-input-types/Basic.jsx
@@ -3,6 +3,12 @@ import {FormattedMessage} from 'react-intl';
 
 const PropTypes = require('prop-types');
 
+const styles = {
+  label: {
+    padding: 0
+  }
+}
+
 function Basic({ user, pass, change, authInputRef, Input }) {
   function inputChange(name, value) {
     change(Object.assign({ user, pass }, { [name]: value }));
@@ -12,7 +18,7 @@ function Basic({ user, pass, change, authInputRef, Input }) {
   return (
     <div className="row">
       <div className="col-xs-6">
-        <label htmlFor="user" style={{padding: 0}}>
+        <label htmlFor="user" style={styles.label}>
           <FormattedMessage id="auth.basic.username" defaultMessage="Username" />
         </label>
         <Input
@@ -24,7 +30,7 @@ function Basic({ user, pass, change, authInputRef, Input }) {
         />
       </div>
       <div className="col-xs-6">
-        <label htmlFor="password" style={{padding: 0}}>
+        <label htmlFor="password" style={styles.label}>
           <FormattedMessage id="auth.basic.password" defaultMessage="Password" />
         </label>
         <Input

diff --git a/packages/api-explorer/src/security-input-types/Oauth2.jsx b/packages/api-explorer/src/security-input-types/Oauth2.jsx
@@ -4,6 +4,12 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const oauthHref = require('../lib/oauth-href');
 
+const styles = {
+  label: {
+    padding: 0
+  }
+}
+
 function Oauth2({ apiKey, authInputRef, oauth, change, Input }) {
   if (!apiKey && oauth) {
     return (
@@ -21,7 +27,7 @@ function Oauth2({ apiKey, authInputRef, oauth, change, Input }) {
     <section>
       <div>
         <div>
-          <label htmlFor="apiKey" style={{padding: 0}}>
+          <label htmlFor="apiKey" style={styles.label}>
             <FormattedMessage id="auth.oauth2.authorization" defaultMessage="Authorization" />
           </label>
         </div>