From 91fe2d3a0c53cd5f67a86d1c66df82616df0b346 Mon Sep 17 00:00:00 2001 From: alexpaxton Date: Thu, 17 Oct 2019 11:58:07 -0700 Subject: [PATCH] chore(ui): upgrade Clockface to 1.0.0 (#15428) * chore(ui): upgrade clockface dependency * refactor(ui): update components affected by breaking changes * refactor(ui): update test snapshots * refactor(ui): remove obsolete component * refactor(ui): remove reference to non-existant stylesheet * refactor(ui): update selector in e2e collectors test * refactor(ui): attempt to fix e2e test * refactor(ui): appease linter * refactor(ui): update implementation of client library cards * refactor: update all breakage from new version * refactor: revert this commit * refactor: fix popover by using useRef instead of createRef * fix: update all instances of EmptyStateText * fix: update all instances of PageHeader * fix: update straggler empty state text * fix: update instance of PageHeaderCenter * fix: update instance of PageContents * fix: update style rule for dashboard cards * chore: update test snapshots * refactor: update instance of question mark tooltip * refactor: use brighten prop to ensure contrast with background * Revert "refactor: revert this commit" This reverts commit f325916d91d86f511532d95cddeb7bc71b88eeea. * chore: upgrade to NPM package instead of local * refactor: fix css import * refactor: update test snapshot * refactor: Guard against string being null Co-Authored-By: Alex Boatwright * refactor: move resource getter inside overlay so it does not disrupt layout * refactor: fix unit test by updating selector * refactor: guard against name being absent * chore: upgrade to latest clockface to utilize a bugfix * chore: update snapshot test * refactor: fix appearance of searchableDropdown * chore: upgrade dependency (again) for bugfixes * refactor: fix labels e2e test * refactor: fix tokens e2e test * refactor: appease linter --- ui/cypress/e2e/collectors.test.ts | 6 +- ui/cypress/e2e/labels.test.ts | 4 +- ui/cypress/e2e/tokens.test.ts | 11 +- ui/package.json | 2 +- .../alerting/components/AlertHistoryIndex.tsx | 1 - ui/src/alerting/components/AlertingIndex.tsx | 6 +- ui/src/alerting/components/AlertsColumn.tsx | 9 +- .../components/CheckAlertingButton.tsx | 2 +- ui/src/alerting/components/CheckCards.tsx | 26 +- ui/src/alerting/components/CheckEOHeader.tsx | 12 +- .../alerting/components/CheckEOSaveButton.tsx | 67 ++-- .../components/CreateCheckDropdown.tsx | 6 +- .../builder/CheckMatchingRulesCard.tsx | 10 +- .../components/builder/CheckTagRow.tsx | 8 +- .../components/endpoints/EndpointCards.tsx | 19 +- .../components/notifications/RuleCards.tsx | 16 +- .../notifications/RuleEndpointDropdown.tsx | 4 +- .../notifications/RuleOverlayContents.tsx | 4 +- .../components/notifications/StatusRule.tsx | 4 +- .../components/notifications/TagRule.tsx | 4 +- .../components/BucketsSelector.tsx | 8 +- .../components/GenerateTokenDropdown.tsx | 2 +- .../authorizations/components/TokenList.tsx | 2 +- ui/src/authorizations/components/TokenRow.tsx | 2 +- .../ViewTokenOverlay.test.tsx.snap | 10 +- .../components/BucketAddDataButton.tsx | 78 ++-- ui/src/buckets/components/BucketsTab.tsx | 9 +- .../components/ClientLibraries.tsx | 5 +- .../dashboards/components/DashboardHeader.tsx | 8 +- .../components/DashboardsCardGrid.scss | 2 +- ui/src/dashboards/components/VEOHeader.tsx | 8 +- .../dashboard_empty/DashboardEmpty.tsx | 8 +- .../dashboard_index/DashboardsIndex.tsx | 8 +- .../components/dashboard_index/Table.tsx | 11 +- .../variablesControlBar/VariableDropdown.tsx | 2 +- .../VariablesControlBar.tsx | 4 +- .../components/DataExplorerPage.tsx | 8 +- .../select/StreamingSelector.tsx | 11 +- .../configure/PrecisionDropdown.tsx | 2 +- .../__snapshots__/LineProtocol.test.tsx.snap | 2 - .../LineProtocolTabs.test.tsx.snap | 9 +- .../StatusIndicator.test.tsx.snap | 2 - .../__snapshots__/SideBarButton.test.tsx.snap | 6 - ui/src/labels/components/LabelsTab.tsx | 9 +- ui/src/labels/utils/index.ts | 2 +- ui/src/me/components/DashboardsList.tsx | 2 +- ui/src/me/components/UserPageHeader.tsx | 4 +- .../__snapshots__/Settings.test.tsx.snap | 364 +++++++++--------- ui/src/members/components/AddMembersForm.tsx | 2 +- ui/src/members/components/Members.tsx | 9 +- .../__snapshots__/Members.test.tsx.snap | 11 +- ui/src/onboarding/components/AdminStep.tsx | 16 +- .../components/OnboardingButtons.tsx | 2 +- .../__snapshots__/AdminStep.test.tsx.snap | 48 +-- .../CompletionStep.test.tsx.snap | 16 +- .../containers/OnboardingWizardPage.tsx | 8 +- .../components/OrgProfileTab.tsx | 23 +- ui/src/scrapers/components/Scrapers.tsx | 9 +- .../__snapshots__/Scrapers.test.tsx.snap | 12 +- ui/src/settings/components/LoadDataHeader.tsx | 6 +- ui/src/settings/components/SettingsHeader.tsx | 6 +- .../shared/components/AddResourceDropdown.tsx | 2 +- ui/src/shared/components/ColorDropdown.tsx | 4 +- .../shared/components/SearchableDropdown.tsx | 8 +- .../shared/components/TimeRangeDropdown.tsx | 4 +- ui/src/shared/components/TimeZoneDropdown.tsx | 2 +- .../columns_options/ColumnsOptions.tsx | 2 +- .../AutoRefreshDropdown.tsx | 4 +- .../inlineLabels/InlineLabelsList.tsx | 8 +- .../QuestionMarkTooltip.scss | 62 --- .../QuestionMarkTooltip.tsx | 40 -- .../components/search_widget/SearchWidget.tsx | 2 +- ui/src/style/chronograf.scss | 1 - ui/src/tasks/components/EmptyTasksList.tsx | 13 +- ui/src/tasks/components/TaskHeader.tsx | 8 +- ui/src/tasks/components/TaskRunsList.tsx | 7 +- ui/src/tasks/components/TaskRunsPage.tsx | 8 +- ui/src/tasks/components/TasksHeader.tsx | 8 +- .../__snapshots__/TaskForm.test.tsx.snap | 43 +-- .../__snapshots__/TasksList.test.tsx.snap | 13 +- ui/src/telegrafs/components/Collectors.tsx | 15 +- .../__snapshots__/Collectors.test.tsx.snap | 11 +- .../components/EmptyTemplatesList.tsx | 9 +- .../TemplateBrowserDetails.tsx | 7 +- .../TemplateBrowserEmpty.tsx | 8 +- .../components/EditorShortcutsTooltip.tsx | 6 +- .../components/QueryBuilder.test.tsx | 2 +- .../VariableTooltipContents.tsx | 2 +- .../view_options/ViewTypeDropdown.tsx | 2 +- .../components/CreateVariableOverlay.tsx | 24 +- ui/src/variables/components/VariablesTab.tsx | 9 +- .../__snapshots__/VariableForm.test.tsx.snap | 12 +- .../__snapshots__/Variables.test.tsx.snap | 11 +- ui/src/variables/utils/validation.ts | 4 +- ui/yarn.lock | 42 +- 95 files changed, 591 insertions(+), 789 deletions(-) delete mode 100644 ui/src/shared/components/question_mark_tooltip/QuestionMarkTooltip.scss delete mode 100644 ui/src/shared/components/question_mark_tooltip/QuestionMarkTooltip.tsx diff --git a/ui/cypress/e2e/collectors.test.ts b/ui/cypress/e2e/collectors.test.ts index 39975a5f6f..f6ae6d9db5 100644 --- a/ui/cypress/e2e/collectors.test.ts +++ b/ui/cypress/e2e/collectors.test.ts @@ -25,11 +25,7 @@ describe('Collectors', () => { cy.contains('Create Configuration').click() cy.getByTestID('overlay--container').within(() => { - cy.getByTestID('telegraf-plugins--System').within(() => { - // This extra get could be avoided by fixing this issue: - // https://github.com/influxdata/clockface/issues/245 - cy.get('.cf-selectable-card--container').click() - }) + cy.getByTestID('telegraf-plugins--System').click() cy.getByTestID('next').click() cy.getByInputName('name') .clear() diff --git a/ui/cypress/e2e/labels.test.ts b/ui/cypress/e2e/labels.test.ts index 6a3eed59ec..5d3c3057d2 100644 --- a/ui/cypress/e2e/labels.test.ts +++ b/ui/cypress/e2e/labels.test.ts @@ -105,7 +105,7 @@ describe('labels', () => { cy.getByTestID('color-picker--input').clear() cy.getByTestID('form--element-error').should( 'contain', - 'Hexcodes must begin with #, and must be 7 characters' + 'Please enter a hexcode' ) cy.getByTestID('input-error').should($ie => { expect($ie).to.have.class('alert-triangle') @@ -115,7 +115,7 @@ describe('labels', () => { cy.getByTestID('color-picker--input').type('zzzzzz') cy.getByTestID('form--element-error').should( 'contain', - 'Hexcodes must begin with #, and must be 7 characters' + 'Please enter a hexcode' ) cy.getByTestID('input-error').should($ie => { expect($ie).to.have.class('alert-triangle') diff --git a/ui/cypress/e2e/tokens.test.ts b/ui/cypress/e2e/tokens.test.ts index f529fb2508..142c59bbfa 100644 --- a/ui/cypress/e2e/tokens.test.ts +++ b/ui/cypress/e2e/tokens.test.ts @@ -204,11 +204,12 @@ describe('tokens', () => { .contains('token test 03') .parents('[data-testid=table-row]') .within(() => { - cy.getByTestID('delete-token--button') - .click() - .then(() => { - cy.getByTestID('button').click({force: true}) - }) + cy.getByTestID('delete-token--button').click() + }) + .then(() => { + cy.getByTestID('delete-token--popover--contents').within(() => { + cy.getByTestID('button').click() + }) }) cy.getByTestID('table-row').should('have.length', 3) diff --git a/ui/package.json b/ui/package.json index 3c54d2f02a..838f687c99 100644 --- a/ui/package.json +++ b/ui/package.json @@ -120,7 +120,7 @@ "webpack-merge": "^4.2.1" }, "dependencies": { - "@influxdata/clockface": "0.0.28", + "@influxdata/clockface": "1.0.2", "@influxdata/flux-parser": "^0.3.0", "@influxdata/giraffe": "0.16.4", "@influxdata/influx": "0.5.5", diff --git a/ui/src/alerting/components/AlertHistoryIndex.tsx b/ui/src/alerting/components/AlertHistoryIndex.tsx index 5817f00fa5..14e43eef30 100644 --- a/ui/src/alerting/components/AlertHistoryIndex.tsx +++ b/ui/src/alerting/components/AlertHistoryIndex.tsx @@ -87,7 +87,6 @@ const AlertHistoryIndex: FC = ({params: {orgID}, resourceIDs}) => { diff --git a/ui/src/alerting/components/AlertingIndex.tsx b/ui/src/alerting/components/AlertingIndex.tsx index 8375da5400..0ff28790e2 100644 --- a/ui/src/alerting/components/AlertingIndex.tsx +++ b/ui/src/alerting/components/AlertingIndex.tsx @@ -37,10 +37,10 @@ const AlertingIndex: FunctionComponent = ({ <> - + - - + + diff --git a/ui/src/alerting/components/AlertsColumn.tsx b/ui/src/alerting/components/AlertsColumn.tsx index 6d81e879d1..b64bacb16f 100644 --- a/ui/src/alerting/components/AlertsColumn.tsx +++ b/ui/src/alerting/components/AlertsColumn.tsx @@ -11,13 +11,14 @@ import { FlexBox, FlexDirection, ComponentSize, + QuestionMarkTooltip, + ComponentColor, } from '@influxdata/clockface' -import QuestionMarkTooltip from 'src/shared/components/question_mark_tooltip/QuestionMarkTooltip' interface Props { title: string createButton: JSX.Element - questionMarkTooltipContents: ReactChild + questionMarkTooltipContents: JSX.Element | string children: (searchTerm: string) => ReactChild } @@ -39,8 +40,10 @@ const AlertsColumnHeader: FC = ({ {title} {createButton} diff --git a/ui/src/alerting/components/CheckAlertingButton.tsx b/ui/src/alerting/components/CheckAlertingButton.tsx index 1a551fa875..6ccb0ddbc2 100644 --- a/ui/src/alerting/components/CheckAlertingButton.tsx +++ b/ui/src/alerting/components/CheckAlertingButton.tsx @@ -27,7 +27,7 @@ const CheckAlertingButton: FunctionComponent = ({ } return ( - + = ({ if (searchTerm) { return ( - + + No checks match your search + ) } if (showFirstTimeWidget) { return ( - - + +

Get started monitoring by creating a check

When a value crosses a specific threshold:
- - - - - - - -
- - - -
- - - - -
- +
-
- -
- - - + className="cf-panel--title cf-panel--title__sm" + data-testid="panel--title" + > + About Me +
+ + + + +
+ + + + + +
+
+ + + +
+ + + + +
+ + +
+ +
+ +
+ + + + +
+
- - - - - - - - + + + + + + + + `; diff --git a/ui/src/members/components/AddMembersForm.tsx b/ui/src/members/components/AddMembersForm.tsx index b4f1620307..d33bd1dcdc 100644 --- a/ui/src/members/components/AddMembersForm.tsx +++ b/ui/src/members/components/AddMembersForm.tsx @@ -51,7 +51,7 @@ export default class AddMembersForm extends PureComponent { { if (_.isEmpty(searchTerm)) { return ( - + + Looks like there aren't any Members, why not invite some? + ) } return ( - + No Members match your query ) } diff --git a/ui/src/members/components/__snapshots__/Members.test.tsx.snap b/ui/src/members/components/__snapshots__/Members.test.tsx.snap index eb4d4a20ef..05bf0167a6 100644 --- a/ui/src/members/components/__snapshots__/Members.test.tsx.snap +++ b/ui/src/members/components/__snapshots__/Members.test.tsx.snap @@ -1,29 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MemberList rendering renders 1`] = ` - - + + } - testID="resource-list--body" > { private orgTip = (): JSX.Element => { return ( ) @@ -254,8 +258,12 @@ class AdminStep extends PureComponent { private bucketTip = (): JSX.Element => { return ( ) } diff --git a/ui/src/onboarding/components/OnboardingButtons.tsx b/ui/src/onboarding/components/OnboardingButtons.tsx index 43074baa0b..3ccc0ba298 100644 --- a/ui/src/onboarding/components/OnboardingButtons.tsx +++ b/ui/src/onboarding/components/OnboardingButtons.tsx @@ -62,7 +62,7 @@ class OnboardingButtons extends PureComponent { size={ComponentSize.Medium} type={ButtonType.Submit} testID="next" - refObject={this.submitRef} + ref={this.submitRef} status={nextButtonStatus} tabIndex={0} /> diff --git a/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap b/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap index e67f67f730..b1a0925bd8 100644 --- a/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap +++ b/ui/src/onboarding/components/__snapshots__/AdminStep.test.tsx.snap @@ -6,8 +6,6 @@ exports[`Onboarding.Components.AdminStep renders 1`] = ` >
You will be able to create additional Users, Buckets and Organizations later - - + + @@ -132,27 +101,20 @@ exports[`Onboarding.Components.AdminStep renders 1`] = ` testID="form-elem--orgname" > @@ -162,20 +124,14 @@ exports[`Onboarding.Components.AdminStep renders 1`] = ` testID="form-elem--bucketname" > diff --git a/ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap b/ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap index 9486863b10..ef1f22c178 100644 --- a/ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap +++ b/ui/src/onboarding/components/__snapshots__/CompletionStep.test.tsx.snap @@ -40,14 +40,9 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
- - + + @@ -68,7 +63,6 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = `
@@ -89,7 +83,6 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = ` @@ -97,16 +90,11 @@ exports[`Onboarding.Components.CompletionStep renders 1`] = ` className="wizard-completion--option" >