From 81ecab9af315d139f11919fc4a4f181bb2d67dc0 Mon Sep 17 00:00:00 2001 From: BIKI DAS Date: Wed, 14 Jun 2023 19:51:42 +0530 Subject: [PATCH 01/10] Added open in editor to appear by default --- .../react-devtools-shared/src/constants.js | 3 +++ .../views/Components/InspectedElement.js | 2 ++ .../views/Settings/ComponentsSettings.js | 26 ++++++++++++++++++- 3 files changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js index 5c2454a36f909..716dad8c575db 100644 --- a/packages/react-devtools-shared/src/constants.js +++ b/packages/react-devtools-shared/src/constants.js @@ -39,6 +39,9 @@ export const SESSION_STORAGE_LAST_SELECTION_KEY = export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL = 'React::DevTools::openInEditorUrl'; +export const LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET = + 'React::DevTools::openInEditorUrlPreset'; + export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY = 'React::DevTools::parseHookNames'; diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 69d919fcef246..1699b8a61f500 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js @@ -221,6 +221,8 @@ export default function InspectedElementWrapper(_: Props): React.Node { const url = new URL(editorURL); url.href = url.href.replace('{path}', source.fileName); url.href = url.href.replace('{line}', String(source.lineNumber)); + url.href = url.href.replace('%7Bpath%7D', source.fileName); + url.href = url.href.replace('%7Bline%7D', String(source.lineNumber)); window.open(url); }, [inspectedElement, editorURL]); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 023116060e62a..39325f5571e5c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -16,7 +16,10 @@ import { useRef, useState, } from 'react'; -import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants'; +import { + LOCAL_STORAGE_OPEN_IN_EDITOR_URL, + LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, +} from '../../../constants'; import {useLocalStorage, useSubscription} from '../hooks'; import {StoreContext} from '../context'; import Button from '../Button'; @@ -83,11 +86,23 @@ export default function ComponentsSettings(_: {}): React.Node { [setParseHookNames], ); + const [openInEditorURLPreset, setOpenInEditorURLPreset] = useLocalStorage< + 'vscode' | 'custom', + >(LOCAL_STORAGE_OPEN_IN_EDITOR_URL_PRESET, 'custom'); + const [openInEditorURL, setOpenInEditorURL] = useLocalStorage( LOCAL_STORAGE_OPEN_IN_EDITOR_URL, getDefaultOpenInEditorURL(), ); + useEffect(() => { + if (openInEditorURLPreset === 'vscode') { + setOpenInEditorURL('vscode://file/{path}:{line}'); + } else { + setOpenInEditorURL('custom link'); + } + }, [openInEditorURLPreset, setOpenInEditorURL]); + const [componentFilters, setComponentFilters] = useState< Array, >(() => [...store.componentFilters]); @@ -280,6 +295,15 @@ export default function ComponentsSettings(_: {}): React.Node {
Hide components where...
From fbf83daa3e510ac58130f53546853f7c80df997e Mon Sep 17 00:00:00 2001 From: BIKI Date: Mon, 19 Jun 2023 18:15:39 +0530 Subject: [PATCH 05/10] Added margin and tests initialised --- .../src/__tests__/ComponentSettings-test.js | 116 ++++++++++++++++++ .../views/Settings/ComponentsSettings.js | 4 +- .../views/Settings/SettingsShared.css | 1 + 3 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js diff --git a/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js b/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js new file mode 100644 index 0000000000000..456addf792a08 --- /dev/null +++ b/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js @@ -0,0 +1,116 @@ +import React from 'react'; +import {render, fireEvent} from 'react-dom'; +import ComponentsSettings from '../devtools/views/Settings/ComponentsSettings'; + +describe('ComponentsSettings', () => { + let container; + + beforeEach(() => { + container = document.createElement('div'); + document.body.appendChild(container); + }); + + afterEach(() => { + document.body.removeChild(container); + container = null; + }); + + it('should add a filter when "Add filter" button is clicked', () => { + render(, container); + const addButton = container.querySelector('button'); + fireEvent.click(addButton); + + // Assert that a new filter is added + expect(container.textContent).toContain('Filter matches'); + }); + + it('should remove a filter when "Delete filter" button is clicked', () => { + render(, container); + const addButton = container.querySelector('button'); + const deleteButton = container.querySelector('button'); + + fireEvent.click(addButton); + fireEvent.click(deleteButton); + + // Assert that the filter is removed + expect(container.textContent).not.toContain('Filter matches'); + }); + + it('should update the collapseNodesByDefault setting when expand/collapse checkbox is clicked', () => { + render(, container); + const expandCollapseCheckbox = container.querySelector( + 'input[type="checkbox"]', + ); + + fireEvent.click(expandCollapseCheckbox); + + // Assert that the setting is updated + expect(expandCollapseCheckbox.checked).toBe(false); + }); + + it('should update the parseHookNames setting when parse hook names checkbox is clicked', () => { + render(, container); + const parseHookNamesCheckbox = container.querySelector( + 'input[type="checkbox"]', + ); + + fireEvent.click(parseHookNamesCheckbox); + + // Assert that the setting is updated + expect(parseHookNamesCheckbox.checked).toBe(true); + }); + + it('should update the openInEditorURLPreset and openInEditorURL settings when selecting a different preset', () => { + render(, container); + const openInEditorURLPresetSelect = container.querySelector('select'); + const openInEditorURLInput = container.querySelector('input[type="text"]'); + + // Select the "VS Code" preset + fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'vscode'}}); + + // Assert that the preset and URL input are updated + expect(openInEditorURLPresetSelect.value).toBe('vscode'); + expect(openInEditorURLInput.value).toBe('vscode://file/{path}:{line}'); + + // Select the "Custom" preset + fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'custom'}}); + + // Assert that the preset and URL input are updated + expect(openInEditorURLPresetSelect.value).toBe('custom'); + expect(openInEditorURLInput.value).toBe(''); + + // Update the custom URL input + fireEvent.change(openInEditorURLInput, { + target: {value: 'https://example.com'}, + }); + + // Assert that the custom URL input is updated + expect(openInEditorURLInput.value).toBe('https://example.com'); + }); + + it('should update the filter type when selecting a different type in the filter dropdown', () => { + render(, container); + const addButton = container.querySelector('button'); + fireEvent.click(addButton); + + const filterTypeSelect = container.querySelector('select'); + fireEvent.change(filterTypeSelect, {target: {value: 'location'}}); + + // Assert that the filter type is updated + expect(filterTypeSelect.value).toBe('location'); + }); + + it('should update the filter value when entering a value in the filter input field', () => { + render(, container); + const addButton = container.querySelector('button'); + fireEvent.click(addButton); + + const filterInput = container.querySelector('input[type="text"]'); + fireEvent.change(filterInput, {target: {value: 'example'}}); + + // Assert that the filter value is updated + expect(filterInput.value).toBe('example'); + }); + + // Add more test cases for other functionality and interactions +}); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 138304485416f..5074cfef0485f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -95,6 +95,8 @@ export default function ComponentsSettings(_: {}): React.Node { getDefaultOpenInEditorURL(), ); + const vscodeFilepath = 'vscode://file/{path}:{line}'; + const [componentFilters, setComponentFilters] = useState< Array, >(() => [...store.componentFilters]); @@ -294,7 +296,7 @@ export default function ComponentsSettings(_: {}): React.Node { const selectedValue = currentTarget.value; setOpenInEditorURLPreset(selectedValue); if (selectedValue === 'vscode') { - setOpenInEditorURL('vscode://file/{path}:{line}'); + setOpenInEditorURL(vscodeFilepath); } else if (selectedValue === 'custom') { setOpenInEditorURL(''); } diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css index dd3f5456c464c..88c9fdad10912 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css @@ -91,6 +91,7 @@ border: 1px solid var(--color-border); border-radius: 0.125rem; padding: 0.125rem; + margin-left: .5rem; } .InvalidRegExp, From 58e20999ce3352d5d0925dccab85483219cbce6b Mon Sep 17 00:00:00 2001 From: BIKI Date: Mon, 19 Jun 2023 18:22:36 +0530 Subject: [PATCH 06/10] Added process.env --- .../src/devtools/views/Settings/ComponentsSettings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 5074cfef0485f..3dad1e6813edf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -309,7 +309,7 @@ export default function ComponentsSettings(_: {}): React.Node { className={styles.Input} type="text" placeholder={ - process.env.EDITOR_URL ? 'vscode://file/{path}:{line}' : '' + process.env.EDITOR_URL ? process.env.EDITOR_URL : '' } value={openInEditorURL} onChange={event => { From 023c7669122a818bae2bb2ad6fa8cfdd8d2f9bce Mon Sep 17 00:00:00 2001 From: BIKI Date: Mon, 19 Jun 2023 18:32:42 +0530 Subject: [PATCH 07/10] Prettier --- .../src/devtools/views/Settings/ComponentsSettings.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 3dad1e6813edf..97822a6ae91b0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -308,9 +308,7 @@ export default function ComponentsSettings(_: {}): React.Node { { setOpenInEditorURL(event.target.value); From 7c361a42b8fcaccf45f1d6ec42b9f839e58d33b7 Mon Sep 17 00:00:00 2001 From: BIKI Date: Mon, 19 Jun 2023 20:35:39 +0530 Subject: [PATCH 08/10] Tests updated --- .../src/__tests__/ComponentSettings-test.js | 128 ++++++++---------- 1 file changed, 57 insertions(+), 71 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js b/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js index 456addf792a08..132efb5ef41d6 100644 --- a/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js +++ b/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js @@ -1,116 +1,102 @@ import React from 'react'; -import {render, fireEvent} from 'react-dom'; +import { render, unmountComponentAtNode } from 'react-dom'; import ComponentsSettings from '../devtools/views/Settings/ComponentsSettings'; describe('ComponentsSettings', () => { let container; beforeEach(() => { + // Set up a DOM element as a render target container = document.createElement('div'); document.body.appendChild(container); }); afterEach(() => { - document.body.removeChild(container); + // Clean up on exiting + unmountComponentAtNode(container); + container.remove(); container = null; }); - it('should add a filter when "Add filter" button is clicked', () => { + // @reactVersion >= 17 + it('should update collapseNodesByDefault setting', () => { + const useContextMock = jest.fn().mockReturnValue({ + collapseNodesByDefault: true, + addListener: jest.fn(), + removeListener: jest.fn(), + }); + render(, container); - const addButton = container.querySelector('button'); - fireEvent.click(addButton); - // Assert that a new filter is added - expect(container.textContent).toContain('Filter matches'); - }); + const toggleElement = container.querySelector('.Settings input[type="checkbox"]'); - it('should remove a filter when "Delete filter" button is clicked', () => { - render(, container); - const addButton = container.querySelector('button'); - const deleteButton = container.querySelector('button'); + expect(toggleElement.checked).toBe(true); - fireEvent.click(addButton); - fireEvent.click(deleteButton); + toggleElement.click(); - // Assert that the filter is removed - expect(container.textContent).not.toContain('Filter matches'); + expect(useContextMock().collapseNodesByDefault).toBe(false); }); - it('should update the collapseNodesByDefault setting when expand/collapse checkbox is clicked', () => { - render(, container); - const expandCollapseCheckbox = container.querySelector( - 'input[type="checkbox"]', - ); - - fireEvent.click(expandCollapseCheckbox); + it('should update parseHookNames setting', () => { + const setParseHookNamesMock = jest.fn(); - // Assert that the setting is updated - expect(expandCollapseCheckbox.checked).toBe(false); - }); + const useContextMock = jest.fn().mockReturnValue({ + parseHookNames: true, + setParseHookNames: setParseHookNamesMock, + }); - it('should update the parseHookNames setting when parse hook names checkbox is clicked', () => { render(, container); - const parseHookNamesCheckbox = container.querySelector( - 'input[type="checkbox"]', - ); - fireEvent.click(parseHookNamesCheckbox); + const toggleElement = container.querySelector('.Settings input[type="checkbox"]'); + + expect(toggleElement.checked).toBe(true); + + toggleElement.click(); - // Assert that the setting is updated - expect(parseHookNamesCheckbox.checked).toBe(true); + expect(setParseHookNamesMock).toHaveBeenCalledWith(false); }); - it('should update the openInEditorURLPreset and openInEditorURL settings when selecting a different preset', () => { - render(, container); - const openInEditorURLPresetSelect = container.querySelector('select'); - const openInEditorURLInput = container.querySelector('input[type="text"]'); + it('should update openInEditorURLPreset setting', () => { + const setLocalStorageMock = jest.spyOn(Storage.prototype, 'setItem'); - // Select the "VS Code" preset - fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'vscode'}}); + const useContextMock = jest.fn().mockReturnValue({ + openInEditorURLPreset: 'custom', + setOpenInEditorURLPreset: jest.fn(), + }); - // Assert that the preset and URL input are updated - expect(openInEditorURLPresetSelect.value).toBe('vscode'); - expect(openInEditorURLInput.value).toBe('vscode://file/{path}:{line}'); + render(, container); - // Select the "Custom" preset - fireEvent.change(openInEditorURLPresetSelect, {target: {value: 'custom'}}); + const selectElement = container.querySelector('.Settings select'); - // Assert that the preset and URL input are updated - expect(openInEditorURLPresetSelect.value).toBe('custom'); - expect(openInEditorURLInput.value).toBe(''); + expect(selectElement.value).toBe('custom'); - // Update the custom URL input - fireEvent.change(openInEditorURLInput, { - target: {value: 'https://example.com'}, - }); + selectElement.value = 'vscode'; + selectElement.dispatchEvent(new Event('change')); - // Assert that the custom URL input is updated - expect(openInEditorURLInput.value).toBe('https://example.com'); + expect(setLocalStorageMock).toHaveBeenCalledWith('OPEN_IN_EDITOR_URL_PRESET', 'vscode'); }); - it('should update the filter type when selecting a different type in the filter dropdown', () => { - render(, container); - const addButton = container.querySelector('button'); - fireEvent.click(addButton); - - const filterTypeSelect = container.querySelector('select'); - fireEvent.change(filterTypeSelect, {target: {value: 'location'}}); + it('should update openInEditorURL setting', () => { + const setLocalStorageMock = jest.spyOn(Storage.prototype, 'setItem'); - // Assert that the filter type is updated - expect(filterTypeSelect.value).toBe('location'); - }); + const useContextMock = jest.fn().mockReturnValue({ + openInEditorURLPreset: 'custom', + setOpenInEditorURL: jest.fn(), + }); - it('should update the filter value when entering a value in the filter input field', () => { render(, container); - const addButton = container.querySelector('button'); - fireEvent.click(addButton); - const filterInput = container.querySelector('input[type="text"]'); - fireEvent.change(filterInput, {target: {value: 'example'}}); + const selectElement = container.querySelector('.Settings select'); + const inputElement = container.querySelector('.Settings input[type="text"]'); + + selectElement.value = 'custom'; + selectElement.dispatchEvent(new Event('change')); + + inputElement.value = 'https://example.com'; + inputElement.dispatchEvent(new Event('change')); - // Assert that the filter value is updated - expect(filterInput.value).toBe('example'); + expect(setLocalStorageMock).toHaveBeenCalledWith('OPEN_IN_EDITOR_URL', 'https://example.com'); }); - // Add more test cases for other functionality and interactions + // Add additional test cases for other functionality... }); From 34114ca22d6f1f7ae99923637dc555c57fa7f43d Mon Sep 17 00:00:00 2001 From: Biki-das Date: Mon, 24 Jul 2023 18:53:19 +0530 Subject: [PATCH 09/10] Revert test changes --- .../src/__tests__/ComponentSettings-test.js | 102 ------------------ 1 file changed, 102 deletions(-) delete mode 100644 packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js diff --git a/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js b/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js deleted file mode 100644 index 132efb5ef41d6..0000000000000 --- a/packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react'; -import { render, unmountComponentAtNode } from 'react-dom'; -import ComponentsSettings from '../devtools/views/Settings/ComponentsSettings'; - -describe('ComponentsSettings', () => { - let container; - - beforeEach(() => { - // Set up a DOM element as a render target - container = document.createElement('div'); - document.body.appendChild(container); - }); - - afterEach(() => { - // Clean up on exiting - unmountComponentAtNode(container); - container.remove(); - container = null; - }); - - // @reactVersion >= 17 - it('should update collapseNodesByDefault setting', () => { - const useContextMock = jest.fn().mockReturnValue({ - collapseNodesByDefault: true, - addListener: jest.fn(), - removeListener: jest.fn(), - }); - - render(, container); - - const toggleElement = container.querySelector('.Settings input[type="checkbox"]'); - - expect(toggleElement.checked).toBe(true); - - toggleElement.click(); - - expect(useContextMock().collapseNodesByDefault).toBe(false); - }); - - it('should update parseHookNames setting', () => { - const setParseHookNamesMock = jest.fn(); - - const useContextMock = jest.fn().mockReturnValue({ - parseHookNames: true, - setParseHookNames: setParseHookNamesMock, - }); - - render(, container); - - const toggleElement = container.querySelector('.Settings input[type="checkbox"]'); - - expect(toggleElement.checked).toBe(true); - - toggleElement.click(); - - expect(setParseHookNamesMock).toHaveBeenCalledWith(false); - }); - - it('should update openInEditorURLPreset setting', () => { - const setLocalStorageMock = jest.spyOn(Storage.prototype, 'setItem'); - - const useContextMock = jest.fn().mockReturnValue({ - openInEditorURLPreset: 'custom', - setOpenInEditorURLPreset: jest.fn(), - }); - - render(, container); - - const selectElement = container.querySelector('.Settings select'); - - expect(selectElement.value).toBe('custom'); - - selectElement.value = 'vscode'; - selectElement.dispatchEvent(new Event('change')); - - expect(setLocalStorageMock).toHaveBeenCalledWith('OPEN_IN_EDITOR_URL_PRESET', 'vscode'); - }); - - it('should update openInEditorURL setting', () => { - const setLocalStorageMock = jest.spyOn(Storage.prototype, 'setItem'); - - const useContextMock = jest.fn().mockReturnValue({ - openInEditorURLPreset: 'custom', - setOpenInEditorURL: jest.fn(), - }); - - render(, container); - - const selectElement = container.querySelector('.Settings select'); - const inputElement = container.querySelector('.Settings input[type="text"]'); - - selectElement.value = 'custom'; - selectElement.dispatchEvent(new Event('change')); - - inputElement.value = 'https://example.com'; - inputElement.dispatchEvent(new Event('change')); - - expect(setLocalStorageMock).toHaveBeenCalledWith('OPEN_IN_EDITOR_URL', 'https://example.com'); - }); - - // Add additional test cases for other functionality... -}); From de9e2c49b5175b718df82323f3594edd2f730ae7 Mon Sep 17 00:00:00 2001 From: Biki-das Date: Tue, 25 Jul 2023 23:31:44 +0530 Subject: [PATCH 10/10] Moved the vs file path above the function --- .../src/devtools/views/Settings/ComponentsSettings.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js index 97822a6ae91b0..492478b0f058d 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js @@ -54,6 +54,8 @@ import type { RegExpComponentFilter, } from 'react-devtools-shared/src/types'; +const vscodeFilepath = 'vscode://file/{path}:{line}'; + export default function ComponentsSettings(_: {}): React.Node { const store = useContext(StoreContext); const {parseHookNames, setParseHookNames} = useContext(SettingsContext); @@ -95,8 +97,6 @@ export default function ComponentsSettings(_: {}): React.Node { getDefaultOpenInEditorURL(), ); - const vscodeFilepath = 'vscode://file/{path}:{line}'; - const [componentFilters, setComponentFilters] = useState< Array, >(() => [...store.componentFilters]);