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.

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

Onboarding page #2730

Merged
merged 14 commits into from
Feb 2, 2024
Merged

Onboarding page #2730

merged 14 commits into from
Feb 2, 2024

Conversation

markphelps
Copy link
Collaborator

@markphelps markphelps commented Feb 1, 2024

Fixes: #2595

Adding onboarding screen to help new users get going on first start

Darkmode

2024-01-31.19.54.48.mp4

Lightmode

2024-01-31.19.55.50.mp4

TODO

  • actually who on first run only, or if there is no data in db (no flags, etc)
  • test more in mobile
  • add onboarding section to either sidebar or support section so users can get back to it if they way
  • prob add some basic ui tests too

Copy link

codecov bot commented Feb 1, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (ebd2b77) 73.03% compared to head (b6535b0) 72.96%.

❗ Current head b6535b0 differs from pull request most recent head 8e9a6e7. Consider uploading reports for the commit 8e9a6e7 to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2730      +/-   ##
==========================================
- Coverage   73.03%   72.96%   -0.08%     
==========================================
  Files          85       85              
  Lines        8374     8374              
==========================================
- Hits         6116     6110       -6     
- Misses       1880     1884       +4     
- Partials      378      380       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…nto onboarding-page

* 'onboarding-page' of https://github.com/flipt-io/flipt:
  docs(examples): added example how to run flipt behind nginx (#2726)
  chore(deps): bump github.com/moby/buildkit in /_tools (#2728)
  feat: UI refs pt1 (#2727)
@markphelps markphelps marked this pull request as ready for review February 1, 2024 22:59
@markphelps markphelps requested a review from a team as a code owner February 1, 2024 22:59
@markphelps
Copy link
Collaborator Author

I still need to figure out how to get it to show on first run by default. perhaps by redirecting the user there if they goto / (default) if there are no [flags, segments, non-default namespaces]?

@GeorgeMac
Copy link
Member

That seems like a reasonable strategy @markphelps
You can always navigate to /flags or /segments right, so it doesn't keep you from getting to the empty page if you so desire.
However, / just won't show /flags if theres no data, it will take you to onboarding.

I still need to figure out how to get it to show on first run by default. perhaps by redirecting the user there if they goto / (default) if there are no [flags, segments, non-default namespaces]?

@markphelps
Copy link
Collaborator Author

cc @julesglad for any UI/UX advice / thoughts

…nto onboarding-page

* 'onboarding-page' of https://github.com/flipt-io/flipt:
  chore(deps-dev): bump playwright from 1.40.1 to 1.41.1 in /ui (#2715)
  chore(deps): bump go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc (#2687)
  chore(deps): bump go.opentelemetry.io/otel/exporters/otlp/otlptrace (#2691)
@markphelps markphelps added the automerge Used by Kodiak bot to automerge PRs label Feb 2, 2024
@kodiakhq kodiakhq bot merged commit 32b7d1c into main Feb 2, 2024
31 checks passed
@kodiakhq kodiakhq bot deleted the onboarding-page branch February 2, 2024 18:45
@julesglad
Copy link
Contributor

julesglad commented Feb 3, 2024

cc @julesglad for any UI/UX advice / thoughts

@markphelps

Hey, there. This is looking good. Just two things I thought I'd mention.

Upon hover, the icon is cut off halfway at the top of the tile. Might be best to push it up a little more so that it doesn't cut off awkwardly. This is purely visual and opinion. Just thought I'd mention it.

Also, on the dark mode, I think that some of the text, particularly the description text, could have more contrast to the black background. It can be a little hard to read, especially if someone is visually impaired.

yquansah added a commit that referenced this pull request Feb 3, 2024
chore(analytics): better error messaging

chore(ui): fix ui linting issues

chore(clickhouse): fix broken test

chore(analytics): fix broken test

chore(deps): bump go.opentelemetry.io/otel/exporters/otlp/otlptrace (#2691)

Bumps [go.opentelemetry.io/otel/exporters/otlp/otlptrace](https://github.com/open-telemetry/opentelemetry-go) from 1.21.0 to 1.22.0.
- [Release notes](https://github.com/open-telemetry/opentelemetry-go/releases)
- [Changelog](https://github.com/open-telemetry/opentelemetry-go/blob/main/CHANGELOG.md)
- [Commits](open-telemetry/opentelemetry-go@v1.21.0...v1.22.0)

---
updated-dependencies:
- dependency-name: go.opentelemetry.io/otel/exporters/otlp/otlptrace
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Mark Phelps <209477+markphelps@users.noreply.github.com>

chore(deps): bump go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc (#2687)

Bumps [go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc](https://github.com/open-telemetry/opentelemetry-go) from 1.21.0 to 1.22.0.
- [Release notes](https://github.com/open-telemetry/opentelemetry-go/releases)
- [Changelog](https://github.com/open-telemetry/opentelemetry-go/blob/main/CHANGELOG.md)
- [Commits](open-telemetry/opentelemetry-go@v1.21.0...v1.22.0)

---
updated-dependencies:
- dependency-name: go.opentelemetry.io/otel/exporters/otlp/otlptrace/otlptracegrpc
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Mark Phelps <209477+markphelps@users.noreply.github.com>

chore(deps-dev): bump playwright from 1.40.1 to 1.41.1 in /ui (#2715)

Bumps [playwright](https://github.com/microsoft/playwright) from 1.40.1 to 1.41.1.
- [Release notes](https://github.com/microsoft/playwright/releases)
- [Commits](microsoft/playwright@v1.40.1...v1.41.1)

---
updated-dependencies:
- dependency-name: playwright
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Mark Phelps <209477+markphelps@users.noreply.github.com>

Onboarding page (#2730)

* chore: redo support page to use grid

* feat(wip): onboarding

* feat: more onboarding

* chore: more fmt

* feat: finish onboarding page

* chore: rm unused icon

* chore: mod tidy

* chore: change up onboarding a bit

chore(analytics): fix cue and json schema tests
@markphelps
Copy link
Collaborator Author

Thank you @julesglad ! I'll get those issues fixed up in another PR before release

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge Used by Kodiak bot to automerge PRs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FLI-751] Proposal: (UI) Onboarding Screen
3 participants