[dashboard] Update Project Configurator UX

Author: jankeromnes

components/dashboard/src/components/MonacoEditor.tsx

@@ -8,7 +8,46 @@ import { useContext, useEffect, useRef } from "react";
 import * as monaco from "monaco-editor";
 import { ThemeContext } from "../theme-context";
 
-export default function MonacoEditor(props: { classes: string, disabled?: boolean, language: string, value: string, onChange: (value: string) => void }) {
+monaco.editor.defineTheme('gitpod', {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {},
+});
+monaco.editor.defineTheme('gitpod-disabled', {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#F5F5F4', // Tailwind's warmGray 100 https://tailwindcss.com/docs/customizing-colors
+  },
+});
+monaco.editor.defineTheme('gitpod-dark', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#292524', // Tailwind's warmGray 800 https://tailwindcss.com/docs/customizing-colors
+  },
+});
+monaco.editor.defineTheme('gitpod-dark-disabled', {
+  base: 'vs-dark',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.background': '#44403C', // Tailwind's warmGray 700 https://tailwindcss.com/docs/customizing-colors
+  },
+});
+
+export interface MonacoEditorProps {
+  classes: string;
+  disabled?: boolean;
+  language: string;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export default function MonacoEditor(props: MonacoEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
   const { isDark } = useContext(ThemeContext);
@@ -22,10 +61,21 @@ export default function MonacoEditor(props: { classes: string, disabled?: boolea
           enabled: false,
         },
         renderLineHighlight: 'none',
+        lineNumbers: 'off',
+        glyphMargin: false,
+        folding: false,
       });
       editorRef.current.onDidChangeModelContent(() => {
         props.onChange(editorRef.current!.getValue());
       });
+      // 8px top margin: https://github.com/Microsoft/monaco-editor/issues/1333
+      editorRef.current.changeViewZones(accessor => {
+        accessor.addZone({
+          afterLineNumber: 0,
+          heightInPx: 8,
+          domNode: document.createElement('div'),
+        });
+      });
     }
     return () => editorRef.current?.dispose();
   }, []);
@@ -37,14 +87,13 @@ export default function MonacoEditor(props: { classes: string, disabled?: boolea
   }, [ props.value ]);
 
   useEffect(() => {
-    monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs');
-  }, [ isDark ]);
-
-  useEffect(() => {
+    monaco.editor.setTheme(props.disabled
+      ? (isDark ? 'gitpod-dark-disabled' : 'gitpod-disabled')
+      : (isDark ? 'gitpod-dark' : 'gitpod'));
     if (editorRef.current) {
       editorRef.current.updateOptions({ readOnly: props.disabled });
     }
-  }, [ props.disabled ]);
+  }, [ props.disabled, isDark ]);
 
   return <div className={props.classes} ref={containerRef} />;
 }

components/dashboard/src/components/PrebuildLogs.tsx

@@ -11,7 +11,12 @@ import { getGitpodService } from "../service/service";
 
 const WorkspaceLogs = React.lazy(() => import('./WorkspaceLogs'));
 
-export default function PrebuildLogs(props: { workspaceId?: string }) {
+export interface PrebuildLogsProps {
+  workspaceId?: string;
+  onInstanceUpdate?: (instance: WorkspaceInstance) => void;
+}
+
+export default function PrebuildLogs(props: PrebuildLogsProps) {
   const [ workspace, setWorkspace ] = useState<Workspace | undefined>();
   const [ workspaceInstance, setWorkspaceInstance ] = useState<WorkspaceInstance | undefined>();
   const [ error, setError ] = useState<Error | undefined>();
@@ -54,6 +59,9 @@ export default function PrebuildLogs(props: { workspaceId?: string }) {
   }, [ props.workspaceId ]);
 
   useEffect(() => {
+    if (props.onInstanceUpdate && workspaceInstance) {
+      props.onInstanceUpdate(workspaceInstance);
+    }
     switch (workspaceInstance?.status.phase) {
       // unknown indicates an issue within the system in that it cannot determine the actual phase of
       // a workspace. This phase is usually accompanied by an error.
@@ -107,16 +115,9 @@ export default function PrebuildLogs(props: { workspaceId?: string }) {
     }
   }, [ workspaceInstance?.status.phase ]);
 
-  return <>
-    <Suspense fallback={<div />}>
-      <WorkspaceLogs classes="h-64 w-full" logsEmitter={logsEmitter} errorMessage={error?.message} />
-    </Suspense>
-    <div className="mt-2 flex justify-center space-x-2">
-      {workspaceInstance?.status.phase === 'stopped'
-        ? <a href={workspace?.contextURL ? '/#' + workspace.contextURL.replace(/^prebuild/, '') : undefined}><button>Open Workspace</button></a>
-        : <button className="secondary disabled" disabled={true}>Open Workspace</button> }
-    </div>
-  </>;
+  return <Suspense fallback={<div />}>
+    <WorkspaceLogs classes="h-full w-full" logsEmitter={logsEmitter} errorMessage={error?.message} />
+  </Suspense>;
 }
 
 export function watchHeadlessLogs(instanceId: string, onLog: (chunk: string) => void, checkIsDone: () => Promise<boolean>): DisposableCollection {

components/dashboard/src/components/WorkspaceLogs.tsx

@@ -5,10 +5,20 @@
  */
 
 import EventEmitter from 'events';
-import { useEffect, useRef } from 'react';
+import { useContext, useEffect, useRef } from 'react';
 import { Terminal, ITerminalOptions, ITheme } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit'
 import 'xterm/css/xterm.css';
+import { ThemeContext } from '../theme-context';
+
+const darkTheme: ITheme = {
+  background: '#292524', // Tailwind's warmGray 800 https://tailwindcss.com/docs/customizing-colors
+};
+const lightTheme: ITheme = {
+  background: '#F5F5F4', // Tailwind's warmGray 100 https://tailwindcss.com/docs/customizing-colors
+  foreground: '#78716C', // Tailwind's warmGray 500 https://tailwindcss.com/docs/customizing-colors
+  cursor: '#78716C', // Tailwind's warmGray 500 https://tailwindcss.com/docs/customizing-colors
+}
 
 export interface WorkspaceLogsProps {
   logsEmitter: EventEmitter;
@@ -20,25 +30,25 @@ export default function WorkspaceLogs(props: WorkspaceLogsProps) {
   const xTermParentRef = useRef<HTMLDivElement>(null);
   const terminalRef = useRef<Terminal>();
   const fitAddon = new FitAddon();
+  const { isDark } = useContext(ThemeContext);
 
   useEffect(() => {
     if (!xTermParentRef.current) {
       return;
     }
-    const theme: ITheme = {};
     const options: ITerminalOptions = {
       cursorBlink: false,
       disableStdin: true,
       fontSize: 14,
-      theme,
+      theme: darkTheme,
       scrollback: 9999999,
     };
     const terminal = new Terminal(options);
     terminalRef.current = terminal;
     terminal.loadAddon(fitAddon);
     terminal.open(xTermParentRef.current);
     props.logsEmitter.on('logs', logs => {
-      if (fitAddon && terminal && logs) {
+      if (terminal && logs) {
         terminal.write(logs);
       }
     });
@@ -53,7 +63,7 @@ export default function WorkspaceLogs(props: WorkspaceLogsProps) {
     let timeout: NodeJS.Timeout | undefined;
     const onWindowResize = () => {
       clearTimeout(timeout!);
-      timeout = setTimeout(() => fitAddon!.fit(), 20);
+      timeout = setTimeout(() => fitAddon.fit(), 20);
     };
     window.addEventListener('resize', onWindowResize);
     return function cleanUp() {
@@ -68,7 +78,14 @@ export default function WorkspaceLogs(props: WorkspaceLogsProps) {
     }
   }, [ terminalRef.current, props.errorMessage ]);
 
-  return <div className={`mt-6 ${props.classes || 'h-72 w-11/12 lg:w-3/5'} rounded-xl bg-black relative`}>
+  useEffect(() => {
+    if (!terminalRef.current) {
+      return;
+    }
+    terminalRef.current.setOption('theme', isDark ? darkTheme : lightTheme);
+  }, [ terminalRef.current, isDark ]);
+
+  return <div className={`${props.classes || 'mt-6 h-72 w-11/12 lg:w-3/5 rounded-xl overflow-hidden'} bg-gray-100 dark:bg-gray-800 relative`}>
     <div className="absolute top-0 left-0 bottom-0 right-0 m-6" ref={xTermParentRef}></div>
   </div>;
 }