diff --git a/webui/react/.eslintrc.js b/webui/react/.eslintrc.js index 642d9dc8194..e5580880808 100644 --- a/webui/react/.eslintrc.js +++ b/webui/react/.eslintrc.js @@ -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', diff --git a/webui/react/src/components/CodeEditor.tsx b/webui/react/src/components/CodeEditor.tsx new file mode 100644 index 00000000000..37ccd2dc7a3 --- /dev/null +++ b/webui/react/src/components/CodeEditor.tsx @@ -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> = (props) => ( + }> + + +); + +export default CodeEditor; diff --git a/webui/react/src/components/ExperimentContinueModal.tsx b/webui/react/src/components/ExperimentContinueModal.tsx index b653a0f295c..602ccf704e1 100644 --- a/webui/react/src/components/ExperimentContinueModal.tsx +++ b/webui/react/src/components/ExperimentContinueModal.tsx @@ -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 = ({ )} {modalIsInAdvancedMode && ( - }> - - + )} {!modalIsInAdvancedMode && ( diff --git a/webui/react/src/components/ExperimentCreateModal.tsx b/webui/react/src/components/ExperimentCreateModal.tsx index 72cc8649d38..54267932315 100644 --- a/webui/react/src/components/ExperimentCreateModal.tsx +++ b/webui/react/src/components/ExperimentCreateModal.tsx @@ -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 = ({ )} {modalState.isAdvancedMode && ( - }> - - + )}
import('hew/CodeEditor')); - const JupyterLabModalComponent: React.FC = ({ workspace }: Props) => { const idPrefix = useId(); const [showFullConfig, setShowFullConfig] = useState(false); diff --git a/webui/react/src/components/Markdown.tsx b/webui/react/src/components/Markdown.tsx index a358fc45917..af0829b4be4 100644 --- a/webui/react/src/components/Markdown.tsx +++ b/webui/react/src/components/Markdown.tsx @@ -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 = ({ { children: (
- - -
- }> - - + ), key: TabType.Edit, diff --git a/webui/react/src/components/Metadata.tsx b/webui/react/src/components/Metadata.tsx index 42d3695c0d3..de3f921c5d4 100644 --- a/webui/react/src/components/Metadata.tsx +++ b/webui/react/src/components/Metadata.tsx @@ -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; } diff --git a/webui/react/src/components/UserSettingsModal.tsx b/webui/react/src/components/UserSettingsModal.tsx index d80ee0d2dc8..465fc0fa033 100644 --- a/webui/react/src/components/UserSettingsModal.tsx +++ b/webui/react/src/components/UserSettingsModal.tsx @@ -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'; diff --git a/webui/react/src/components/WorkspaceCreateModal.tsx b/webui/react/src/components/WorkspaceCreateModal.tsx index 1ead30c78fa..0a8f0cf130a 100644 --- a/webui/react/src/components/WorkspaceCreateModal.tsx +++ b/webui/react/src/components/WorkspaceCreateModal.tsx @@ -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 = ({ onClose, workspaceId }: Props = {}) => { const idPrefix = useId(); const { diff --git a/webui/react/src/pages/ExperimentDetails/ExperimentCodeViewer.tsx b/webui/react/src/pages/ExperimentDetails/ExperimentCodeViewer.tsx index 6e4d61fc50a..6191485430f 100644 --- a/webui/react/src/pages/ExperimentDetails/ExperimentCodeViewer.tsx +++ b/webui/react/src/pages/ExperimentDetails/ExperimentCodeViewer.tsx @@ -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 = ; export interface Props { diff --git a/webui/react/src/pages/Templates/TemplateCreateModal.tsx b/webui/react/src/pages/Templates/TemplateCreateModal.tsx index fab24813add..24930ea48b5 100644 --- a/webui/react/src/pages/Templates/TemplateCreateModal.tsx +++ b/webui/react/src/pages/Templates/TemplateCreateModal.tsx @@ -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'; diff --git a/webui/react/src/pages/Templates/TemplateViewModal.tsx b/webui/react/src/pages/Templates/TemplateViewModal.tsx index d7de96196cd..a35370f6924 100644 --- a/webui/react/src/pages/Templates/TemplateViewModal.tsx +++ b/webui/react/src/pages/Templates/TemplateViewModal.tsx @@ -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';