determined-ai · ashtonG · Sep 6, 2024 · Sep 6, 2024
@@ -116,7 +116,13 @@ module.exports = {
     'no-empty': ['error', { allowEmptyCatch: false }],
     'no-multi-spaces': ['error', { ignoreEOLComments: true }],
     'no-multiple-empty-lines': ['error', { max: 1, maxBOF: 0, maxEOF: 0 }],
-    'no-restricted-imports': ['error', { patterns: ['..*'] }],
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [{ message: 'Please use components/CodeEditor instead', name: 'hew/CodeEditor' }],
+        patterns: ['..*'],
+      },
+    ],
     'no-throw-literal': 'error',
     'no-trailing-spaces': ['error', {}],
     'no-unused-vars': 'off',

@@ -0,0 +1,13 @@
+import Spinner from 'hew/Spinner';
+import { ComponentPropsWithoutRef, FC, lazy, Suspense } from 'react';
+
+// eslint-disable-next-line no-restricted-imports
+const HewCodeEditor = lazy(() => import('hew/CodeEditor'));
+
+export const CodeEditor: FC<ComponentPropsWithoutRef<typeof HewCodeEditor>> = (props) => (
+  <Suspense fallback={<Spinner spinning tip="Loading code viewer..." />}>
+    <HewCodeEditor {...props} />
+  </Suspense>
+);
+
+export default CodeEditor;
@@ -6,13 +6,13 @@ import Input from 'hew/Input';
 import InputNumber from 'hew/InputNumber';
 import { Modal } from 'hew/Modal';
 import Row from 'hew/Row';
-import Spinner from 'hew/Spinner';
 import { Body } from 'hew/Typography';
 import { Loaded } from 'hew/utils/loadable';
 import yaml from 'js-yaml';
 import _ from 'lodash';
-import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useState } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import useFeature from 'hooks/useFeature';
 import { paths } from 'routes/utils';
 import { continueExperiment, createExperiment } from 'services/api';
@@ -96,8 +96,6 @@ interface ModalState {
   type: ContinueExperimentType;
 }
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 const DEFAULT_MODAL_STATE = {
   config: {},
   configString: '',
@@ -439,15 +437,13 @@ const ExperimentContinueModalComponent = ({
           <Alert message={modalState.configError} showIcon type="error" />
         )}
         {modalIsInAdvancedMode && (
-          <React.Suspense fallback={<Spinner spinning tip="Loading text editor..." />}>
-            <CodeEditor
-              file={Loaded(modalState.configString)}
-              files={[{ key: 'config.yaml' }]}
-              height="40vh"
-              onChange={handleEditorChange}
-              onError={handleError}
-            />
-          </React.Suspense>
+          <CodeEditor
+            file={Loaded(modalState.configString)}
+            files={[{ key: 'config.yaml' }]}
+            height="40vh"
+            onChange={handleEditorChange}
+            onError={handleError}
+          />
         )}
         {!modalIsInAdvancedMode && (
           <Body>

@@ -3,12 +3,12 @@ import Button from 'hew/Button';
 import Form, { hasErrors } from 'hew/Form';
 import Input from 'hew/Input';
 import { Modal } from 'hew/Modal';
-import Spinner from 'hew/Spinner';
 import { Loaded } from 'hew/utils/loadable';
 import yaml from 'js-yaml';
 import _ from 'lodash';
-import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useState } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import useFeature from 'hooks/useFeature';
 import { paths } from 'routes/utils';
 import { createExperiment } from 'services/api';
@@ -85,8 +85,6 @@ interface ModalState {
   type: CreateExperimentType;
 }
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 const DEFAULT_MODAL_STATE = {
   config: {},
   configString: '',
@@ -371,15 +369,13 @@ const ExperimentCreateModalComponent = ({
           <Alert message={modalState.configError} type="error" />
         )}
         {modalState.isAdvancedMode && (
-          <React.Suspense fallback={<Spinner spinning tip="Loading text editor..." />}>
-            <CodeEditor
-              file={Loaded(modalState.configString)}
-              files={[{ key: 'config.yaml' }]}
-              height="40vh"
-              onChange={handleEditorChange}
-              onError={handleError}
-            />
-          </React.Suspense>
+          <CodeEditor
+            file={Loaded(modalState.configString)}
+            files={[{ key: 'config.yaml' }]}
+            height="40vh"
+            onChange={handleEditorChange}
+            onError={handleError}
+          />
         )}
         <Form
           form={form}

@@ -11,6 +11,7 @@ import { number, string, undefined as undefinedType, union } from 'io-ts';
 import yaml from 'js-yaml';
 import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import Link from 'components/Link';
 import useFeature from 'hooks/useFeature';
 import usePermissions from 'hooks/usePermissions';
@@ -80,8 +81,6 @@ interface Props {
   workspace?: Workspace;
 }
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 const JupyterLabModalComponent: React.FC<Props> = ({ workspace }: Props) => {
   const idPrefix = useId();
   const [showFullConfig, setShowFullConfig] = useState(false);

@@ -1,16 +1,14 @@
 import Pivot, { PivotProps } from 'hew/Pivot';
-import Spinner from 'hew/Spinner';
 import { Loaded } from 'hew/utils/loadable';
 import { default as MarkdownViewer } from 'markdown-to-jsx';
 import React, { useMemo } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import useResize from 'hooks/useResize';
 import handleError from 'utils/error';
 
 import css from './Markdown.module.scss';
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 interface Props {
   disabled?: boolean;
   editing?: boolean;
@@ -56,20 +54,13 @@ const Markdown: React.FC<Props> = ({
       {
         children: (
           <div className={css.noOverflow}>
-            <React.Suspense
-              fallback={
-                <div>
-                  <Spinner spinning tip="Loading text editor..." />
-                </div>
-              }>
-              <CodeEditor
-                file={Loaded(markdown)}
-                files={[{ key: 'input.md' }]}
-                height={`${resize.height - 420}px`}
-                onChange={onChange}
-                onError={handleError}
-              />
-            </React.Suspense>
+            <CodeEditor
+              file={Loaded(markdown)}
+              files={[{ key: 'input.md' }]}
+              height={`${resize.height - 420}px`}
+              onChange={onChange}
+              onError={handleError}
+            />
           </div>
         ),
         key: TabType.Edit,

@@ -1,14 +1,13 @@
 import { Loaded } from 'hew/utils/loadable';
 import React from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import { TrialDetails } from 'types';
 import handleError from 'utils/error';
 
 import css from './Metadata.module.scss';
 import Section from './Section';
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 interface Props {
   trial: TrialDetails;
 }

@@ -1,11 +1,11 @@
 import Alert from 'hew/Alert';
-import CodeEditor from 'hew/CodeEditor';
 import { Modal } from 'hew/Modal';
 import { Loadable, Loaded } from 'hew/utils/loadable';
 import { Map } from 'immutable';
 import { useMemoizedObservable } from 'micro-observables';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import useUI, { Mode } from 'components/ThemeProvider';
 import userSettings from 'stores/userSettings';
 import { Json } from 'types';

@@ -11,6 +11,7 @@ import yaml from 'js-yaml';
 import { pick } from 'lodash';
 import React, { Fragment, useCallback, useEffect, useId, useMemo } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import { useAsync } from 'hooks/useAsync';
 import usePermissions from 'hooks/usePermissions';
 import { paths } from 'routes/utils';
@@ -54,8 +55,6 @@ interface Props {
   workspaceId?: number;
 }
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 const WorkspaceCreateModalComponent: React.FC<Props> = ({ onClose, workspaceId }: Props = {}) => {
   const idPrefix = useId();
   const {

@@ -5,6 +5,7 @@ import { TreeNode } from 'hew/utils/types';
 import yaml from 'js-yaml';
 import React, { useMemo } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import { useAsync } from 'hooks/useAsync';
 import { paths } from 'routes/utils';
 import { getExperimentFileFromTree, getExperimentFileTree } from 'services/api';
@@ -15,8 +16,6 @@ import { isSingleTrialExperiment } from 'utils/experiment';
 
 import css from './ExperimentCodeViewer.module.scss';
 
-const CodeEditor = React.lazy(() => import('hew/CodeEditor'));
-
 const configIcon = <Icon name="settings" title="settings" />;
 
 export interface Props {

@@ -1,5 +1,4 @@
 import Alert from 'hew/Alert';
-import CodeEditor from 'hew/CodeEditor';
 import Form from 'hew/Form';
 import Input from 'hew/Input';
 import { Modal } from 'hew/Modal';
@@ -10,6 +9,7 @@ import yaml from 'js-yaml';
 import { useObservable } from 'micro-observables';
 import React, { useCallback, useEffect, useId, useState } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import { createTaskTemplate, updateTaskTemplate, updateTaskTemplateName } from 'services/api';
 import workspaceStore from 'stores/workspaces';
 import { Template, Workspace } from 'types';

@@ -1,10 +1,10 @@
 import Avatar from 'hew/Avatar';
-import CodeEditor from 'hew/CodeEditor';
 import { Modal } from 'hew/Modal';
 import { Label } from 'hew/Typography';
 import yaml from 'js-yaml';
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
+import CodeEditor from 'components/CodeEditor';
 import { NavigationItem } from 'components/NavigationSideBar';
 import { paths } from 'routes/utils';
 import { Template, Workspace } from 'types';