Update dashboard to design v122 (Part 1) #9896

somebody1234 · 2024-05-09T07:59:50Z

Pull Request Description

Close Update the Dashboard to Newest Design #9886
- Update style of buttons in Drive Bar
- Move "Home" page into a "Start" dialog
- Remove icons that are no longer needed
- Remove Backend Switcher in top bar - they have now been converted to categories
Incidental changes
- Refactor Backend provider so that both Remote and Local backends are available.
  - This was done because both Cloud and Local backends are now easily accessible by switching tabs - the Local backend no longer has its own views with the hidden category switcher

Important Notes

None

Code review tips

There are a lot of changes in Settings components, for example (and in general, any component that needs to use a backend). However, most of the changes are identical, so only the approach needs to be reviewed - although the settings pages and the other pages should probably be reviewed separately.

Testing instructions

Make sure new/changed features work, as mentioned above (drive bar, start page, drag-n-drop)
Because of the backend changes, all flows in general should be checked, at least at a basic level:
- Sign up/sign in
- Offline mode (bottom link on login screen on desktop app)
- Checking that all settings pages work, both when logged in and not logged in

Screencasts

dashboard-122.mp4

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

~~The documentation has been updated, if necessary.~~
Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
All code follows the
Scala,
Java,
TypeScript,
and
Rust
style guides. In case you are using a language not listed above, follow the Rust style guide.
~~Unit tests have been written where possible.~~

Lots more refactors still need to be done so that both backends are always present

somebody1234 · 2024-05-09T08:03:10Z

I guess I'll avoid stacking the move to tabs on top of this PR, as this is a big PR so there may be a lot of changes needed.

PabloBuchu · 2024-05-20T14:25:57Z

This loader is barely moving when running cloud project

After cmd+r when having project open in progress I no longer see calls projects/<project_id> so I had to reload again to gain access to opened project

somebody1234 · 2024-05-20T14:36:48Z

This loader is barely moving when running cloud project

weird, i seem to be able to reproduce on develop. seems like it might be a regression

somebody1234 · 2024-05-20T15:06:03Z

After cmd+r when having project open in progress I no longer see calls projects/<project_id>

ah. i guess we should store the "currently open project" immediately when the user clicks play, rather than after it actually opens. it's late though so probably won't be fixed today (and possibly will fix on the tabs PR instead.)

MrFlashAccount · 2024-05-24T07:49:37Z

@somebody1234 could you please rebase onto the latest changes so I can review the PR?

somebody1234 · 2024-05-24T08:54:21Z

@MrFlashAccount latest changes pulled.

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx

MrFlashAccount · 2024-05-27T08:51:45Z

app/ide-desktop/lib/dashboard/src/components/AriaComponents/Dialog/Dialog.tsx

@@ -150,6 +152,11 @@ export function Dialog(props: types.DialogProps) {
                  <div className="relative flex-auto overflow-y-auto p-3.5">
                    {typeof children === 'function' ? children(opts) : children}
                  </div>
+                  {closeButton === 'floating' && (
+                    <div className="m-floating-buttons absolute flex gap-1">


Don't use m-floating-buttons or any other custom classes, because they make no sense and breaks style deduplication

style deduplication should not be a concern though

It's always a concern

MrFlashAccount · 2024-05-27T08:54:12Z

app/ide-desktop/lib/dashboard/src/components/dashboard/ProjectIcon.tsx

@@ -204,14 +184,35 @@ export default function ProjectIcon(props: ProjectIconProps) {
  )

  React.useEffect(() => {


Please don't do async logic in useEffect. Use useQuery or useMutation instead.

MrFlashAccount · 2024-05-27T08:54:58Z

app/ide-desktop/lib/dashboard/src/components/dashboard/ProjectIcon.tsx

@@ -272,6 +266,15 @@ export default function ProjectIcon(props: ProjectIconProps) {
          setShouldSwitchPage(event.shouldAutomaticallySwitchPage)
          setIsRunningInBackground(event.runInBackground)
          void openProject(event.runInBackground)
+          void backend.getProjectDetails(item.id, item.parentId, item.title).then(project => {


Do not fetch directly in event handles, use react-query

app/ide-desktop/lib/dashboard/src/components/dashboard/ProjectNameColumn.tsx

MrFlashAccount · 2024-05-27T09:21:20Z

app/ide-desktop/lib/dashboard/src/tailwind.css

@@ -156,11 +156,12 @@
  --auth-link-padding-x: 0.5rem;
  --auth-link-padding-y: 0.25rem;
  --text-link-padding-x: 0.25rem;
+  /* The margin between a floating button and the edge of its window. */
+  --floating-buttons-margin: 1.1875rem;


Don't use custom margins

MrFlashAccount · 2024-05-27T09:22:06Z

app/ide-desktop/lib/dashboard/tailwind.config.js

        'hover-bg': 'rgb(0 0 0 / 10%)',
        frame: 'var(--frame-color)',
        'selected-frame': 'var(--selected-frame-color)',
        'ide-bg': '#ebeef1',
        selected: 'rgb(255 255 255 / 40%)',
+        'not-selected': 'rgb(0 0 0 / 15%)',
+        'window-close': '#ff605c',


use generic names instead of specific names

this is the generic name, this is the macos close color

MrFlashAccount · 2024-05-27T09:22:33Z

app/ide-desktop/lib/dashboard/tailwind.config.js

@@ -94,6 +98,7 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
        'chat-profile-picture': 'var(--chat-profile-picture-size)',
        'selection-brush-border': 'var(--selection-brush-border-width)',
        'button-focus-ring-inset': 'var(--button-focus-ring-inset)',
+        'negative-button-focus-ring-inset': 'calc(var(--button-focus-ring-inset) * -1)',


don't use custom spacings

MrFlashAccount · 2024-05-27T09:23:08Z

app/ide-desktop/lib/dashboard/tailwind.config.js

@@ -345,6 +346,7 @@ export default /** @satisfies {import('tailwindcss').Config} */ ({
        'date-input-calendar-gap': 'var(--date-input-calendar-gap)',
        'context-menu-macos-half-x': 'var(--context-menu-macos-half-width)',
        'context-menu-half-x': 'var(--context-menu-half-width)',
+        'floating-buttons': 'var(--floating-buttons-margin)',


use only generic classes

MrFlashAccount · 2024-05-27T09:23:58Z

app/ide-desktop/lib/dashboard/tailwind.config.js

@@ -498,6 +501,9 @@ inset 0 -36px 51px -51px #00000014`,
            '@apply disabled:opacity-30 [&.disabled]:opacity-30 disabled:cursor-not-allowed [&.disabled]:cursor-not-allowed opacity-50 hover:opacity-75 transition-all':
              '',
          },
+          '.selectable-light': {
+            '@apply opacity-25': '',


don't use appy and custom classes unless you have to

MrFlashAccount · 2024-05-27T09:51:34Z

QA ⛔️

Can we improve the drag experience to look similar to Google Drive? Currently, if user have a lot of assets, the DND button is hidden.
https://github.com/enso-org/enso/assets/61194245/066d2aa7-cbfe-415f-88ac-2e8b4738fa43
Invitations disappeared in settings
Buttons are not aligned (use ariaComponents.Button)

somebody1234 · 2024-05-27T15:02:02Z

re: 3 - most style issues were fixed in the second PR. i figured it's easier to implement it once rather than having to backport. thoughts?

somebody1234 added 10 commits May 8, 2024 21:10

Refactor start page into a dialog; update Drive Bar styles

edb050c

Remove obsolete onSpinnerStateChange event

3c83f6d

Add new UI for dropzone

63301a6

Convert Cloud and Local from backend types to categories

36babfb

Lots more refactors still need to be done so that both backends are always present

WIP: Split useBackend into useRemoteBackend and useLocalBackend

74d3499

Fix type errors

80bbaab

Remove useRemoteBackendStrict from Settings pages

b44d7b1

Minor UI fixes and improvements

b4b191a

Fixes for offline mode

1952ee1

Add variant to UnstyledButton for new button style

55ab258

somebody1234 added CI: No changelog needed Do not require a changelog entry for this PR. x-new-feature Type: new feature request g-dashboard labels May 9, 2024

somebody1234 requested review from PabloBuchu, indiv0 and MrFlashAccount as code owners May 9, 2024 07:59

somebody1234 added 4 commits May 9, 2024 18:26

Prettier

c70f6a0

Merge branch 'develop' into wip/sb/dashboard-122

275fcbc

Fix type errors

d4fdeea

Fix lints

48a24d7

somebody1234 mentioned this pull request May 10, 2024

Move to the Tab layout for Dashboard #9918

Open

4 tasks

somebody1234 added 8 commits May 11, 2024 00:21

Merge branch 'develop' into wip/sb/dashboard-122

93ed518

Prettier

dad5b03

Fix E2E tests

347b1a8

Fix ESLint config

bcff2e5

Lighten extra columns for assets table

380f7e2

Adjust ESLint ignores

c3d3a61

Merge branch 'develop' into wip/sb/dashboard-122

cf9b513

Merge branch 'develop' into wip/sb/dashboard-122

392dcda

somebody1234 added 6 commits May 15, 2024 18:16

Fix lint errors

f6f33ac

Fix error when build.json is missing

2835653

Fix import error

37eb101

Merge branch 'develop' into wip/sb/dashboard-122

6939e00

Merge branch 'develop' into wip/sb/dashboard-122

aa5ccbf

Prettier

d44b8c9

Fix broken spinner animations

fc4793b

Fix projects not continuing to load on reload

3f6f483

Merge branch 'develop' into wip/sb/dashboard-122

0db5c72

MrFlashAccount requested changes May 27, 2024

View reviewed changes

somebody1234 added 3 commits May 27, 2024 23:04

Address code review (part 1)

56cfef9

Address code review (part 2)

866bbe5

WIP: Replace template literal classNames with twMerge or tv

f554be9

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dashboard to design v122 (Part 1) #9896

Update dashboard to design v122 (Part 1) #9896

somebody1234 commented May 9, 2024

somebody1234 commented May 9, 2024

PabloBuchu commented May 20, 2024

somebody1234 commented May 20, 2024

somebody1234 commented May 20, 2024

MrFlashAccount commented May 24, 2024 •

edited

somebody1234 commented May 24, 2024

MrFlashAccount May 27, 2024

somebody1234 May 27, 2024

MrFlashAccount May 27, 2024

somebody1234 May 27, 2024

MrFlashAccount May 27, 2024

MrFlashAccount May 27, 2024

MrFlashAccount May 27, 2024

MrFlashAccount May 27, 2024

somebody1234 May 27, 2024

MrFlashAccount May 27, 2024

MrFlashAccount May 27, 2024

MrFlashAccount May 27, 2024

MrFlashAccount commented May 27, 2024

somebody1234 commented May 27, 2024

		@@ -204,14 +184,35 @@ export default function ProjectIcon(props: ProjectIconProps) {
		)

		React.useEffect(() => {

Update dashboard to design v122 (Part 1) #9896

Are you sure you want to change the base?

Update dashboard to design v122 (Part 1) #9896

Conversation

somebody1234 commented May 9, 2024

Pull Request Description

Important Notes

Code review tips

Testing instructions

Screencasts

Checklist

somebody1234 commented May 9, 2024

PabloBuchu commented May 20, 2024

somebody1234 commented May 20, 2024

somebody1234 commented May 20, 2024

MrFlashAccount commented May 24, 2024 • edited

somebody1234 commented May 24, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MrFlashAccount commented May 27, 2024

somebody1234 commented May 27, 2024

MrFlashAccount commented May 24, 2024 •

edited