fix(ui): add fixed TextArea from clockface

influxdata · Oct 29, 2019 · 6af5c6b · 6af5c6b
1 parent 2882463
commit 6af5c6b
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@
 1. [15559](https://github.com/influxdata/influxdb/pull/15559): Exiting a configuration of a dashboard cell now properly renders the cell content
 1. [15556](https://github.com/influxdata/influxdb/pull/15556): Creating a check now displays on the checklist
 1. [15592](https://github.com/influxdata/influxdb/pull/15592): Changed task runs success status code from 200 to 201 to match Swagger documentation.
+1. [15634](https://github.com/influxdata/influxdb/pull/15634): TextAreas have the correct height
 
 ## v2.0.0-alpha.18 [2019-09-26]
 

diff --git a/ui/cypress/e2e/labels.test.ts b/ui/cypress/e2e/labels.test.ts
@@ -107,19 +107,13 @@ describe('labels', () => {
       'contain',
       'Please enter a hexcode'
     )
-    cy.getByTestID('input-error').should($ie => {
-      expect($ie).to.have.class('alert-triangle')
-    })
 
     // Type nonsense string - color input
     cy.getByTestID('color-picker--input').type('zzzzzz')
     cy.getByTestID('form--element-error').should(
       'contain',
       'Please enter a hexcode'
     )
-    cy.getByTestID('input-error').should($ie => {
-      expect($ie).to.have.class('alert-triangle')
-    })
 
     // feel lucky
     cy.getByTestID('color-picker--randomize').click()

diff --git a/ui/cypress/e2e/onboarding.test.ts b/ui/cypress/e2e/onboarding.test.ts
@@ -216,8 +216,6 @@ describe('Onboarding', () => {
       'Passwords do not match'
     )
 
-    cy.getByTestID('input-error').should('have.class', 'alert-triangle')
-
     cy.getByTestID('input-field--orgname').type(user.org)
     cy.getByTestID('input-field--bucketname').type(user.bucket)
 

diff --git a/ui/package.json b/ui/package.json
@@ -124,7 +124,7 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "@influxdata/clockface": "1.0.2",
+    "@influxdata/clockface": "1.0.3",
     "@influxdata/flux-parser": "^0.3.0",
     "@influxdata/giraffe": "0.16.4",
     "@influxdata/influx": "0.5.5",

diff --git a/ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocolTabs.tsx b/ui/src/dataLoaders/components/lineProtocolWizard/configure/LineProtocolTabs.tsx
@@ -76,7 +76,8 @@ export class LineProtocolTabs extends PureComponent<Props, State> {
         <Grid>
           <Grid.Row>
             <Grid.Column
-              widthXS={Columns.Twelve}
+              widthXS={Columns.Ten}
+              offsetXS={Columns.One}
               widthMD={Columns.Ten}
               offsetMD={Columns.One}
               widthLG={Columns.Eight}

diff --git a/...ders/components/lineProtocolWizard/configure/__snapshots__/LineProtocolTabs.test.tsx.snap b/...ders/components/lineProtocolWizard/configure/__snapshots__/LineProtocolTabs.test.tsx.snap
@@ -17,9 +17,10 @@ exports[`LineProtocolTabs rendering renders! 1`] = `
       <GridColumn
         offsetLG={2}
         offsetMD={1}
+        offsetXS={1}
         widthLG={8}
         widthMD={10}
-        widthXS={12}
+        widthXS={10}
       >
         <div
           className="onboarding--admin-user-form"

diff --git a/ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap b/ui/src/me/components/account/__snapshots__/Settings.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`Account rendering renders! 1`] = `
                                       title="Edit About Me"
                                       type="button"
                                     >
-                                      <X
+                                      <G
                                         icon=""
                                         placeIconAfterText={false}
                                         text="Edit About Me"
@@ -103,7 +103,7 @@ exports[`Account rendering renders! 1`] = `
                                         >
                                           Edit About Me
                                         </span>
-                                      </X>
+                                      </G>
                                     </button>
                                   </ButtonBase>
                                 </Button>
@@ -159,6 +159,21 @@ exports[`Account rendering renders! 1`] = `
                                           }
                                         }
                                       >
+                                        <StatusIndicator
+                                          shadow={true}
+                                          size="sm"
+                                          status="disabled"
+                                          testID="nameInput"
+                                        >
+                                          <div
+                                            className="cf-status-indicator cf-status-indicator__disabled cf-status-indicator__sm"
+                                            data-testid="nameInput--disabled"
+                                          >
+                                            <div
+                                              className="cf-status-indicator--shadow"
+                                            />
+                                          </div>
+                                        </StatusIndicator>
                                         <input
                                           autoComplete="off"
                                           autoFocus={false}
@@ -174,13 +189,6 @@ exports[`Account rendering renders! 1`] = `
                                           type="text"
                                           value="groot"
                                         />
-                                        <ye
-                                          status="disabled"
-                                        >
-                                          <div
-                                            className="cf-input-shadow"
-                                          />
-                                        </ye>
                                       </div>
                                     </Input>
                                   </div>

diff --git a/ui/src/variables/components/__snapshots__/VariableForm.test.tsx.snap b/ui/src/variables/components/__snapshots__/VariableForm.test.tsx.snap
@@ -38,9 +38,17 @@ exports[`Variables.Components.VariableForm rendering renders 1`] = `
               </span>
             </label>
             <div
-              class="cf-input cf-input-sm cf-input__error"
+              class="cf-input cf-input-sm"
               style="width: 100%;"
             >
+              <div
+                class="cf-status-indicator cf-status-indicator__default cf-status-indicator__sm"
+                data-testid="input-field--default"
+              >
+                <div
+                  class="cf-status-indicator--shadow"
+                />
+              </div>
               <input
                 autocomplete="off"
                 class="cf-input-field"
@@ -52,20 +60,7 @@ exports[`Variables.Components.VariableForm rendering renders 1`] = `
                 type="text"
                 value=""
               />
-              <span
-                class="cf-icon alert-triangle cf-input-status"
-                data-testid="input-error"
-              />
-              <div
-                class="cf-input-shadow"
-              />
             </div>
-            <span
-              class="cf-form--element-error"
-              data-testid="form--element-error"
-            >
-              Variable name cannot be empty
-            </span>
           </div>
         </div>
       </div>

diff --git a/ui/webpack.common.ts b/ui/webpack.common.ts
@@ -23,6 +23,7 @@ module.exports = {
   resolve: {
     alias: {
       src: path.resolve(__dirname, 'src'),
+      react: path.resolve('./node_modules/react'),
     },
     extensions: ['.tsx', '.ts', '.js', '.wasm'],
   },

diff --git a/ui/yarn.lock b/ui/yarn.lock
@@ -1011,10 +1011,10 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@influxdata/clockface@1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-1.0.2.tgz#7c3926bbce62de6477208ac9d01c75352cd1a1de"
-  integrity sha512-7EGySc3ev2Os9XNpdSzjkkSqRy8dlC+s+/Fmil7VZ8tN76kaoKan8e6E+SD6DcLIPNK3SNhUFC/dn19ox84ibw==
+"@influxdata/clockface@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@influxdata/clockface/-/clockface-1.0.3.tgz#a24e5476f9d31c005bf1c2924220723e77e4c597"
+  integrity sha512-LxCUZ/1E7CZSLFxK/qO/L0m6T6GTCzEO9DoMgLAfGE4vdFpjxs7yMQNkfWxFYpXAUv+DBp/OFPKTqLtaB5bK0w==
   dependencies:
     "@types/d3-ease" "^1.0.8"
     d3-ease "^1.0.5"
@@ -5689,7 +5689,7 @@ htmlparser2@^3.3.0:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
-htmlparser2@^3.9.0, htmlparser2@^3.9.1:
+htmlparser2@^3.9.1:
   version "3.9.2"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
   integrity sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=
@@ -9556,15 +9556,6 @@ react-testing-library@^5.4.4:
   dependencies:
     dom-testing-library "^3.13.1"
 
-react-tooltip@^3.2.1:
-  version "3.8.4"
-  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-3.8.4.tgz#7af7994d5a242c08f2a3cf0b86919fede6eb44f2"
-  integrity sha512-i9rP5eihRNXFqYtyw58fhy+oT7OAEox/WC7XJOSED57s31nLU+uOJai5TgADbwNzJ7xamPkijYF36IfrUGJgcQ==
-  dependencies:
-    classnames "^2.2.5"
-    prop-types "^15.6.0"
-    sanitize-html-react "^1.13.0"
-
 react-virtualized@^9.18.5:
   version "9.20.1"
   resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.20.1.tgz#02dc08fe9070386b8c48e2ac56bce7af0208d22d"
@@ -9758,11 +9749,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp-quote@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/regexp-quote/-/regexp-quote-0.0.0.tgz#1e0f4650c862dcbfed54fd42b148e9bb1721fcf2"
-  integrity sha1-Hg9GUMhi3L/tVP1CsUjpuxch/PI=
-
 regexp-tree@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.0.tgz#a56ad7746097888ea16457479029ec9345b96ab0"
@@ -10171,15 +10157,6 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sanitize-html-react@^1.13.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/sanitize-html-react/-/sanitize-html-react-1.13.0.tgz#e757b9adbaf2c8a762f3d2dff70138838e05420a"
-  integrity sha1-51e5rbryyKdi89Lf9wE4g44FQgo=
-  dependencies:
-    htmlparser2 "^3.9.0"
-    regexp-quote "0.0.0"
-    xtend "^4.0.0"
-
 sass-loader@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"