[dashboard] Update the Project Configurator design

Author: jankeromnes

components/dashboard/src/components/MonacoEditor.tsx

@@ -22,6 +22,9 @@ 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());

components/dashboard/src/components/WorkspaceLogs.tsx

@@ -82,7 +82,7 @@ export default class WorkspaceLogs extends React.Component<WorkspaceLogsProps, W
   }
 
   render() {
-    return <div className={`mt-6 ${this.props.classes || 'h-72 w-11/12 lg:w-3/5'} rounded-xl bg-black relative`}>
+    return <div className={`${this.props.classes || 'h-72 w-11/12 lg:w-3/5'} rounded-xl bg-black relative`}>
       <div className="absolute top-0 left-0 bottom-0 right-0 m-6" ref={this.xTermParentRef}></div>
     </div>;
   }

components/dashboard/src/icons/Spinner.svg

@@ -11,7 +11,11 @@ import PrebuildLogs from "../components/PrebuildLogs";
 import TabMenuItem from "../components/TabMenuItem";
 import { getGitpodService } from "../service/service";
 import { getCurrentTeam, TeamsContext } from "../teams/teams-context";
-import AlertBox from "../components/AlertBox";
+import Header from "../components/Header";
+import Spinner from "../icons/Spinner.svg";
+import PrebuildLogsEmpty from "../images/prebuild-logs-empty.svg";
+import PrebuildLogsEmptyDark from "../images/prebuild-logs-empty-dark.svg";
+import { ThemeContext } from "../theme-context";
 
 const MonacoEditor = React.lazy(() => import('../components/MonacoEditor'));
 
@@ -56,15 +60,16 @@ export default function () {
   const [ project, setProject ] = useState<Project | undefined>();
   const [ gitpodYml, setGitpodYml ] = useState<string>('');
   const [ dockerfile, setDockerfile ] = useState<string>('');
-  const [ editorError, setEditorError ] = useState<React.ReactNode | null>(null);
+  const [ editorMessage, setEditorMessage ] = useState<React.ReactNode | null>(null);
   const [ selectedEditor, setSelectedEditor ] = useState<'.gitpod.yml'|'.gitpod.Dockerfile'>('.gitpod.yml');
   const [ isEditorDisabled, setIsEditorDisabled ] = useState<boolean>(true);
   const [ workspaceCreationResult, setWorkspaceCreationResult ] = useState<WorkspaceCreationResult | undefined>();
+  const { isDark } = useContext(ThemeContext);
 
   useEffect(() => {
     // Disable editing while loading, or when the config comes from Git.
     setIsEditorDisabled(true);
-    setEditorError(null);
+    setEditorMessage(null);
     if (!teams) {
       return;
     }
@@ -73,19 +78,31 @@ export default function () {
         ? await getGitpodService().server.getTeamProjects(team.id)
         : await getGitpodService().server.getUserProjects());
       const project = projects.find(p => p.name === routeMatch?.params.projectSlug);
-      if (project) {
-        setProject(project);
-        getGitpodService().server.guessProjectConfiguration(project.id).then(conf => console.log('guessed', conf)).catch(err => console.error('could not guess', err));
-        const configString = await getGitpodService().server.fetchProjectRepositoryConfiguration(project.id);
-        if (configString) {
-          // TODO(janx): Link to .gitpod.yml directly instead of just the cloneUrl.
-          setEditorError(<span>A Gitpod configuration already exists in the project's <a className="gp-link" href={project.cloneUrl}>repository</a>.<br/>Please <a className="gp-link" href={`/#${project.cloneUrl}`}>edit it in Gitpod</a> instead.</span>);
-          setGitpodYml(configString);
-        } else {
-          setIsEditorDisabled(false);
-          setGitpodYml(project.config && project.config['.gitpod.yml'] || '');
-        }
+      if (!project) {
+        return;
       }
+      setProject(project);
+      const guessedConfigStringPromise = getGitpodService().server.guessProjectConfiguration(project.id);
+      const repoConfigString = await getGitpodService().server.fetchProjectRepositoryConfiguration(project.id);
+      if (repoConfigString) {
+        // TODO(janx): Link to .gitpod.yml directly instead of just the cloneUrl.
+        setEditorMessage(<EditorMessage type="warning" heading="Configuration already exists in git." message="Run a prebuild and open a new workspace to edit configuration."/>);
+        setGitpodYml(repoConfigString);
+        return;
+      }
+      const guessedConfigString = await guessedConfigStringPromise;
+      setIsEditorDisabled(false);
+      if (guessedConfigString) {
+        setEditorMessage(<EditorMessage type="success" heading="Project type detected." message="You can edit project configuration below before running a prebuild"/>);
+        setGitpodYml(guessedConfigString);
+        return;
+      }
+      if (project.config && project.config['.gitpod.yml']) {
+        setGitpodYml(project.config['.gitpod.yml']);
+        return;
+      }
+      setEditorMessage(<EditorMessage type="warning" heading="Project type could not be detected." message="You can edit project configuration below before running a prebuild."/>);
+      setGitpodYml(TASKS.Other);
     })();
   }, [ teams, team ]);
 
@@ -94,7 +111,7 @@ export default function () {
       return;
     }
     // (event.target as HTMLButtonElement).disabled = true;
-    setEditorError(null);
+    setEditorMessage(null);
     if (!!workspaceCreationResult) {
       setWorkspaceCreationResult(undefined);
     }
@@ -106,40 +123,50 @@ export default function () {
       });
       setWorkspaceCreationResult(result);
     } catch (error) {
-      setEditorError(<span>{String(error)}</span>);
+      setEditorMessage(<EditorMessage type="warning" heading="Could not run prebuild." message={String(error)}/>);
     }
   }
 
   useEffect(() => { document.title = 'Configure Project — Gitpod' }, []);
 
-  return <div className="flex flex-col mt-24 mx-auto items-center">
-    <h1>Configure Project</h1>
-    <p className="text-gray-500 text-center text-base">Fully-automate your project's dev setup. <a className="gp-link" href="https://www.gitpod.io/docs/references/gitpod-yml">Learn more</a></p>
-    <div className="mt-4 w-full flex">
-      <div className="flex-1 m-8">
-        {editorError && <AlertBox className="mb-2">{editorError}</AlertBox>}
-        {!isEditorDisabled && <select className="w-full" defaultValue="" onChange={e => setGitpodYml(e.target.value)}>
-          <option value="" disabled={true}>…</option>
-          {Object.entries(TASKS).map(([ name, value ]) => <option value={value}>{name}</option>)}
-        </select>}
-        {!!dockerfile && <div className="flex justify-center border-b border-gray-200 dark:border-gray-800">
+  return <>
+    <Header title="Configuration" subtitle="View and edit project configuration." />
+    <div className="lg:px-28 px-10 mt-8 flex space-x-4">
+      <div className="w-96 h-96 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex flex-col">
+        <div className="flex bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-600 px-6 pt-3">
           <TabMenuItem name=".gitpod.yml" selected={selectedEditor === '.gitpod.yml'} onClick={() => setSelectedEditor('.gitpod.yml')} />
-          <TabMenuItem name=".gitpod.Dockerfile" selected={selectedEditor === '.gitpod.Dockerfile'} onClick={() => setSelectedEditor('.gitpod.Dockerfile')} />
-        </div>}
+          {!!dockerfile && <TabMenuItem name=".gitpod.Dockerfile" selected={selectedEditor === '.gitpod.Dockerfile'} onClick={() => setSelectedEditor('.gitpod.Dockerfile')} />}
+        </div>
+        {editorMessage}
+        <img className="h-5 w-5 animate-spin" src={Spinner} />
         <Suspense fallback={<div />}>
           {selectedEditor === '.gitpod.yml' &&
-            <MonacoEditor classes="mt-4 w-full h-64" disabled={isEditorDisabled} language="yaml" value={gitpodYml} onChange={setGitpodYml} />}
+            <MonacoEditor classes="w-full flex-grow" disabled={isEditorDisabled} language="yaml" value={gitpodYml} onChange={setGitpodYml} />}
           {selectedEditor === '.gitpod.Dockerfile' &&
-            <MonacoEditor classes="mt-4 w-full h-64" disabled={isEditorDisabled} language="dockerfile" value={dockerfile} onChange={setDockerfile} />}
+            <MonacoEditor classes="w-full flex-grow" disabled={isEditorDisabled} language="dockerfile" value={dockerfile} onChange={setDockerfile} />}
         </Suspense>
-        <div className="mt-2 flex justify-center space-x-2">
-          <button disabled={isEditorDisabled} onClick={buildProject}>Save &amp; Test Configuration</button>
-        </div>
       </div>
-      <div className="flex-1 m-8">
-        <h3 className="text-center">Output</h3>
-        {!!workspaceCreationResult && <PrebuildLogs workspaceId={workspaceCreationResult.createdWorkspaceId} />}
+      <div className="flex-grow h-96 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex flex-col">
+        <div className="flex-grow flex">{workspaceCreationResult
+          ? <PrebuildLogs workspaceId={workspaceCreationResult.createdWorkspaceId} />
+          : <div className="flex-grow flex flex-col items-center justify-center">
+              <img className="w-14" role="presentation" src={isDark ? PrebuildLogsEmptyDark : PrebuildLogsEmpty} />
+              <h3 className="text-center text-gray-500 dark:text-gray-50 mt-4">No Recent Prebuild</h3>
+              <p className="text-center text-base text-gray-500 dark:text-gray-400 mt-2 w-64">Edit the project configuration on the left to get started. <a className="learn-more" href="https://www.gitpod.io/docs/config-gitpod-file/">Learn more</a>.</p>
+            </div>
+        }</div>
+        <div className="h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex">
+          <div className="flex-grow" />
+          <button disabled={isEditorDisabled} onClick={buildProject}>Run Prebuild</button>
+        </div>
       </div>
     </div>
+  </>;
+}
+
+function EditorMessage(props: { heading: string, message: string, type: 'success' | 'warning' }) {
+  return <div className={`p-4 flex flex-col ${props.type === 'success' ? 'bg-green-50 text-green-700' : 'bg-yellow-50 text-yellow-700'}`}>
+    <strong className={`font-semibold ${props.type === 'success' ? 'text-green-800' : 'text-yellow-800'}`}>{props.heading}</strong>
+    <span>{props.message}</span>
   </div>;
 }