[dashboard] Adjust Prebuild and Project Configurator pages to spec #5474
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,20 +6,18 @@ | |
|
|
||
| import React, { Suspense, useContext, useEffect, useState } from "react"; | ||
| import { useLocation, useRouteMatch } from "react-router"; | ||
| import { Project, StartPrebuildResult, WorkspaceInstance } from "@gitpod/gitpod-protocol"; | ||
| import PrebuildLogs from "../components/PrebuildLogs"; | ||
| import TabMenuItem from "../components/TabMenuItem"; | ||
| import { getGitpodService } from "../service/service"; | ||
| import { getCurrentTeam, TeamsContext } from "../teams/teams-context"; | ||
| import Header from "../components/Header"; | ||
| import Spinner from "../icons/Spinner.svg"; | ||
| import SpinnerDark from "../icons/SpinnerDark.svg"; | ||
| import PrebuildLogsEmpty from "../images/prebuild-logs-empty.svg"; | ||
| import PrebuildLogsEmptyDark from "../images/prebuild-logs-empty-dark.svg"; | ||
| import { ThemeContext } from "../theme-context"; | ||
| import { PrebuildInstanceStatus } from "./Prebuilds"; | ||
|
|
||
| const MonacoEditor = React.lazy(() => import('../components/MonacoEditor')); | ||
|
|
||
|
|
@@ -69,8 +67,8 @@ export default function () { | |
| const [ isEditorDisabled, setIsEditorDisabled ] = useState<boolean>(true); | ||
| const [ isDetecting, setIsDetecting ] = useState<boolean>(true); | ||
| const [ prebuildWasTriggered, setPrebuildWasTriggered ] = useState<boolean>(false); | ||
| const [ startPrebuildResult, setStartPrebuildResult ] = useState<StartPrebuildResult | undefined>(); | ||
| const [ prebuildInstance, setPrebuildInstance ] = useState<WorkspaceInstance | undefined>(); | ||
| const { isDark } = useContext(ThemeContext); | ||
|
|
||
| useEffect(() => { | ||
|
|
@@ -97,12 +95,17 @@ export default function () { | |
| const guessedConfigStringPromise = getGitpodService().server.guessProjectConfiguration(project.id); | ||
| const repoConfigString = await getGitpodService().server.fetchProjectRepositoryConfiguration(project.id); | ||
| if (repoConfigString) { | ||
| setIsDetecting(false); | ||
| setEditorMessage(<EditorMessage type="warning" heading="Configuration already exists in git." message="Run a prebuild or open a new workspace to edit project configuration."/>); | ||
| setGitpodYml(repoConfigString); | ||
| return; | ||
| } | ||
| if (project.config && project.config['.gitpod.yml']) { | ||
| setIsDetecting(false); | ||
| setIsEditorDisabled(false); | ||
| setGitpodYml(project.config['.gitpod.yml']); | ||
| return; | ||
| } | ||
| const guessedConfigString = await guessedConfigStringPromise; | ||
| setIsDetecting(false); | ||
| setIsEditorDisabled(false); | ||
|
|
@@ -111,10 +114,6 @@ export default function () { | |
| setGitpodYml(guessedConfigString); | ||
| 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); | ||
| })(); | ||
|
|
@@ -126,25 +125,24 @@ export default function () { | |
| } | ||
| // (event.target as HTMLButtonElement).disabled = true; | ||
| setEditorMessage(null); | ||
| if (!!startPrebuildResult) { | ||
| setStartPrebuildResult(undefined); | ||
| } | ||
| try { | ||
| setPrebuildWasTriggered(true); | ||
| if (!isEditorDisabled) { | ||
| await getGitpodService().server.setProjectConfiguration(project.id, gitpodYml); | ||
| } | ||
| const result = await getGitpodService().server.triggerPrebuild(project.id, null); | ||
| setStartPrebuildResult(result); | ||
| } catch (error) { | ||
| setPrebuildWasTriggered(false); | ||
| setEditorMessage(<EditorMessage type="warning" heading="Could not run prebuild." message={String(error).replace(/Error: Request \w+ failed with message: /, '')}/>); | ||
| } | ||
| } | ||
|
|
||
| const onInstanceUpdate = (instance: WorkspaceInstance) => { | ||
| setPrebuildInstance(instance); | ||
| } | ||
|
|
||
| useEffect(() => { document.title = 'Configure Project — Gitpod' }, []); | ||
|
|
@@ -166,23 +164,25 @@ export default function () { | |
| </Suspense> | ||
| {isDetecting && <div className="absolute h-full w-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center space-x-2"> | ||
| <img className="h-5 w-5 animate-spin" src={isDark ? SpinnerDark : Spinner} /> | ||
| <span className="font-semibold text-gray-400">Detecting project configuration ...</span> | ||
|
There was a problem hiding this comment. praise: Thanks for changing this! New message makes more sense for loading an existing project with a git based configuration. There was a problem hiding this comment. question: This is taking noticeably more time sometimes, like 4-5 seconds or more when there's no git based configuration. Expected? There was a problem hiding this comment. Yes, I think we should look if we can do that ahead of time. There was a problem hiding this comment. We could also probably optimize the "config inferrer": It currently makes repository requests one by one (e.g. "does a Fetching the entire repo structure (not necessarily file content or history) in one go, and using that to respond to the "config inferrer"'s queries would already be a huge performance boost. There was a problem hiding this comment. Now tracked as #5527 |
||
| </div>} | ||
| </div> | ||
| <div className="flex-1 h-96 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex flex-col"> | ||
| <div className="flex-grow flex">{startPrebuildResult | ||
| ? <PrebuildLogs workspaceId={startPrebuildResult.wsid} onInstanceUpdate={onInstanceUpdate} /> | ||
| : (!prebuildWasTriggered && <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-lg 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="gp-link" 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 space-x-2"> | ||
| {prebuildWasTriggered && <PrebuildInstanceStatus prebuildInstance={prebuildInstance} isDark={isDark} />} | ||
| <div className="flex-grow" /> | ||
| {(prebuildInstance?.status.phase === "stopped" && !prebuildInstance?.status.conditions.failed) | ||
| ? <a className="my-auto" href={`/#${project?.cloneUrl}`}><button className="secondary">New Workspace</button></a> | ||
| : <button disabled={true} className="secondary">New Workspace</button>} | ||
| <button disabled={isDetecting || (prebuildWasTriggered && prebuildInstance?.status.phase !== "stopped")} onClick={buildProject}>Run Prebuild</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
@@ -196,51 +196,4 @@ function EditorMessage(props: { heading: string, message: string, type: 'success | |
| </div>; | ||
| } | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
@@ -385,7 +385,7 @@ export default function NewProject() { | |||||||
|
|
||||||||
| return (<div className="flex flex-col w-96 mt-24 mx-auto items-center"> | ||||||||
| <h1>New Project</h1> | ||||||||
| <p className="text-gray-500 text-center text-base">Select a git repository on <strong>{provider}</strong>. (<a className="gp-link cursor-pointer" onClick={() => setShowGitProviders(true)}>change</a>)</p> | ||||||||
|
There was a problem hiding this comment. praise: Thanks for making this more visible! There was a problem hiding this comment. suggestion: I think using just the verb change could go unoticed and confuse some users. Following the discussion in #5120 (comment) and the second iteration of the designs for repository selection in #4948, we could use a more verbose message here or below the repositories list. What do you think?
|
||||||||
|
|
||||||||
| {!selectedRepo && renderSelectRepository()} | ||||||||
|
|
||||||||
|
|
||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
issue: This is probably out of the scope of these changes but noticed that it takes a while to redirect to the configuration page once you select a team. Is this expected or needed? Cc @AlexTugarev
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
True, @AlexTugarev noticed a UI freeze, and I did too today. Maybe it's indeed MonacoEditor? (It's loaded lazily in the Configurator, in order not to make the entire dashboard slower)