id as const

Author: paula-stacho

packages/compass-import-export/src/components/export-code-view.tsx

@@ -11,6 +11,8 @@ import {
   queryAsShellJSString,
 } from '../utils/get-shell-js-string';
 
+export const codeElementId = 'export-collection-code-preview-wrapper';
+
 const containerStyles = css({
   marginBottom: spacing[3],
 });
@@ -74,7 +76,7 @@ function ExportCodeView({
       <Code
         className={codeStyles}
         data-testid="export-collection-code-preview-wrapper"
-        id="export-collection-code-preview-wrapper"
+        id={codeElementId}
         language="javascript"
         copyable
       >

packages/compass-import-export/src/components/export-modal.tsx

@@ -30,7 +30,7 @@ import type { ExportStatus, FieldsToExportOption } from '../modules/export';
 import type { RootExportState } from '../stores/export-store';
 import { SelectFileType } from './select-file-type';
 import { ExportSelectFields } from './export-select-fields';
-import { ExportCodeView } from './export-code-view';
+import { codeElementId, ExportCodeView } from './export-code-view';
 import type { ExportAggregation, ExportQuery } from '../export/export-types';
 import { queryHasProjection } from '../utils/query-has-projection';
 import { FieldsToExportOptions } from './export-field-options';
@@ -250,7 +250,7 @@ function ExportModal({
       open={isOpen}
       setOpen={closeExport}
       data-testid="export-modal"
-      initialFocus="#export-collection-code-preview-wrapper"
+      initialFocus={`#${codeElementId}`}
     >
       <ModalHeader
         title="Export"