Tweak install extension ux #1510

jakolehm · 2020-11-25T06:02:13Z

Tweaks #1456

Signed-off-by: Roman <ixrock@gmail.com>

… in add-cluster-page) Signed-off-by: Roman <ixrock@gmail.com>

Signed-off-by: Roman <ixrock@gmail.com>

…ard` Signed-off-by: Roman <ixrock@gmail.com>

Signed-off-by: Roman <ixrock@gmail.com>

# Conflicts: # src/common/utils/index.ts

Signed-off-by: Roman <ixrock@gmail.com>

# Conflicts: # src/renderer/components/+extensions/extensions.tsx # src/renderer/utils/downloadFile.ts

Signed-off-by: Roman <ixrock@gmail.com>

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

ixrock · 2020-11-25T06:06:17Z

Is it looks better now? Or there are was some useless info? (right column) 🙈

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

jakolehm · 2020-11-25T06:11:30Z

Is it looks better now? Or there are was some useless info? (right column) 🙈

Rewrote texts and took unnecessary information away. This UI is for Lens users, not Lens extension developers.. less is more 🙂 .

ixrock · 2020-11-25T06:13:42Z

Write less, do more © jQuery :D

This UI is for Lens users, not Lens extension developers..

Some users already requested to clean up UI? Or how do you know what they need?

Sebastian for example already has used the tip for getting tarball url from NPM...

ixrock · 2020-11-25T06:31:48Z

src/renderer/components/+extensions/extensions.tsx

+            label="Install"
            onClick={this.addExtensions}


[nit]™ for sake of consistency ^_^

Suggested change

label="Install"

onClick={this.addExtensions}

label="Install"

onClick={this.installExtensions}

jakolehm · 2020-11-25T06:32:54Z

This UI is for Lens users, not Lens extension developers..

Some users already requested to clean up UI? Or how do you know what they need?

Sebastian for example already has used tip for getting tarball url from NPM...

I don't really get your point, this UI is targeted for Lens users so internals of extension API are not exactly what they need to see (or know). That said this PR is just my idea how UI would be cleaner and more user friendly. There are still pieces that needs to be tweaked, for example url input should follow with an icon to browse extension package (see how kubeconfig browse works). But we should improve these in follow-up PRs so that we can get #1456 approved & merged sooner.

Let's wait for other maintainers opinions (especially @miskun & @aleksfront).

aleksfront · 2020-11-25T08:13:39Z

Install button doesn't actually install anything, but shows Open dialog, it can be confusing. For example, when you paste a valid url and hit install, the behavior isn't appears to be right.
Error object needs to be parsed into string and be more clear. Now we have [object Object] notation and some unclear message.

jakolehm · 2020-11-25T08:17:08Z

Install button doesn't actually install anything, but shows Open dialog, it can be confusing. For example, when you paste a valid url and hit install, the behavior isn't appears to be right.

Yes I agree, it's out of scope but we definitely should improve that (I already mentioned that we should streamline input/button to look like kubeconfig input).

Error object needs to be parsed into string and be more clear. Now we have [object Object] notation and some unclear message.

Also out of scope, lets open separate issues about these.

ixrock · 2020-11-25T08:41:03Z

Install button doesn't actually install anything, but shows Open dialog, it can be confusing. For example, when you paste a valid url and hit install, the behavior isn't appears to be right.

Install button designed as single "gateway" to install:

when URL is filled it acts as "install-from-url"
when there is no URL it opens select-files-dialog (but now with simplified UX it's unclear indeed)
also there is no mentioning about D&D support to install files with new layout

Error object needs to be parsed into string and be more clear. Now we have [object Object] notation and some unclear message.

Yeah, this bug is happening when URL is pointing not-a-tar file or non-existing but valid URL, therefore some object/non-stringifiable error is returned and we have [object Object] and other irrelevant error messages.

jakolehm · 2020-11-25T09:02:28Z

Install button doesn't actually install anything, but shows Open dialog, it can be confusing. For example, when you paste a valid url and hit install, the behavior isn't appears to be right.

Install button designed as single "gateway" to install:

when URL is filled it acts as "install-from-url"

when there is no URL it opens select-files-dialog (but now with simplified UX it's unclear indeed)

also there is no mentioning about D&D support to install files with new layout

To me the biggest usability issue here is this single "gateway" button. It's really hard to understand if input field is mandatory or not. That's why I'm suggesting something that we already have in "browse kubeconfig" UI (Add Cluster page). My UI skills are not enough for this kind of change so let's fix these in follow-up PRs 🙂

Drag & drop: maybe we need to put it back.. it's not something that usually is tipped in app UI's but I just realised that we have similar pro-tip in "Add Cluster".

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

…s into tweak_extension_install_1277

jakolehm · 2020-11-25T09:32:39Z

@ixrock d&d pro-tip is back 🎉

ixrock and others added 24 commits November 19, 2020 19:49

Option to install an extension from filesystem/url #1227 -- part 1 (UI)

6624287

Signed-off-by: Roman <ixrock@gmail.com>

DropFileInput: common component to handle droped files (replaced also…

7d28a43

… in add-cluster-page) Signed-off-by: Roman <ixrock@gmail.com>

fix: install via url-string on input.submit

724ee86

Signed-off-by: Roman <ixrock@gmail.com>

ui tweaks & minor fixes

cc28424

Signed-off-by: Roman <ixrock@gmail.com>

Merge remote-tracking branch 'origin/master' into extension_install_1277

3df6c07

more ui/ux tweaks & fixes

97bcb49

Signed-off-by: Roman <ixrock@gmail.com>

layout fixes

51f686c

Signed-off-by: Roman <ixrock@gmail.com>

component renaming: copy-to-click => copy-to-clipboard => `clipbo…

f505dab

…ard` Signed-off-by: Roman <ixrock@gmail.com>

reworks -- part 1

78dcd5d

Signed-off-by: Roman <ixrock@gmail.com>

fix downloading file, added common/utils/downloadFile

9284611

Signed-off-by: Roman <ixrock@gmail.com>

confirm before install, unpack tar first steps

5093262

Signed-off-by: Roman <ixrock@gmail.com>

installation flow, extracting .tgz

88950b0

Signed-off-by: Roman <ixrock@gmail.com>

Merge remote-tracking branch 'origin/master' into extension_install_1277

de93812

# Conflicts: # src/common/utils/index.ts

clean up, fix lint issues

150c3dc

Signed-off-by: Roman <ixrock@gmail.com>

update .azure-pipelines.yml

8b6616a

Signed-off-by: Roman <ixrock@gmail.com>

fixes & refactoring

5fc0c63

Signed-off-by: Roman <ixrock@gmail.com>

Merge remote-tracking branch 'origin/master' into extension_install_1277

e460b3f

# Conflicts: # src/renderer/components/+extensions/extensions.tsx # src/renderer/utils/downloadFile.ts

fix lint harder :/

12c3422

Signed-off-by: Roman <ixrock@gmail.com>

fix validation

d050d6c

Signed-off-by: Roman <ixrock@gmail.com>

fix validation harder

1c17420

Signed-off-by: Roman <ixrock@gmail.com>

responding to comments, fixed package validation

55c284f

Signed-off-by: Roman <ixrock@gmail.com>

common/utils/tar.ts: reject with Error-type

639bc1a

Signed-off-by: Roman <ixrock@gmail.com>

fix: unit-tests

4c3a8e2

Signed-off-by: Roman <ixrock@gmail.com>

tweak install extension ux

a6aa2bc

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

jakolehm added enhancement New feature or request area/ui area/extension Something to related to the extension api labels Nov 25, 2020

jakolehm added this to the 4.0.0 milestone Nov 25, 2020

jakolehm requested a review from a team November 25, 2020 06:02

ixrock approved these changes Nov 25, 2020

View reviewed changes

tweak more

8f2c302

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

ixrock mentioned this pull request Nov 25, 2020

Allow to install packed extensions from URL or local file #1456

Merged

5 tasks

ixrock reviewed Nov 25, 2020

View reviewed changes

Base automatically changed from extension_install_1277 to master November 25, 2020 07:55

Merge branch 'master' into tweak_extension_install_1277

f4d72e6

jakolehm added 2 commits November 25, 2020 11:31

put d&d pro-tip back

f63cf68

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

Merge branch 'tweak_extension_install_1277' of github.com:lensapp/len…

25932f0

…s into tweak_extension_install_1277

jakolehm merged commit 8753b2b into master Nov 25, 2020

jakolehm deleted the tweak_extension_install_1277 branch November 25, 2020 09:53

jakolehm mentioned this pull request Nov 25, 2020

Release v4.0.0-rc.1 #1525

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tweak install extension ux #1510

Tweak install extension ux #1510

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 •

edited

Loading

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 •

edited

Loading

ixrock Nov 25, 2020 •

edited

Loading

jakolehm commented Nov 25, 2020

aleksfront commented Nov 25, 2020

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 •

edited

Loading

jakolehm commented Nov 25, 2020

jakolehm commented Nov 25, 2020

Tweak install extension ux #1510

Tweak install extension ux #1510

Conversation

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 • edited Loading

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 • edited Loading

ixrock Nov 25, 2020 • edited Loading

Choose a reason for hiding this comment

jakolehm commented Nov 25, 2020

aleksfront commented Nov 25, 2020

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 • edited Loading

jakolehm commented Nov 25, 2020

jakolehm commented Nov 25, 2020

ixrock commented Nov 25, 2020 •

edited

Loading

ixrock commented Nov 25, 2020 •

edited

Loading

ixrock Nov 25, 2020 •

edited

Loading

ixrock commented Nov 25, 2020 •

edited

Loading