From 8ae7255886e79a776c56f6e4d45f4a3f3d8c232a Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 15:02:35 -0400 Subject: [PATCH 01/10] wip --- .../app/views/editorSettings/components.js | 13 ++++ .../editorSettings/googleAnalytics/index.js | 66 ++++++++++++------- 2 files changed, 56 insertions(+), 23 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/components.js b/assets/src/dashboard/app/views/editorSettings/components.js index 5595c1d823f7..0adab44720e4 100644 --- a/assets/src/dashboard/app/views/editorSettings/components.js +++ b/assets/src/dashboard/app/views/editorSettings/components.js @@ -25,9 +25,11 @@ import styled from 'styled-components'; import { TypographyPresets, StandardViewContentGutter, + Button, } from '../../../components'; import { visuallyHiddenStyles } from '../../../utils/visuallyHiddenStyles'; import { Link } from '../../../components/link'; +import { BUTTON_TYPES } from '../../../constants'; export const Wrapper = styled.div` margin: 0 107px; @@ -130,4 +132,15 @@ export const RemoveLogoButton = styled.button` } `; +export const SaveButton = styled(Button).attrs({ type: BUTTON_TYPES.PRIMARY })` + float: right; +`; + +export const ErrorText = styled.p` + ${TypographyPresets.ExtraSmall}; + color: ${({ theme }) => theme.colors.danger}; + margin-left: 1em; + padding-top: 0.25em; +`; + export const VisuallyHiddenDescription = styled.span(visuallyHiddenStyles); diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index b01575483fa2..d92224136a60 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -17,7 +17,7 @@ /** * External dependencies */ -import { useState, useCallback, useEffect } from 'react'; +import { useState, useCallback } from 'react'; import PropTypes from 'prop-types'; /** @@ -29,13 +29,15 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { validateGoogleAnalyticsIdFormat } from '../../../../utils'; -import { InlineInputForm } from '../../../../components'; +import { TextInput } from '../../../../components'; import { FormContainer, InlineLink, SettingForm, SettingHeading, TextInputHelperText, + SaveButton, + ErrorText, } from '../components'; export const TEXT = { @@ -53,49 +55,67 @@ export const TEXT = { }; function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { - const [analyticsId, setAnalyticsId] = useState(googleAnalyticsId); + const [analyticsId, setAnlayticsId] = useState(googleAnalyticsId); const [inputError, setInputError] = useState(''); + const canSave = analyticsId !== googleAnalyticsId && !inputError; + const disableSaveButton = !canSave; - useEffect(() => { - setAnalyticsId(googleAnalyticsId); - }, [googleAnalyticsId]); + // const handleUpdateId = useCallback( + // (value) => { + // if (value.length === 0 || validateGoogleAnalyticsIdFormat(value)) { + // setInputError(''); + // return handleUpdate(value); + // } + // return setInputError(TEXT.INPUT_ERROR); + // }, + // [handleUpdate, setInputError] + // ); - const handleCancelUpdateId = useCallback(() => { - setAnalyticsId(googleAnalyticsId); - }, [googleAnalyticsId, setAnalyticsId]); + const handleUpdateId = useCallback((event) => { + const { value } = event.target; + setAnlayticsId(value); + + if (value.length === 0 || validateGoogleAnalyticsIdFormat(value)) { + setInputError(''); + + return; + } + + setInputError(TEXT.INPUT_ERROR); + }, []); + + // const debouncedHandleUpdateIds + + const handleOnSave = useCallback(() => { + if (canSave) { + handleUpdate(analyticsId); + } + }, [canSave, analyticsId, handleUpdate]); - const handleUpdateId = useCallback( - (value) => { - if (value.length === 0 || validateGoogleAnalyticsIdFormat(value)) { - setInputError(''); - return handleUpdate(value); - } - return setInputError(TEXT.INPUT_ERROR); - }, - [handleUpdate, setInputError] - ); return ( e.preventDefault()}> {TEXT.SECTION_HEADING} - + {inputError && {inputError}} {TEXT.CONTEXT} {TEXT.CONTEXT_ARTICLE} + + {'Save'} + ); From 1e68711d5375399963f757b17081e36554f9e73f Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 15:20:05 -0400 Subject: [PATCH 02/10] change logic of GoogleAnalyticsSettings + Add SaveButton --- .../views/editorSettings/googleAnalytics/index.js | 13 ------------- .../dashboard/app/views/myStories/header/index.js | 3 ++- assets/src/dashboard/constants/index.js | 2 ++ 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index d92224136a60..1f5b13d3c2df 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -60,17 +60,6 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { const canSave = analyticsId !== googleAnalyticsId && !inputError; const disableSaveButton = !canSave; - // const handleUpdateId = useCallback( - // (value) => { - // if (value.length === 0 || validateGoogleAnalyticsIdFormat(value)) { - // setInputError(''); - // return handleUpdate(value); - // } - // return setInputError(TEXT.INPUT_ERROR); - // }, - // [handleUpdate, setInputError] - // ); - const handleUpdateId = useCallback((event) => { const { value } = event.target; setAnlayticsId(value); @@ -84,8 +73,6 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { setInputError(TEXT.INPUT_ERROR); }, []); - // const debouncedHandleUpdateIds - const handleOnSave = useCallback(() => { if (canSave) { handleUpdate(analyticsId); diff --git a/assets/src/dashboard/app/views/myStories/header/index.js b/assets/src/dashboard/app/views/myStories/header/index.js index fdc728bd16ac..de1cdde3c310 100644 --- a/assets/src/dashboard/app/views/myStories/header/index.js +++ b/assets/src/dashboard/app/views/myStories/header/index.js @@ -38,6 +38,7 @@ import { DASHBOARD_VIEWS, STORY_STATUSES, STORY_SORT_MENU_ITEMS, + TEXT_INPUT_DEBOUNCE, } from '../../../../constants'; import { StoriesPropType, @@ -118,7 +119,7 @@ function Header({ const [debouncedTypeaheadChange] = useDebouncedCallback( search.setKeyword, - 300 + TEXT_INPUT_DEBOUNCE ); return ( diff --git a/assets/src/dashboard/constants/index.js b/assets/src/dashboard/constants/index.js index 69079bc4557b..e83a78830e35 100644 --- a/assets/src/dashboard/constants/index.js +++ b/assets/src/dashboard/constants/index.js @@ -126,6 +126,8 @@ export const STORIES_PER_REQUEST = 24; export const DEFAULT_DATE_FORMAT = 'Y-m-d'; +export const TEXT_INPUT_DEBOUNCE = 300; + export * from './components'; export * from './direction'; export * from './pageStructure'; From 281eaf4d8be07d9b8c0bfb425dd0b695ce1049f4 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 15:31:25 -0400 Subject: [PATCH 03/10] sync prop and controlled state --- .../app/views/editorSettings/googleAnalytics/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index 1f5b13d3c2df..5d56fffc4049 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -28,6 +28,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { useEffect } from 'react'; import { validateGoogleAnalyticsIdFormat } from '../../../../utils'; import { TextInput } from '../../../../components'; import { @@ -55,11 +56,15 @@ export const TEXT = { }; function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { - const [analyticsId, setAnlayticsId] = useState(googleAnalyticsId); + const [analyticsId, setAnlayticsId] = useState(() => googleAnalyticsId); const [inputError, setInputError] = useState(''); const canSave = analyticsId !== googleAnalyticsId && !inputError; const disableSaveButton = !canSave; + useEffect(() => { + setAnlayticsId(googleAnalyticsId); + }, [googleAnalyticsId]); + const handleUpdateId = useCallback((event) => { const { value } = event.target; setAnlayticsId(value); From 09a57164e4af1f8706c234d9b638dc23f43013ee Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 16:23:54 -0400 Subject: [PATCH 04/10] add unit tests --- .../editorSettings/googleAnalytics/index.js | 11 +++ .../googleAnalytics/test/googleAnalytics.js | 87 +++++++++++++++++-- 2 files changed, 91 insertions(+), 7 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index 5d56fffc4049..bcdff9ab12b6 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -84,6 +84,16 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { } }, [canSave, analyticsId, handleUpdate]); + const handleOnKeyDown = useCallback( + (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + handleOnSave(); + } + }, + [handleOnSave] + ); + return ( e.preventDefault()}> @@ -95,6 +105,7 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { id="gaTrackingId" value={analyticsId} onChange={handleUpdateId} + onKeyDown={handleOnKeyDown} placeholder={TEXT.PLACEHOLDER} error={inputError} /> diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/test/googleAnalytics.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/test/googleAnalytics.js index f913a732de45..f5214bd0eaf6 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/test/googleAnalytics.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/test/googleAnalytics.js @@ -25,12 +25,24 @@ import { renderWithTheme } from '../../../../../testUtils'; import GoogleAnalyticsSettings, { TEXT } from '../'; describe('Editor Settings: Google Analytics ', function () { - const mockUpdate = jest.fn(); + let googleAnalyticsId; + let mockUpdate; + + beforeEach(() => { + googleAnalyticsId = ''; + mockUpdate = jest.fn((id) => { + googleAnalyticsId = id; + }); + }); + + afterEach(() => { + googleAnalyticsId = ''; + }); it('should render google analytics input and helper text by default', function () { const { getByRole, getByText } = renderWithTheme( ); @@ -43,29 +55,90 @@ describe('Editor Settings: Google Analytics ', function () { }); it('should call mockUpdate when enter is keyed on input', function () { - const { getByRole } = renderWithTheme( + let { getByRole, rerender } = renderWithTheme( + + ); + + let input = getByRole('textbox'); + + fireEvent.change(input, { target: { value: 'UA-098754-33' } }); + fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 }); + + // rerender to get updated googleAnalyticsId prop + rerender( + ); + + expect(mockUpdate).toHaveBeenCalledTimes(1); + + fireEvent.change(input, { target: { value: '' } }); + fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 }); + + // rerender to get updated googleAnalyticsId prop + rerender( + + ); + + expect(mockUpdate).toHaveBeenCalledTimes(2); + + fireEvent.change(input, { target: { value: 'NOT A VALID ID!!!' } }); + + fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 }); + + expect(mockUpdate).toHaveBeenCalledTimes(2); + }); + + it('should call mockUpdate when the save button is clicked', function () { + const { getByRole, rerender } = renderWithTheme( + ); const input = getByRole('textbox'); + const button = getByRole('button'); + fireEvent.change(input, { target: { value: 'UA-098754-33' } }); - fireEvent.keyDown(input, { key: 'enter', keyCode: 13 }); + fireEvent.click(button); + + // rerender to get updated googleAnalyticsId prop + rerender( + + ); expect(mockUpdate).toHaveBeenCalledTimes(1); fireEvent.change(input, { target: { value: '' } }); - fireEvent.keyDown(input, { key: 'enter', keyCode: 13 }); + fireEvent.click(button); + + // rerender to get updated googleAnalyticsId prop + rerender( + + ); expect(mockUpdate).toHaveBeenCalledTimes(2); fireEvent.change(input, { target: { value: 'NOT A VALID ID!!!' } }); - fireEvent.keyDown(input, { key: 'enter', keyCode: 13 }); + fireEvent.click(button); expect(mockUpdate).toHaveBeenCalledTimes(2); }); From e3e3cfed01f319c3f031537490b73598efae60d7 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 16:42:56 -0400 Subject: [PATCH 05/10] update editor settings karma tests --- .../karma/editorSettings.karma.js | 95 ++++++++++++++++++- 1 file changed, 91 insertions(+), 4 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js b/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js index c09752bd3e0b..e0f26f96602b 100644 --- a/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js +++ b/assets/src/dashboard/app/views/editorSettings/karma/editorSettings.karma.js @@ -64,7 +64,7 @@ describe('Settings View', () => { expect(PageHeading).toBeTruthy(); }); - it('should update the tracking id', async () => { + it('should update the tracking id when pressning Enter', async () => { const settingsView = await fixture.screen.getByTestId('editor-settings'); const input = within(settingsView).getByRole('textbox'); @@ -86,11 +86,98 @@ describe('Settings View', () => { const { googleAnalyticsId } = await getSettingsState(); - const newInput = await fixture.screen.getByRole('textbox'); - expect(newInput.value).toBe(googleAnalyticsId); + expect(input.value).toBe(googleAnalyticsId); }); - it("it should not allow an update of google analytics id when id format doesn't match required format", async () => { + it('should update the tracking id by clicking the save button', async () => { + const settingsView = await fixture.screen.getByTestId('editor-settings'); + + const { getByRole } = within(settingsView); + + const input = getByRole('textbox'); + const button = getByRole('button', { name: /Save/ }); + + await fixture.events.hover(input); + + await fixture.events.click(input); + + const inputLength = input.value.length; + + for (let iter = 0; iter < inputLength; iter++) { + // disable eslint to prevent overlapping .act calls + // eslint-disable-next-line no-await-in-loop + await fixture.events.keyboard.press('Backspace'); + } + + await fixture.events.keyboard.type('UA-009345-6'); + await fixture.events.click(button); + + const { googleAnalyticsId } = await getSettingsState(); + + expect(input.value).toBe(googleAnalyticsId); + }); + + it('should allow the analytics id to saved as an empty string', async () => { + const settingsView = await fixture.screen.getByTestId('editor-settings'); + const { googleAnalyticsId: initialId } = await getSettingsState(); + + expect(initialId).not.toEqual(''); + + const { getByRole } = within(settingsView); + + const input = getByRole('textbox'); + const button = getByRole('button', { name: /Save/ }); + + await fixture.events.hover(input); + + await fixture.events.click(input); + + const inputLength = input.value.length; + + for (let iter = 0; iter < inputLength; iter++) { + // disable eslint to prevent overlapping .act calls + // eslint-disable-next-line no-await-in-loop + await fixture.events.keyboard.press('Backspace'); + } + + await fixture.events.click(button); + + const { googleAnalyticsId: analyticsId } = await getSettingsState(); + + expect(analyticsId).toEqual(''); + }); + + it('should not allow an invalid analytics id to saved', async () => { + const settingsView = await fixture.screen.getByTestId('editor-settings'); + const { googleAnalyticsId: initialId } = await getSettingsState(); + + expect(initialId).not.toEqual(''); + + const { getByRole } = within(settingsView); + + const input = getByRole('textbox'); + const button = getByRole('button', { name: /Save/ }); + + await fixture.events.hover(input); + + await fixture.events.click(input); + + const inputLength = input.value.length; + + for (let iter = 0; iter < inputLength; iter++) { + // disable eslint to prevent overlapping .act calls + // eslint-disable-next-line no-await-in-loop + await fixture.events.keyboard.press('Backspace'); + } + await fixture.events.keyboard.type('INVALID'); + await fixture.events.click(button); + + const { googleAnalyticsId: analyticsId } = await getSettingsState(); + + expect(analyticsId).toEqual(initialId); + }); + + it("should not allow an update of google analytics id when id format doesn't match required format", async () => { const settingsView = await fixture.screen.getByTestId('editor-settings'); const input = within(settingsView).getByRole('textbox'); From 97a58ab349e84e33190c2446f185910dbf2aaf18 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 16:52:04 -0400 Subject: [PATCH 06/10] typo --- .../app/views/editorSettings/googleAnalytics/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index bcdff9ab12b6..4d6510c61136 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -56,18 +56,18 @@ export const TEXT = { }; function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { - const [analyticsId, setAnlayticsId] = useState(() => googleAnalyticsId); + const [analyticsId, setAnalyticsId] = useState(() => googleAnalyticsId); const [inputError, setInputError] = useState(''); const canSave = analyticsId !== googleAnalyticsId && !inputError; const disableSaveButton = !canSave; useEffect(() => { - setAnlayticsId(googleAnalyticsId); + setAnalyticsId(googleAnalyticsId); }, [googleAnalyticsId]); const handleUpdateId = useCallback((event) => { const { value } = event.target; - setAnlayticsId(value); + setAnalyticsId(value); if (value.length === 0 || validateGoogleAnalyticsIdFormat(value)) { setInputError(''); From c6395875d9ea83b3393eea1d710dc5aebb3dc439 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 16:52:46 -0400 Subject: [PATCH 07/10] remove lazy setState --- .../dashboard/app/views/editorSettings/googleAnalytics/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index 4d6510c61136..98739aa9391f 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -56,7 +56,7 @@ export const TEXT = { }; function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { - const [analyticsId, setAnalyticsId] = useState(() => googleAnalyticsId); + const [analyticsId, setAnalyticsId] = useState(googleAnalyticsId); const [inputError, setInputError] = useState(''); const canSave = analyticsId !== googleAnalyticsId && !inputError; const disableSaveButton = !canSave; From be58f3dde4e1f805bd42185df3204a74c959a13a Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 17:13:21 -0400 Subject: [PATCH 08/10] updated deps, use i18n --- .../app/views/editorSettings/googleAnalytics/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index 98739aa9391f..90a7052c29ba 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -17,7 +17,7 @@ /** * External dependencies */ -import { useState, useCallback } from 'react'; +import { useState, useCallback, useEffect } from 'react'; import PropTypes from 'prop-types'; /** @@ -28,7 +28,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { useEffect } from 'react'; import { validateGoogleAnalyticsIdFormat } from '../../../../utils'; import { TextInput } from '../../../../components'; import { @@ -117,7 +116,7 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { - {'Save'} + {__('Save', 'web-stories')} From 61a4511f6841ebb983ae9991ec5747c60bb800a1 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Thu, 3 Sep 2020 18:23:59 -0400 Subject: [PATCH 09/10] fix styles to match figma --- .../app/views/editorSettings/components.js | 18 ++++++++++-- .../editorSettings/googleAnalytics/index.js | 29 ++++++++++--------- 2 files changed, 31 insertions(+), 16 deletions(-) diff --git a/assets/src/dashboard/app/views/editorSettings/components.js b/assets/src/dashboard/app/views/editorSettings/components.js index 745ba7df5948..151b7f0977b3 100644 --- a/assets/src/dashboard/app/views/editorSettings/components.js +++ b/assets/src/dashboard/app/views/editorSettings/components.js @@ -27,6 +27,7 @@ import { TypographyPresets, StandardViewContentGutter, Button, + TextInput, } from '../../../components'; import { visuallyHiddenStyles } from '../../../utils/visuallyHiddenStyles'; import { Link } from '../../../components/link'; @@ -162,9 +163,9 @@ export const RemoveLogoButton = styled.button` } `; -export const SaveButton = styled(Button).attrs({ type: BUTTON_TYPES.PRIMARY })` - float: right; -`; +export const SaveButton = styled(Button).attrs({ + type: BUTTON_TYPES.PRIMARY, +})``; export const ErrorText = styled.p` ${TypographyPresets.ExtraSmall}; @@ -173,4 +174,15 @@ export const ErrorText = styled.p` padding-top: 0.25em; `; +export const InlineForm = styled.div` + display: flex; +`; + +export const GoogleAnalyticsTextInput = styled(TextInput)` + flex: 3; + width: auto; + display: inline-block; + margin-right: 5px; +`; + export const VisuallyHiddenDescription = styled.span(visuallyHiddenStyles); diff --git a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js index 90a7052c29ba..d65efbe91b2d 100644 --- a/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js +++ b/assets/src/dashboard/app/views/editorSettings/googleAnalytics/index.js @@ -29,7 +29,6 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import { validateGoogleAnalyticsIdFormat } from '../../../../utils'; -import { TextInput } from '../../../../components'; import { FormContainer, InlineLink, @@ -38,6 +37,8 @@ import { TextInputHelperText, SaveButton, ErrorText, + InlineForm, + GoogleAnalyticsTextInput, } from '../components'; export const TEXT = { @@ -99,15 +100,20 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { {TEXT.SECTION_HEADING} - + + + + {__('Save', 'web-stories')} + + {inputError && {inputError}} {TEXT.CONTEXT} @@ -115,9 +121,6 @@ function GoogleAnalyticsSettings({ googleAnalyticsId, handleUpdate }) { {TEXT.CONTEXT_ARTICLE} - - {__('Save', 'web-stories')} - ); From b9a8a26861a4c7efe0b07b489ff377d6f4f77188 Mon Sep 17 00:00:00 2001 From: Dillon Mulroy Date: Fri, 4 Sep 2020 12:25:48 -0400 Subject: [PATCH 10/10] lint --- assets/src/dashboard/constants/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/src/dashboard/constants/index.js b/assets/src/dashboard/constants/index.js index 82f758bafc4f..9308c9986853 100644 --- a/assets/src/dashboard/constants/index.js +++ b/assets/src/dashboard/constants/index.js @@ -126,7 +126,6 @@ export const STORIES_PER_REQUEST = 24; export const DEFAULT_DATE_FORMAT = 'Y-m-d'; - export const TEXT_INPUT_DEBOUNCE = 300; export const MIN_IMG_HEIGHT = 96;