Feat:-Added open in editor to appear by default

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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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
+});

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';
 

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -219,8 +219,11 @@ 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('{path}', source.fileName)
+      .replace('{line}', String(source.lineNumber))
+      .replace('%7Bpath%7D', source.fileName)
+      .replace('%7Bline%7D', String(source.lineNumber));
     window.open(url);
   }, [inspectedElement, editorURL]);
 

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,17 @@ 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<string>(
     LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
     getDefaultOpenInEditorURL(),
   );
 
+  const vscodeFilepath = 'vscode://file/{path}:{line}';
+
   const [componentFilters, setComponentFilters] = useState<
     Array<ComponentFilter>,
   >(() => [...store.componentFilters]);
@@ -280,15 +289,34 @@ export default function ComponentsSettings(_: {}): React.Node {
 
       <label className={styles.OpenInURLSetting}>
         Open in Editor URL:{' '}
-        <input
-          className={styles.Input}
-          type="text"
-          placeholder={process.env.EDITOR_URL ?? 'vscode://file/{path}:{line}'}
-          value={openInEditorURL}
-          onChange={event => {
-            setOpenInEditorURL(event.target.value);
-          }}
-        />
+        <select
+          className={styles.Select}
+          value={openInEditorURLPreset}
+          onChange={({currentTarget}) => {
+            const selectedValue = currentTarget.value;
+            setOpenInEditorURLPreset(selectedValue);
+            if (selectedValue === 'vscode') {
+              setOpenInEditorURL(vscodeFilepath);
+            } else if (selectedValue === 'custom') {
+              setOpenInEditorURL('');
+            }
+          }}>
+          <option value="vscode">VS Code</option>
+          <option value="custom">Custom</option>
+        </select>
+        {openInEditorURLPreset === 'custom' && (
+          <input
+            className={styles.Input}
+            type="text"
+            placeholder={
+              process.env.EDITOR_URL ? process.env.EDITOR_URL : ''
+            }
+            value={openInEditorURL}
+            onChange={event => {
+              setOpenInEditorURL(event.target.value);
+            }}
+          />
+        )}
       </label>
 
       <div className={styles.Header}>Hide components where...</div>

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,