(More pt. 2 pt II) UI-redesign issues

[Tiggles]

Essential

• [x] Shortcuts are only shown for FileBrowse
• [x] Allow user to hide shortcuts, regardless of window width
• [x] SvgCaches are cleared on ResourceBrowser unmount.
• [x] ResourceBrowser deselects rows when dragging outside component.
• [x] Rename "Create SSH key" to "Add SSH key"
• [x] Wrap "Add SSH key" in main-container
• [x] Rename "SSH key" to "Add SSH key" on Add SSH key page
• [x] addProjectListener makes multiple open-calls
• [x] External links are not remapped in Markdown previews (.md files are considered text/code)
• [x] ProductSelector position is off for Drives until a resize happens
• [x] ProductSelector for public links is at the bottom
• [x] "Submit application" button moves to the right when opening the sidebar on hover
• [x] Not enough stat3Width for ProjectInvite
• [x] "Shared by" on "Invites" card on dashboard appears on two lines (Also Project Invites)
• [x] Ellipses are added, even when no folder is present. (Only in one folder in the drive, in the image)
• [x] HTMLTooptip can go below screen height
• [x] Syncthing FileBrowser crash on navigation - Happens on hovering over Tooltip before navigating
• [x] Sidebar navigation crash - (How to reproduce?)
• [x] Simplify ThemeToggle
• [x] Drive-dropdown in FileBrowse makes navbar too wide
• [x] #4168
• [x] Empty resource creation
• [x] Search query issue
• [x] Show shortcuts for embedded, with enough space
• [x] Dashboard listrows should all match resourcebrowser row heights
• [x] Inconsistent padding/margin for operations (See Drive-browse and File-browse)
• [x] Fix missing "Only show member files" when going from My workspace to project
• [x] Center Grant Application page content
• [x] Make search bar twice as big (Resource browser and App search)
• [x] Grant application header styling
• [x] Read/Edit icons from Shares need right margin/padding
• [x] Revert to what was clicked when stopping hovering
• [x] Stats are being pushed by long names (Drives, for instance)
• [x] Syncthing icon alignment on filerow
• [x] Use different colors for shares in sidebar (re-use share folder in FileBrowse)
• [x] user-select/-webkit-user-select should have none set in more places
• [x] Remove text "Resources" from workspaces
• [x] Dead link favorites can't be removed
• [x] Remove headers for link from "Resources" secondary sidebar
• [x] Every secondary sidebar should start at Files icon y-top in primary sidebar
• [x] Rename "Categories" to "Store" in secondary sidebar
• [x] Remove "Dashboard" and "Applications" text from Dashboard and App store
• [x] Invites on Dashboard: Date position is inconsistent between Projects and Shares
• [x] Invites on Dashboard: Tooltip should be added for Avatar
• [x] Invites on Dashboard: Show avatar instead of name
• [x] Show which links are clickable on dashboard, with icon
• [x] DeiC z-index on Dashboard is too dang high
• [x] Dashboard product shows product with wrong monospace font
• [x] Runs in progress should be green
• [x] Providers and products rows should match in height
• [x] Center stats1 and stat2. Right-align stat3
• [x] Remove "Sensitivity" header
• [x] Add tooltip to sensitivity
• [x] Fixed size for stats1..3
• [x] Shortcut styling should match styling on cheatsheet
• [x] Omit shortcuts on smaller screens
• [x] Only show favorite star on hover OR favorite
• [x] Icon sizes should be 30px
• [x] "Manage synchronization" -> "Sync"
• [x] Close context switcher on window scroll
• [x] Input inconsistencies - Font features, margins kerning, maybe
• [x] The blue line under Job Runs should extend all the way, if only possibility
• [x] Search animation on resource browser is missing
• [x] Wobbly icon on Refresh hover (at least on app store) [Edit: Can't reproduce]
• [x] Layout needs to be more consistent (???)
• [x] Move sidebar sticky-button to bottom
• [x] Fix Safari wanting to download App Interfaces instead of downloading them
• [x] Notifications-window doesn't close if open and clicking notification icon
• [x] Sidebar "Sub-projects" goes to "Allocations"(Leaving as is)
• [x] Create public link in modal adds line at the bottom that can't be properly interacted with
• [x] "Info" icon is not centered
• [x] https://github.com/sdu-eScience/uCloud/issues/4141#issuecomment-1976291371
• [x] https://github.com/sdu-eScience/uCloud/issues/4141#issuecomment-1976298934
• [x] https://github.com/sdu-eScience/uCloud/issues/4141#issuecomment-1976307238
• [x] Product selector text is not centered (edit: the table header overlaps with first element)
• [x] Members-UI: "Remove" button is not disabled with tooltip for PI
• [x] Members-UI: Avatars are not re-fetched on project change
• [x] Members-UI: "Remove button" is shown for if user in project
• [x] Members-UI: No re-direct if removing self from project.
• [x] (old bug) Members-UI: Navigating to /app/projects/members with no active project shows blank page instead of redirecting to Dashboard
• [x] Members-UI: Hide or disable "New group" button for users
• [x] Members-UI: Hide move-to-group button for users
• [x] Members-UI: Hide "Remove" button for users
• [x] Members-UI: Add missing "Transfer PI" functionality
• [x] Styling for inline creation inputs in modals is off. See for instance FileBrowse modal and click "Create folder".
• [x] Inline creation for modals doesn't work properly
• [x] Size for .title in ResourceBrowser-rows needs to be equal to full rowsize, minus statRowWidth 1 through 3, and eventual favorite icon and resource icon
• [x] Filter dropdown shortcuts should be right aligned
• [x] Don't group "Upload files" and "Create folder"
• [x] The add-to-hours buttons for jobs don't do what they say. Make the behaviour clearer.
• [x] Job selector column titles width is off
• [x] SKUs page styling is off (Missing hover effect. Missing pointer-cursor. Styling for modal is wrong)
• [x] Next step/Previous step and modal heights for Syncthing for "Add device"-wizard
• [x] Allow deletion of multiple drives
• [x] Confirm buttons in operations list has wrongly sized SVGs
• [x] Confirm buttons' checkmark is red on completion
• [x] User-select in dropdowns should not be here
• [x] Missing License-server placeholder text
• [x] Wrong placeholder color on login
• [x] Syncthing warning does not replace the drive id with the pretty name
• [x] Handle unknown apps
• [x] Revert max-height for contextmenu
• [x] Selector width sizing issue on Chrome
• [x] Rename drive input field overlaps with provider icon
• [x] Delete Drive button lost its color in contextmenu
• [x] FileBrowse: Readonly folders have drag-to-select disabled due to text position of (read-only).
• [x] Move (React-implemented) tooltip to right of cursor with small offset.
• [x] "Show hidden files" missing from FileBrowse
• [x] Breadcrumbs is too eager to truncate paths, even with enough width
• [x] Creating nested paths shows the final folder as the name, instead of the first. (e.g. a/b/c will show c in the current folder, but should show a)

In the middle

• [x] For multi-node jobs, be clear about which nodes you open the terminal or interface to

Minor

• [x] Find use for provider icons next to navbar? (Navigates to drives for now)
• [ ] Generally remove filters for resources
• [x] Favorite icon flicker

[Tiggles]

4095 Previous

[tedyted26]

Creating a folder from the add folder menu when configuring a job, then clicking "use" leaves this on the job parameters

[tedyted26]

Clicking on "Manage syncronization" from modal in any job parameter, and then going back, resets all my job parameters

[tedyted26]

"here" link in "Create ssh" screen has the same color as the rest of the text, even though it's a link

[Tiggles]

[xiroV]

Empty trash modal needs restyling. Could be resized, and doesn't add the background overlay. Also I don't think we use the underline of modal-headings anymore.

Empty-ing of trash redirects to /drives page. Would expect either no redirect, or redirect to the root of the drive that the trash folder belongs to.

[DanThrane]

[Tiggles]

image

Should have been fixed in d4f2dfd149865521bb61263cea1b0b89282c1a86

[tedyted26]

(Not sure if its an issue or a design choice) In job parameters, when using the buttons to add hours, if the current selected hours are less than the hours the button adds, the number does not add up, but changes to the one on the button. For example, having 1h and pressing +8 will result in 8h, not 9. Having 8h and pressing +24 will result in 24h, not 32.

[Tiggles]

It's a design choice, but I'm not sure we're done tuning it yet.

[tedyted26]

Shape (shadow?) of hold to confirm icon, and color of the done icon after holding (its red on a red background)

[DanThrane]

It is not possible to create a folder when selecting an input folder for an app. The enter key does nothing when entering the name.

[DanThrane]

Open terminal and open interface are placed incorrectly with multi-node jobs (I feel like you have mentioned a fix already, but just in case).

[Tiggles]

It is not possible to create a folder when selecting an input folder for an app. The enter key does nothing when entering the name.

Already fixed

[Tiggles]

Job selector styling is off for column titles

[MHvegholm]

Font color difficult to read in some dropdown menus:

• Examples: job creation and grant application page
• Suggestion: Change to white

[MHvegholm]

Workspace > usage leads to error screen, cannot escape without reloading (Crash?) – Only in my workspace

• When clicking on “Workspace” icon or accessing “workspace/usage” page while within “My workspace”, leads to error report page which cannot be left without reloading website ( Crash?)
• Error doesn’t occur when in workspace “Provider Type 1”

[Tiggles]

Workspace > usage leads to error screen, cannot escape without reloading (Crash?) – Only in my workspace

* When clicking on “Workspace” icon or accessing “workspace/usage” page while within “My workspace”, leads to error report page which cannot be left without reloading website ( Crash?)

* Error doesn’t occur when in workspace “Provider Type 1”

I'm not experiencing this on sandbox.dev.cloud.sdu.dk, so I'd like to check your console output the next time you are here. Tested it on MacOS with Firefox, Safari, and Chrome

Edit: this seems to be related to the ucloud-msg format

[MHvegholm]

Suggestion: addition of “jump-to workspace Rootdir/drive selection menu"

• It would be nice if the icon to the left of the displayed path was “click”-able and lead to the drive selection page
• Alternative could be that a root/drive-dir before home (ex. “My workspace”), was shown and “click”-able, leading one back to the drive selection page.
• Would be equivalent to clicking on “files” icon, or “drives” title under files on the sidebar.

[MHvegholm]

Suggestion: Embiggen “star” icon for “starring apps”

[Tiggles]

Favorite icon flicker on file browse component. Maybe related to :hover rule being temporarily disabled? https://github.com/SDU-eScience/UCloud/assets/7610257/77635ad4-37dd-40fa-b6f8-e6ad5b278eed

[DanThrane]

It should not be possible to select text in the flavor dropdown:

Missing placeholder text for license servers:

Placeholder text is invisible on login page (compare this with production):

[Tiggles]

https://github.com/SDU-eScience/UCloud/assets/7610257/8872097f-f04f-4035-aa36-22f4bf76ddb8

[DanThrane]

Surprising behavior during drive creation:

1. Click 'Create drive'
2. Click somewhere else on the screen such that the input loses focus
3. This triggers a creation event which fails due to the title being blank

Generally this is the correct behavior, but I think we should check if the input field is empty. If the input field is empty then we should consider this a cancel instead of a create. If the input field is not empty, then we should continue treating it as a creation request.

[DanThrane]

Search query is not empty.

[JHavstein]

In the 'Files' menu, the buttons Upload files and Create folder have keyboard shortcuts shown in the button (picture 1). These keyboard shortcuts are missing from the same two buttons from the job output page (picture 2). The keyboard shortcuts work in both places.

[DanThrane]

"Launch with..." fails with a 400 bad request from the backend. This is a frontend issue since the wrong request type is being sent. There might still be backend issues once we begin sending the correct request type.

[Tiggles]

https://github.com/SDU-eScience/UCloud/assets/7610257/102e5095-5af1-4b09-95db-a670b2befed6

[DanThrane]

I think we should add an edge-case for jobs running with the unknown application (name = unknown). In this case it should probably skip the application name entirely and just display job name/id.

[Tiggles]

Weirdly, this is partly handled already:

{app.name === "unknown" ? null :
            <Link to={buildQueryString(`/jobs/create`, {app: app.name, version: app.version, import: job.id})}>
                <Button>Run application again</Button>
            </Link>
        }

I think we should add an edge-case for jobs running with the unknown application (name = unknown). In this case it should probably skip the application name entirely and just display job name/id.

[Tiggles]

Not wide enough width for selector (on Chrome)

[DanThrane]

Drive rename field overlaps with provider icon

[Tiggles]

Delete Drive lost it's color

[Tiggles]

Drive-dropdown in FileBrowse is too wide

[Tiggles]

Long breadcrumbs can push context switcher Ellipses are added, even when no folder is present. (Only in one folder in the drive, in the image)

[mrlhansen]

• Refreshing a page that ends with a / in the URL still results in a blank page - not sure if this is UI or not.
• The toogle for light/dark mode looks wrong.
• Title on project settings page is still off to the left.

[xiroV]

A few comments (current dev state):

• "Shared by" on "Invites" card on dashboard appears on two lines,
• Rows on "Recent runs" card and "Grant applications" card on dashboard are selectable, but doesn't have any associated actions.
• Header on files table (and resource tables) could have a text size of 100% instead of 110% (personal opinion).
• As previously discussed (and also mentioned by Frederica), during product selection (during creation of resources, like drives), in case the user has access to resources from multiple providers, it isn't obvious which products belong to which provider. This is clear during machine selection before starting a job for example, but not in most other cases.

[DanThrane]

Markdown preview links are no longer correct due to changes in preview URL.

[Tiggles]

Markdown preview links are no longer correct due to changes in preview URL.

I think I need some more details

[DanThrane]

Sizing of console is slightly wrong (low priority in my opnion)

[mrlhansen]

The issue with URLs ending in a / also causes the link to files to not work here (also, should that really open in a new window?).

[Tiggles]

(also, should that really open in a new window?)

Yes, otherwise the form/arguments are wiped when returning to the page.

[DanThrane]

Browsing files causes GET /api/jobs/retrieveProducts?providers=$PROVIDER_ID and GET /api/iapps/syncthing/retrieve?provider=$PROVIDER_ID&productId=syncthing to be invoked on every folder instead of being cached.

Browsing any of the resources pages causes 3x the same browse request (e.g. GET /api/licenses/browse?itemsPerPage=100&status=READY). Note that all requests send the same parameter, so it is not trying to prefetch multiple pages in this case.

[mrlhansen]

On the SSH keys page (https://dev.cloud.sdu.dk/app/ssh-keys).

• The button "Create SSH key" is maybe a bit misnamed. I would rename it to "Add" or "Upload" instead of "Create".
• When adding a SSH key (https://dev.cloud.sdu.dk/app/ssh-keys/create) the title "SSH keys" is also off to the left. Maybe the title should also be renamed to e.g. "New SSH key". The title text is also quite small (?) but I am not sure if that is just the case in general.

[DanThrane]

Drag-to-select no longer works if you are starting the drag from the "outside". That is not on a row. Similarly, it often doesn't work when dragging to the outside.

[Tiggles]

Did it work before, dragging from the outside in?

[Tiggles]

Next #4177