From 4df205197a7ee26da1d035e8e92f065a26982cf0 Mon Sep 17 00:00:00 2001
From: Nicolas Inchauspe <nicoinch@users.noreply.github.com>
Date: Fri, 18 Nov 2022 17:38:28 +0100
Subject: [PATCH] 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    | 1 +
 .../ConfigureTransformation/CustomEditors/JsonEditor.tsx  | 1 +
 .../CustomEditors/TemplateEditor.tsx                      | 1 +
 .../ConfigureTransformation/PayloadOptionsTransforms.tsx  | 1 +
 .../src/components/Common/CustomInputTypes/JsonInput.js   | 1 +
 .../src/components/Common/CustomInputTypes/TextInput.js   | 1 +
 .../src/components/Services/Actions/Codegen/CodeTabs.js   | 1 +
 .../components/Services/Actions/Codegen/DerivedFrom.js    | 1 +
 .../Actions/Common/components/GlobalTypesViewer.tsx       | 1 +
 .../Services/Actions/Common/components/GraphQLEditor.tsx  | 1 +
 .../src/components/Services/ApiExplorer/Rest/Details.tsx  | 1 +
 console/src/components/Services/ApiExplorer/Rest/List.tsx | 1 +
 console/src/components/Services/Common/Notification.tsx   | 1 +
 .../Data/Common/Components/ConstraintExpandedContent.js   | 1 +
 console/src/components/Services/Data/RawSQL/RawSQL.js     | 1 +
 .../Data/Schema/TemplateGallery/TemplateGalleryModal.tsx  | 2 +-
 .../Services/Data/TableModify/ComputedFieldsEditor.tsx    | 1 +
 .../Services/Data/TableModify/TriggerEditorList.js        | 1 +
 .../Services/Data/TablePermissions/JSONEditor.tsx         | 1 +
 .../components/Services/Events/AdhocEvents/Add/Add.tsx    | 1 +
 .../Services/Events/Common/Components/CronTriggerForm.tsx | 1 +
 .../Events/Common/Components/InvocationLogDetails.tsx     | 2 ++
 .../Services/Events/Common/Components/RedeliverEvent.tsx  | 2 ++
 .../InvokeManualTrigger/InvokeManualTrigger.js            | 2 ++
 .../PermissionsForm/components/RowPermissions.tsx         | 2 ++
 .../RowPermissionsBuilder/RowPermissionBuilder.tsx        | 1 +
 console/src/new-components/Form/CodeEditorField.tsx       | 8 +++++++-
 27 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/console/src/components/Common/AceEditor/BaseEditor.tsx b/console/src/components/Common/AceEditor/BaseEditor.tsx
index e939125ad3e..74b4414cf0f 100644
--- a/console/src/components/Common/AceEditor/BaseEditor.tsx
+++ b/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}
     />
diff --git a/console/src/components/Common/ConfigureTransformation/CustomEditors/JsonEditor.tsx b/console/src/components/Common/ConfigureTransformation/CustomEditors/JsonEditor.tsx
index 20cd141707c..b74f1bbe269 100644
--- a/console/src/components/Common/ConfigureTransformation/CustomEditors/JsonEditor.tsx
+++ b/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 }}
       />
     </>
   );
diff --git a/console/src/components/Common/ConfigureTransformation/CustomEditors/TemplateEditor.tsx b/console/src/components/Common/ConfigureTransformation/CustomEditors/TemplateEditor.tsx
index 039aae16e1d..91f2adcd693 100644
--- a/console/src/components/Common/ConfigureTransformation/CustomEditors/TemplateEditor.tsx
+++ b/console/src/components/Common/ConfigureTransformation/CustomEditors/TemplateEditor.tsx
@@ -86,6 +86,7 @@ const TemplateEditor: React.FC<TemplateEditorProps> = ({
         setOptions={{
           enableBasicAutocompletion: true,
           enableLiveAutocompletion: true,
+          useWorker: false,
         }}
       />
     </>
diff --git a/console/src/components/Common/ConfigureTransformation/PayloadOptionsTransforms.tsx b/console/src/components/Common/ConfigureTransformation/PayloadOptionsTransforms.tsx
index 157450c7629..b21ef2e0a2b 100644
--- a/console/src/components/Common/ConfigureTransformation/PayloadOptionsTransforms.tsx
+++ b/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
           />
diff --git a/console/src/components/Common/CustomInputTypes/JsonInput.js b/console/src/components/Common/CustomInputTypes/JsonInput.js
index f80725cf255..af431b54fbc 100644
--- a/console/src/components/Common/CustomInputTypes/JsonInput.js
+++ b/console/src/components/Common/CustomInputTypes/JsonInput.js
@@ -103,6 +103,7 @@ const JsonInput = props => {
             exec: handleEditorExec,
           },
         ]}
+        setOptions={{ useWorker: false }}
       />
     );
   };
diff --git a/console/src/components/Common/CustomInputTypes/TextInput.js b/console/src/components/Common/CustomInputTypes/TextInput.js
index 676b7bf12e2..35ce70507b9 100644
--- a/console/src/components/Common/CustomInputTypes/TextInput.js
+++ b/console/src/components/Common/CustomInputTypes/TextInput.js
@@ -118,6 +118,7 @@ const TextInput = props => {
             exec: handleEditorExec,
           },
         ]}
+        setOptions={{ useWorker: false }}
       />
     );
   };
diff --git a/console/src/components/Services/Actions/Codegen/CodeTabs.js b/console/src/components/Services/Actions/Codegen/CodeTabs.js
index c3dc8b72229..b6e0b6c5da7 100644
--- a/console/src/components/Services/Actions/Codegen/CodeTabs.js
+++ b/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}>
diff --git a/console/src/components/Services/Actions/Codegen/DerivedFrom.js b/console/src/components/Services/Actions/Codegen/DerivedFrom.js
index 69ec9dfff35..d1f5887326e 100644
--- a/console/src/components/Services/Actions/Codegen/DerivedFrom.js
+++ b/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>
   );
diff --git a/console/src/components/Services/Actions/Common/components/GlobalTypesViewer.tsx b/console/src/components/Services/Actions/Common/components/GlobalTypesViewer.tsx
index ebc095fc453..e5838dc592e 100644
--- a/console/src/components/Services/Actions/Common/components/GlobalTypesViewer.tsx
+++ b/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
         />
diff --git a/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx b/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx
index 2e9c4f146f5..ba16a00487b 100644
--- a/console/src/components/Services/Actions/Common/components/GraphQLEditor.tsx
+++ b/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>
diff --git a/console/src/components/Services/ApiExplorer/Rest/Details.tsx b/console/src/components/Services/ApiExplorer/Rest/Details.tsx
index e2b45f8cfca..7c7457e6463 100644
--- a/console/src/components/Services/ApiExplorer/Rest/Details.tsx
+++ b/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">
diff --git a/console/src/components/Services/ApiExplorer/Rest/List.tsx b/console/src/components/Services/ApiExplorer/Rest/List.tsx
index ef92ca6ffb5..7ed6e3c802d 100644
--- a/console/src/components/Services/ApiExplorer/Rest/List.tsx
+++ b/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>
diff --git a/console/src/components/Services/Common/Notification.tsx b/console/src/components/Services/Common/Notification.tsx
index e6fb75650d1..fd6d33111dc 100644
--- a/console/src/components/Services/Common/Notification.tsx
+++ b/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>
diff --git a/console/src/components/Services/Data/Common/Components/ConstraintExpandedContent.js b/console/src/components/Services/Data/Common/Components/ConstraintExpandedContent.js
index 0fd5234e71c..cfc2ce4e113 100644
--- a/console/src/components/Services/Data/Common/Components/ConstraintExpandedContent.js
+++ b/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>
diff --git a/console/src/components/Services/Data/RawSQL/RawSQL.js b/console/src/components/Services/Data/RawSQL/RawSQL.js
index 4b341d1e1c7..dbd3e242601 100644
--- a/console/src/components/Services/Data/RawSQL/RawSQL.js
+++ b/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>
     );
diff --git a/console/src/components/Services/Data/Schema/TemplateGallery/TemplateGalleryModal.tsx b/console/src/components/Services/Data/Schema/TemplateGallery/TemplateGalleryModal.tsx
index a19f0b53ef9..e6d0904188b 100644
--- a/console/src/components/Services/Data/Schema/TemplateGallery/TemplateGalleryModal.tsx
+++ b/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>
diff --git a/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.tsx b/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.tsx
index 20014d8bcbd..8237ee1d606 100644
--- a/console/src/components/Services/Data/TableModify/ComputedFieldsEditor.tsx
+++ b/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>
         );
diff --git a/console/src/components/Services/Data/TableModify/TriggerEditorList.js b/console/src/components/Services/Data/TableModify/TriggerEditorList.js
index 4d9147a3884..e03d0244a0b 100644
--- a/console/src/components/Services/Data/TableModify/TriggerEditorList.js
+++ b/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>
diff --git a/console/src/components/Services/Data/TablePermissions/JSONEditor.tsx b/console/src/components/Services/Data/TablePermissions/JSONEditor.tsx
index e479e3a0892..96185627f8c 100644
--- a/console/src/components/Services/Data/TablePermissions/JSONEditor.tsx
+++ b/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 }}
     />
   );
 };
diff --git a/console/src/components/Services/Events/AdhocEvents/Add/Add.tsx b/console/src/components/Services/Events/AdhocEvents/Add/Add.tsx
index 53226d5ecd4..1907a38e6c4 100644
--- a/console/src/components/Services/Events/AdhocEvents/Add/Add.tsx
+++ b/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
diff --git a/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx b/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx
index 03800b1139b..c6ad89b33eb 100644
--- a/console/src/components/Services/Events/Common/Components/CronTriggerForm.tsx
+++ b/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
diff --git a/console/src/components/Services/Events/Common/Components/InvocationLogDetails.tsx b/console/src/components/Services/Events/Common/Components/InvocationLogDetails.tsx
index 893049afb8b..2d0088fac27 100644
--- a/console/src/components/Services/Events/Common/Components/InvocationLogDetails.tsx
+++ b/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>
diff --git a/console/src/components/Services/Events/Common/Components/RedeliverEvent.tsx b/console/src/components/Services/Events/Common/Components/RedeliverEvent.tsx
index 4e719c7c841..bcf5dd8f6cd 100644
--- a/console/src/components/Services/Events/Common/Components/RedeliverEvent.tsx
+++ b/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>
diff --git a/console/src/components/Services/Events/EventTriggers/InvokeManualTrigger/InvokeManualTrigger.js b/console/src/components/Services/Events/EventTriggers/InvokeManualTrigger/InvokeManualTrigger.js
index e345332e4f9..055511d4f66 100644
--- a/console/src/components/Services/Events/EventTriggers/InvokeManualTrigger/InvokeManualTrigger.js
+++ b/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>
diff --git a/console/src/features/PermissionsForm/components/RowPermissions.tsx b/console/src/features/PermissionsForm/components/RowPermissions.tsx
index 98d856563cd..94a06f10c52 100644
--- a/console/src/features/PermissionsForm/components/RowPermissions.tsx
+++ b/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>
           )}
diff --git a/console/src/features/PermissionsForm/components/RowPermissionsBuilder/RowPermissionBuilder.tsx b/console/src/features/PermissionsForm/components/RowPermissionsBuilder/RowPermissionBuilder.tsx
index 0420a2aff13..b9ffbf3665c 100644
--- a/console/src/features/PermissionsForm/components/RowPermissionsBuilder/RowPermissionBuilder.tsx
+++ b/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">
diff --git a/console/src/new-components/Form/CodeEditorField.tsx b/console/src/new-components/Form/CodeEditorField.tsx
index 6afc4902499..7e81f08cf12 100644
--- a/console/src/new-components/Form/CodeEditorField.tsx
+++ b/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,