Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: adds welcome page & pull / build buttons #241

Merged
merged 1 commit into from
Mar 28, 2024
Merged

feat: adds welcome page & pull / build buttons #241

merged 1 commit into from
Mar 28, 2024

Conversation

cdrage
Copy link
Contributor

@cdrage cdrage commented Mar 27, 2024 •
edited
Loading

feat: adds welcome page & pull / build buttons

What does this PR do?

  • Updates the welcome / empty screen page so there is no more empty
    descriptions
  • Adds a build / pull button for a test iamge
  • Added API for opening an eternal link
  • If pulling for more than 5 seconds, show a warning

Screenshot / video of UI

Screen.Recording.2024-03-27.at.7.19.12.PM.mov

What issues does this PR fix or reference?

Closes #150

How to test this PR?

Go to the welcome page with no builds, click on the pull / build
buttons.

Signed-off-by: Charlie Drage [email protected]

@cdrage cdrage requested a review from a team as a code owner March 27, 2024 23:20
@cdrage cdrage marked this pull request as draft March 27, 2024 23:23
@cdrage
Copy link
Contributor Author

cdrage commented Mar 27, 2024 •
edited
Loading

@slemeur @deboer-tim

Very simple welcome page that incorporates all that was talked about this week.

Let me know with regards to the design what to improve and then I can add / modify the tests.

TODOs after this PR:

  • On clicking "Build" pre-select the image, this feature will most likely be in following feat: open webview from image action #235
  • Add FINALIZED logo
  • Add a way to get back to the screen (drop down / clickable?) on the bottom of the screen after building.

@slemeur
Copy link
Contributor

slemeur commented Mar 28, 2024

This is very good!

deboer-tim
deboer-tim requested changes Mar 28, 2024
View reviewed changes
Copy link
Contributor

@deboer-tim deboer-tim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking really good. Needs to be rebased and I suggested a few tweaks in wording, but if those were done I'd rather merge and have follow-up PRs for things like keeping some form of this open (vs more commits here).

packages/backend/src/api-impl.ts Outdated
async generateUniqueBuildID(name: string): Promise<string> {
return this.history.getUnusedHistoryName(name);
}

// Pull an image from the registry
async pullImage(imageName: string): Promise<void> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can rebase on main now to pick this up.

packages/frontend/src/lib/BootcEmptyScreen.svelte Outdated
<svelte:component this="{BootcSelkie}" size="120" />
</div>

<h1 class="text-xl pb-4">Welcome to the Bootable Containers image builder!</h1>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're going to have more discussion on which terms to use after this PR, but for now I'd prefer to drop 'the' and 'image builder', i.e. "Welcome to Bootable Containers" and be the intro to bootable containers and not limit ourselves to only building images.

packages/frontend/src/lib/BootcEmptyScreen.svelte Outdated

<p class="text-gray-700 pb-1 max-w-xl">
Create your first disk image by {imageExists ? 'building' : 'pulling'} the <Link
externalRef="{`https://${exampleImage}`}">example image</Link
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"example container image"? Feels like we should keep being really clear about container images vs disk images.

packages/frontend/src/lib/BootcEmptyScreen.svelte Show resolved Hide resolved
packages/frontend/src/lib/upstream/Link.svelte Show resolved Hide resolved
@cdrage cdrage force-pushed the welcome branch 5 times, most recently from 7b1402b to ae83d39 Compare March 28, 2024 20:04
@cdrage
feat: adds welcome page & pull / build buttons
90256db 
### What does this PR do?

* Updates the welcome / empty screen page so there is no more empty
  descriptions
* Adds a build / pull button for a test iamge
* Added API for opening an eternal link
* If pulling for more than 5 seconds, show a warning

### Screenshot / video of UI

<!-- If this PR is changing UI, please include
screenshots or screencasts showing the difference -->

### What issues does this PR fix or reference?

<!-- Include any related issues from Podman Desktop
repository (or from another issue tracker). -->

Closes podman-desktop#150

### How to test this PR?

<!-- Please explain steps to reproduce -->

Go to the welcome page with no builds, click on the pull / build
buttons.

Signed-off-by: Charlie Drage <[email protected]>
@cdrage cdrage marked this pull request as ready for review March 28, 2024 20:06
@cdrage
Copy link
Contributor Author

cdrage commented Mar 28, 2024

Updated to also now preselect the image when going to the build page:

Screen.Recording.2024-03-28.at.4.05.26.PM.mov

@deboer-tim deboer-tim merged commit 1f4508a into podman-desktop:main Mar 28, 2024
4 checks passed
@cdrage cdrage mentioned this pull request Mar 28, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@deboer-tim deboer-tim deboer-tim approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Welcome page
3 participants
@cdrage @slemeur @deboer-tim