Feat:-Added open in editor to appear by default

packages/react-devtools-shared/src/__tests__/ComponentSettings-test.js

@@ -0,0 +1,102 @@
+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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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(<ComponentsSettings />, 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...
+});

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,32 @@ 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,