From d392c6e6589577ee6309bf9dc6a0ea0034ad65ae Mon Sep 17 00:00:00 2001 From: VitaliiShpital Date: Thu, 2 Apr 2020 14:28:25 +0300 Subject: [PATCH] web/satellite: copy api key container reworked Change-Id: I51945d260095605327cd36e2f7d6e51f4044a429 --- .../billing/paymentMethods/PaymentMethods.vue | 6 +- .../components/apiKeys/ApiKeysCopyPopup.vue | 121 ++++++++---------- .../src/components/common/VButton.vue | 2 +- .../static/images/apiKeys/copyButtonLabel.svg | 6 - .../__snapshots__/AddStorjForm.spec.ts.snap | 4 +- .../__snapshots__/PaymentMethods.spec.ts.snap | 16 +-- .../unit/apiKeys/ApiKeysCopyPopup.spec.ts | 9 +- .../__snapshots__/ApiKeysArea.spec.ts.snap | 4 +- .../ApiKeysCopyPopup.spec.ts.snap | 44 +------ .../ApiKeysCreationPopup.spec.ts.snap | 4 +- .../common/__snapshots__/VButton.spec.ts.snap | 18 +-- .../__snapshots__/NewProjectArea.spec.ts.snap | 8 +- .../NewProjectPopup.spec.ts.snap | 8 +- .../__snapshots__/ProjectDetails.spec.ts.snap | 8 +- 14 files changed, 83 insertions(+), 175 deletions(-) delete mode 100644 web/satellite/static/images/apiKeys/copyButtonLabel.svg diff --git a/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue index 4cfb9cf26..3784ebe85 100644 --- a/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue +++ b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue @@ -288,15 +288,15 @@ export default class PaymentMethods extends Vue { display: flex; justify-content: center; align-items: center; - width: 123px; - height: 48px; + width: 125px; + height: 50px; position: absolute; top: 0; right: 0; cursor: pointer; border-radius: 6px; background-color: #2683ff; - font-family: 'font_bold', sans-serif; + font-family: 'font_medium', sans-serif; font-size: 16px; line-height: 23px; color: #fff; diff --git a/web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue b/web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue index d9f4c0d17..d93e41d31 100644 --- a/web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue +++ b/web/satellite/src/components/apiKeys/ApiKeysCopyPopup.vue @@ -8,24 +8,24 @@

{{ apiKeySecret }}

-
- -

Copy

-
+

Copy

-
+
+ Next Step: - Create a Bucket & Upload an Object -> + Set Up Uplink CLI -
-
- +
@@ -35,17 +35,14 @@ import { Component, Prop, Vue } from 'vue-property-decorator'; import HeaderlessInput from '@/components/common/HeaderlessInput.vue'; - -import CopyButtonLabelIcon from '@/../static/images/apiKeys/copyButtonLabel.svg'; -import CloseCrossIcon from '@/../static/images/common/closeCross.svg'; +import VButton from '@/components/common/VButton.vue'; import { SegmentEvent } from '@/utils/constants/analyticsEventNames'; @Component({ components: { + VButton, HeaderlessInput, - CopyButtonLabelIcon, - CloseCrossIcon, }, }) export default class ApiKeysCopyPopup extends Vue { @@ -58,24 +55,23 @@ export default class ApiKeysCopyPopup extends Vue { private readonly apiKeySecret: string; /** - * Indicates if link to doc should appear after api key secret copy. + * Closes popup. */ - public isLinkVisible: boolean = false; - public onCloseClick(): void { this.$emit('closePopup'); - this.isLinkVisible = false; } /** * Copies api key secret to buffer. */ public onCopyClick(): void { - this.isLinkVisible = true; this.$copyText(this.apiKeySecret); this.$notify.success('Key saved to clipboard'); } + /** + * Tracks if user checked uplink CLI docs. + */ public segmentTrack(): void { this.$segment.track(SegmentEvent.CLI_DOCS_VIEWED, { email: this.$store.getters.user.email, @@ -121,36 +117,54 @@ export default class ApiKeysCopyPopup extends Vue { word-break: break-all; } } + + &__copy-button { + padding: 11px 22px; + margin: 0 0 0 20px; + background: #fff; + border-radius: 6px; + font-size: 15px; + cursor: pointer; + color: #2683ff; + + &:hover { + color: #fff; + background-color: #2683ff; + } + } } - &__link-container { + &__next-step-area { display: flex; justify-content: flex-end; align-items: center; width: 100%; - height: 21px; + + &__label { + font-size: 15px; + line-height: 49px; + letter-spacing: -0.100741px; + color: #a0a0a0; + margin-right: 15px; + } &__link { - font-size: 16px; - line-height: 21px; - text-decoration: underline; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #2683ff; + border-radius: 6px; + width: 154px; + height: 38px; + font-size: 15px; + line-height: 22px; color: #2683ff; - } - } + margin-right: 15px; - &__close-cross-container { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - right: 29px; - top: 29px; - height: 24px; - width: 24px; - cursor: pointer; - - &:hover .close-cross-svg-path { - fill: #2683ff; + &:hover { + color: #fff; + background-color: #2683ff; + } } } @@ -165,29 +179,4 @@ export default class ApiKeysCopyPopup extends Vue { opacity: 0.3; } } - - .copy-button { - display: flex; - background-color: #2683ff; - padding: 13px 36px; - cursor: pointer; - align-items: center; - justify-content: space-between; - color: #fff; - border: 1px solid #2683ff; - box-sizing: border-box; - border-radius: 8px; - font-size: 14px; - font-family: 'font_bold', sans-serif; - margin-left: 10px; - - &__label { - margin: 0 0 0 5px; - user-select: none; - } - - &:hover { - background-color: #196cda; - } - } diff --git a/web/satellite/src/components/common/VButton.vue b/web/satellite/src/components/common/VButton.vue index e68b5ecd8..5f27ab647 100644 --- a/web/satellite/src/components/common/VButton.vue +++ b/web/satellite/src/components/common/VButton.vue @@ -7,7 +7,7 @@ :class="containerClassName" :style="style" @click="onPress"> -

{{label}}

+ {{label}} diff --git a/web/satellite/static/images/apiKeys/copyButtonLabel.svg b/web/satellite/static/images/apiKeys/copyButtonLabel.svg deleted file mode 100644 index a4c988752..000000000 --- a/web/satellite/static/images/apiKeys/copyButtonLabel.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap index 08ecfc441..0171de9c1 100644 --- a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap +++ b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/AddStorjForm.spec.ts.snap @@ -20,9 +20,7 @@ exports[`AddStorjForm renders correctly 1`] = `
-
-

Continue to Coin Payments

-
+
Continue to Coin Payments
`; diff --git a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap index c670f71d0..085b315bf 100644 --- a/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap +++ b/web/satellite/tests/unit/account/billing/paymentMethods/__snapshots__/PaymentMethods.spec.ts.snap @@ -49,9 +49,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 1`] =
-
-

Continue to Coin Payments

-
+
Continue to Coin Payments
@@ -70,9 +68,7 @@ exports[`PaymentMethods renders correctly after add STORJ and cancel click 2`] =

Payment Method

-
-

Add STORJ

-
+
Add STORJ
@@ -162,9 +158,7 @@ exports[`PaymentMethods renders correctly with card 1`] = `

Payment Method

-
-

Add STORJ

-
+
Add STORJ
@@ -232,9 +226,7 @@ exports[`PaymentMethods renders correctly without card 1`] = `

Payment Method

-
-

Add STORJ

-
+
Add STORJ
diff --git a/web/satellite/tests/unit/apiKeys/ApiKeysCopyPopup.spec.ts b/web/satellite/tests/unit/apiKeys/ApiKeysCopyPopup.spec.ts index 18c459419..f3fb3fc50 100644 --- a/web/satellite/tests/unit/apiKeys/ApiKeysCopyPopup.spec.ts +++ b/web/satellite/tests/unit/apiKeys/ApiKeysCopyPopup.spec.ts @@ -25,7 +25,7 @@ const testKey = 'test'; const store = new Vuex.Store({ modules: { notificationsModule, apiKeysModule }}); describe('ApiKeysCopyPopup', () => { - it('renders correctly', async () => { + it('renders correctly', async (): Promise => { const wrapper = mount(ApiKeysCopyPopup, { store, localVue, @@ -36,13 +36,10 @@ describe('ApiKeysCopyPopup', () => { }); expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('.save-api-popup__copy-area__key-area__key').text()).toBe(testKey); - - await wrapper.find('.copy-button').trigger('click'); - expect(wrapper).toMatchSnapshot(); + await expect(wrapper.find('.save-api-popup__copy-area__key-area__key').text()).toBe(testKey); }); - it('function onCloseClick works correctly', async () => { + it('function onCloseClick works correctly', async (): Promise => { const wrapper = mount(ApiKeysCopyPopup, { store, localVue, diff --git a/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap b/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap index 808100be7..e9963b5de 100644 --- a/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap +++ b/web/satellite/tests/unit/apiKeys/__snapshots__/ApiKeysArea.spec.ts.snap @@ -26,9 +26,7 @@ exports[`ApiKeysArea renders empty screen with add key prompt 1`] = `
-
-

Back to Billing

-
-
-

Next

-
+
Back to Billing
+
Next
diff --git a/web/satellite/tests/unit/project/__snapshots__/NewProjectPopup.spec.ts.snap b/web/satellite/tests/unit/project/__snapshots__/NewProjectPopup.spec.ts.snap index 57151c4cf..77ac85a3e 100644 --- a/web/satellite/tests/unit/project/__snapshots__/NewProjectPopup.spec.ts.snap +++ b/web/satellite/tests/unit/project/__snapshots__/NewProjectPopup.spec.ts.snap @@ -34,12 +34,8 @@ exports[`NewProjectPopup.vue renders correctly 1`] = `
-
-

Back to Billing

-
-
-

Next

-
+
Back to Billing
+
Next
diff --git a/web/satellite/tests/unit/project/__snapshots__/ProjectDetails.spec.ts.snap b/web/satellite/tests/unit/project/__snapshots__/ProjectDetails.spec.ts.snap index 576cebaed..6b057c407 100644 --- a/web/satellite/tests/unit/project/__snapshots__/ProjectDetails.spec.ts.snap +++ b/web/satellite/tests/unit/project/__snapshots__/ProjectDetails.spec.ts.snap @@ -20,12 +20,8 @@ exports[`ProjectDetails.vue editing works correctly 1`] = `
-
-

Cancel

-
-
-

Save

-
+
Cancel
+
Save