console: prevent react-ace to use a service worker

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/6778
GitOrigin-RevId: 0a00b924bcc7b9dc0c7b465dc4d05a67549fd329

console/src/components/Common/AceEditor/BaseEditor.tsx

@@ -21,6 +21,7 @@ const Editor: React.FC<EditorProps> = ({ mode, editorRef, ...props }) => {
       tabSize={2}
       setOptions={{
         showLineNumbers: true,
+        useWorker: false,
       }}
       {...props}
     />

console/src/components/Common/ConfigureTransformation/CustomEditors/JsonEditor.tsx

@@ -67,6 +67,7 @@ const JsonEditor: React.FC<JsonEditorProps> = ({
         height={height || '200px'}
         width={width || '100%'}
         showPrintMargin={false}
+        setOptions={{ useWorker: false }}
       />
     </>
   );

console/src/components/Common/ConfigureTransformation/CustomEditors/TemplateEditor.tsx

@@ -86,6 +86,7 @@ const TemplateEditor: React.FC<TemplateEditorProps> = ({
         setOptions={{
           enableBasicAutocompletion: true,
           enableLiveAutocompletion: true,
+          useWorker: false,
         }}
       />
     </>

console/src/components/Common/ConfigureTransformation/PayloadOptionsTransforms.tsx

@@ -204,6 +204,7 @@ const PayloadOptionsTransforms: React.FC<PayloadOptionsTransformsProps> = ({
             style={{ background: '#e2e8f0' }}
             setOptions={{
               highlightGutterLine: false,
+              useWorker: false,
             }}
             readOnly
           />

console/src/components/Common/CustomInputTypes/JsonInput.js

@@ -103,6 +103,7 @@ const JsonInput = props => {
             exec: handleEditorExec,
           },
         ]}
+        setOptions={{ useWorker: false }}
       />
     );
   };

console/src/components/Common/CustomInputTypes/TextInput.js

@@ -118,6 +118,7 @@ const TextInput = props => {
             exec: handleEditorExec,
           },
         ]}
+        setOptions={{ useWorker: false }}
       />
     );
   };

console/src/components/Services/Actions/Codegen/CodeTabs.js

@@ -61,6 +61,7 @@ const CodeTabs = ({
       value: content.trim(),
       readOnly: true,
       mode: getLanguageModeFromExtension(getFileExtensionFromFilename(name)),
+      setOptions: { useWorker: false },
     };
     return (
       <Tab eventKey={name} title={name} key={name}>

console/src/components/Services/Actions/Codegen/DerivedFrom.js

@@ -38,6 +38,7 @@ const DerivedFrom = ({ shouldDerive, parentMutation, toggleDerivation }) => {
         width={'600px'}
         height={'200px'}
         readOnly
+        setOptions={{ useWorker: false }}
       />
     </div>
   );

console/src/components/Services/Actions/Common/components/GlobalTypesViewer.tsx

@@ -41,6 +41,7 @@ const GlobalTypes: React.FC<InjectedProps> = ({ allTypes }) => {
           style={{ background: '#e2e8f0' }}
           setOptions={{
             highlightGutterLine: false,
+            useWorker: false,
           }}
           readOnly
         />

console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx

@@ -102,6 +102,7 @@ const GraphQLEditor: React.FC<GraphQLEditorProps> = ({
           width={width || '600px'}
           showPrintMargin={false}
           readOnly={readOnlyMode}
+          setOptions={{ useWorker: false }}
         />
       </div>
     </Analytics>

console/src/components/Services/ApiExplorer/Rest/Details.tsx

@@ -111,6 +111,7 @@ const DetailsComponent: React.FC<DetailsComponentProps> = ({
               width="100%"
               mode="graphqlschema"
               readOnly
+              setOptions={{ useWorker: false }}
             />
           </div>
           <div className="h-full w-1/2 pl-xl">

console/src/components/Services/ApiExplorer/Rest/List.tsx

@@ -119,6 +119,7 @@ const ListComponent: React.FC<Props> = ({
                             height="300px"
                             mode="graphqlschema"
                             readOnly
+                            setOptions={{ useWorker: false }}
                           />
                         </CollapsibleToggle>
                       </div>

console/src/components/Services/Common/Notification.tsx

@@ -92,6 +92,7 @@ export const getNotificationDetails = (
         minLines={1}
         maxLines={25}
         width="100%"
+        setOptions={{ useWorker: false }}
       />
       {children}
     </div>

console/src/components/Services/Data/Common/Components/ConstraintExpandedContent.js

@@ -45,6 +45,7 @@ export const ConstraintExpandedContent = ({
           fontSize={15}
           width="100%"
           showPrintMargin={false}
+          setOptions={{ useWorker: false }}
         />
       </div>
     </div>

console/src/components/Services/Data/RawSQL/RawSQL.js

@@ -321,6 +321,7 @@ const RawSQL = ({
           onChange={handleSQLChange}
           // prevents unwanted frequent event triggers
           debounceChangePeriod={200}
+          setOptions={{ useWorker: false }}
         />
       </div>
     );

console/src/components/Services/Data/Schema/TemplateGallery/TemplateGalleryModal.tsx

@@ -97,7 +97,7 @@ export const TemplateGalleryModalBody: React.VFC<{
         width="100%"
         showGutter={false}
         showPrintMargin={false}
-        setOptions={{ showLineNumbers: false }}
+        setOptions={{ showLineNumbers: false, useWorker: false }}
         maxLines={150}
       />
     </div>

console/src/components/Services/Data/TableModify/ComputedFieldsEditor.tsx

@@ -204,6 +204,7 @@ const ComputedFieldsEditor: React.FC<ComputedFieldsEditorProps> = ({
               maxLines={100}
               width="100%"
               showPrintMargin={false}
+              setOptions={{ useWorker: false }}
             />
           </div>
         );

console/src/components/Services/Data/TableModify/TriggerEditorList.js

@@ -111,6 +111,7 @@ const TriggerEditorList = ({ tableSchema, dispatch }) => {
               width="100%"
               showPrintMargin={false}
               className="mt-xs"
+              setOptions={{ useWorker: false }}
             />
             {commentText && (
               <div className="text-gray-500 mt-sm">{commentText}</div>

console/src/components/Services/Data/TablePermissions/JSONEditor.tsx

@@ -65,6 +65,7 @@ const JSONEditor: React.FC<JSONEditorProps> = ({
       showPrintMargin={false}
       value={value}
       annotations={annotations}
+      setOptions={{ useWorker: false }}
     />
   );
 };

console/src/components/Services/Events/AdhocEvents/Add/Add.tsx

@@ -80,6 +80,7 @@ const Add: React.FC<Props> = ({ dispatch }) => {
           value={payload}
           onChange={setState.payload}
           height="200px"
+          setOptions={{ useWorker: false }}
         />
       </FormSection>
       <CollapsibleToggle

console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx

@@ -98,6 +98,7 @@ const Form: React.FC<Props> = props => {
           value={payload}
           onChange={setState.payload}
           height="200px"
+          setOptions={{ useWorker: false }}
         />
       </FormSection>
       <CollapsibleToggle

console/src/components/Services/Events/Common/Components/InvocationLogDetails.tsx

@@ -27,6 +27,7 @@ const InvocationLogDetails = ({ requestPayload, responsePayload }: Props) => {
               width="100%"
               showPrintMargin={false}
               showGutter={false}
+              setOptions={{ useWorker: false }}
             />
           </div>
         </Tab>
@@ -43,6 +44,7 @@ const InvocationLogDetails = ({ requestPayload, responsePayload }: Props) => {
               width="100%"
               showPrintMargin={false}
               showGutter={false}
+              setOptions={{ useWorker: false }}
             />
           </div>
         </Tab>

console/src/components/Services/Events/Common/Components/RedeliverEvent.tsx

@@ -78,6 +78,7 @@ const RedeliverEvent: React.FC<Props> = ({
               showPrintMargin={false}
               showGutter={false}
               style={{ backgroundColor: '#fdf9ed', marginTop: '10px' }}
+              setOptions={{ useWorker: false }}
             />
           </div>
           <div className="pl-xs w-1/2">
@@ -102,6 +103,7 @@ const RedeliverEvent: React.FC<Props> = ({
                 backgroundColor: '#fdf9ed',
                 marginTop: '10px',
               }}
+              setOptions={{ useWorker: false }}
             />
           </div>
         </div>

console/src/components/Services/Events/EventTriggers/InvokeManualTrigger/InvokeManualTrigger.js

@@ -112,6 +112,7 @@ class InvokeManualTrigger extends React.PureComponent {
               showPrintMargin={false}
               showGutter={false}
               style={{ backgroundColor: '#fdf9ed', marginTop: '10px' }}
+              setOptions={{ useWorker: false }}
             />
           </div>
           <div className={`pl-0 w-1/2`}>
@@ -130,6 +131,7 @@ class InvokeManualTrigger extends React.PureComponent {
                 backgroundColor: '#fdf9ed',
                 marginTop: '10px',
               }}
+              setOptions={{ useWorker: false }}
             />
           </div>
         </div>

console/src/features/PermissionsForm/components/RowPermissions.tsx

@@ -175,6 +175,7 @@ export const RowPermissionsSection: React.FC<RowPermissionsProps> = ({
                 setValue(rowPermissionsCheckType, SelectedSection.Custom)
               }
               editorProps={{ $blockScrolling: true }}
+              setOptions={{ useWorker: false }}
             />
           </div>
         )}
@@ -214,6 +215,7 @@ export const RowPermissionsSection: React.FC<RowPermissionsProps> = ({
                   setValue(rowPermissionsCheckType, SelectedSection.Custom)
                 }
                 editorProps={{ $blockScrolling: true }}
+                setOptions={{ useWorker: false }}
               />
             </div>
           )}

console/src/features/PermissionsForm/components/RowPermissionsBuilder/RowPermissionBuilder.tsx

@@ -56,6 +56,7 @@ export const RowPermissionBuilder = ({
           name={`${tableName}-json-editor`}
           value={json}
           editorProps={{ $blockScrolling: true }}
+          setOptions={{ useWorker: false }}
         />
       </div>
       <div className="p-6 rounded-lg bg-white border border-gray-200w-full">

console/src/new-components/Form/CodeEditorField.tsx

@@ -6,6 +6,7 @@ import AceEditor, {
   IAceEditorProps,
   ICommandManager,
 } from 'react-ace';
+import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/theme-github';
 import 'ace-builds/src-noconflict/theme-eclipse';
 import 'ace-builds/src-noconflict/ext-language_tools';
@@ -70,7 +71,12 @@ export type CodeEditorFieldProps = FieldWrapperPassThroughProps & {
   disabled?: boolean;
 };
 
-const DEFAULT_EDITOR_OPTIONS = { minLines: 5, maxLines: 8, showGutter: false };
+const DEFAULT_EDITOR_OPTIONS = {
+  minLines: 5,
+  maxLines: 8,
+  showGutter: false,
+  useWorker: false,
+};
 
 export const CodeEditorField: React.FC<CodeEditorFieldProps> = ({
   name,