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

Added SiteOrigin and PermissionList components #12832

Merged
merged 17 commits into from Dec 2, 2021
Merged

Conversation

ritave
Copy link
Member

@ritave ritave commented Nov 24, 2021

Changes made to the flow:

Screenshot 2021-11-25 at 18 36 31

Screenshot 2021-11-25 at 18 36 38

@ritave ritave requested a review from a team as a code owner November 24, 2021 18:02
@github-actions
Copy link
Contributor

github-actions bot commented Nov 24, 2021

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot
Copy link
Collaborator

Builds ready [7bc0903]
Page Load Metrics (768 ± 12 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint28781933011354
domContentLoaded7278367662512
load7308367682512
domInteractive7278367662512

highlights:

storybook

@ritave ritave changed the title [WIP] Snaps Install UI flow Added SiteOrigin and PermissionList components Nov 25, 2021
@metamaskbot
Copy link
Collaborator

Builds ready [e98117d]
Page Load Metrics (849 ± 31 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint30091444020799
domContentLoaded75210218486531
load75410218496531
domInteractive75210218486531

highlights:

storybook

Copy link
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!! Some questions and small suggestions. UI components could use some stories.

ui/components/app/permissions-connect-permission-list/permissions-connect-list.stories.js

import React from 'react';

import PermissionsConnectList from '.';

export default {
  title: 'Components/App/PermissionsConnectList',
  id: __filename,
  component: PermissionsConnectList,
  argTypes: {
    permissions: {
      control: 'object',
    },
  },
};

export const DefaultStory = (args) => <PermissionsConnectList {...args} />;

DefaultStory.storyName = 'Default';

DefaultStory.args = {
  permissions: {
    eth_accounts: {
      leftIcon: 'fas fa-eye',
      label: 'eth_accounts',
      rightIcon: null,
    },
  },
};

ui/components/ui/site-origin/site-origin.stories.js

import React from 'react';

import SiteOrigin from '.';

export default {
  title: 'Components/UI/SiteOrigin',
  id: __filename,
  component: SiteOrigin,
  argTypes: {
    siteOrigin: {
      control: 'text',
    },
    iconSrc: {
      control: 'text',
    },
    iconName: {
      control: 'text',
    },
  },
};

export const DefaultStory = (args) => <SiteOrigin {...args} />;

DefaultStory.storyName = 'Default';

DefaultStory.args = {
  siteOrigin: 'https://metamask.io/',
  iconName: 'MetaMask',
  iconSrc: './metamark.svg',
};

@ritave ritave force-pushed the ritave/snaps-install branch 2 times, most recently from a9c4670 to 86447cc Compare November 29, 2021 18:31
@metamaskbot
Copy link
Collaborator

Builds ready [86447cc]
Page Load Metrics (829 ± 28 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint16383637215876
domContentLoaded7539558285828
load7559558295828
domInteractive7539558285828

highlights:

storybook

<div className="permissions-connect-permission-list">
{Object.keys(permissions)
.map((permission) => PERMISSION_TYPES[permission])
.map((permission) => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd prefer that we didn't double map; it seems reasonable to use PERMISSION_TYPES[permission].label, etc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with this ^

Copy link
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UI LGTM!

@hmalik88
Copy link
Contributor

hmalik88 commented Nov 30, 2021

I had two concerns regarding the SiteOrigin component:

  1. I think the white space on the right looks a bit jarring, is there any way we can dial this in? I know you need the max-width property to ensure the ellipsis starts, but I was wondering if it's possible in the CSS to enact this rule only when the text gets to a certain length? Screen Shot 2021-11-30 at 3 52 13 PM
  2. I know @Gudahtt was mentioning the need for the ellipsis to be rtl because of the ending of the url probably being more relevant, but what about scenarios for long URLs where beginning and end are the same but the middle is different? In that case I was wondering if it would be beneficial to add a tooltip that shows the full URL?

@ritave
Copy link
Member Author

ritave commented Dec 1, 2021

@hmalik88 Fixed the max-width

@metamaskbot
Copy link
Collaborator

Builds ready [e0ed8a4]
Page Load Metrics (814 ± 19 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint30495237516881
domContentLoaded7709558134019
load7719558143919
domInteractive7709558134019

highlights:

storybook

@@ -35,6 +36,7 @@ export default function Chip({
'chip--with-right-icon': Boolean(rightIcon),
[`chip--border-color-${borderColor}`]: true,
[`chip--background-color-${backgroundColor}`]: true,
'chip--max-conent': maxContent,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you have a typo here, should be: 'chip--max-content'

Copy link
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good. Left one comment

ui/components/ui/chip/chip.scss Show resolved Hide resolved
@@ -174,7 +174,6 @@ export default class PermissionConnect extends Component {
className="permissions-connect__back"
onClick={() => this.goBack()}
>
<i className="fas fa-chevron-left" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe @holantonela updated the design to keep this

@metamaskbot
Copy link
Collaborator

Builds ready [99a7c0f]
Page Load Metrics (973 ± 29 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint581114330412198
domContentLoaded91611169736029
load91611169736029
domInteractive91611169736029

highlights:

storybook

Copy link
Contributor

@georgewrmarshall georgewrmarshall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tiny comment about self-closing <i/> tag. Shouldn't stop from merging though

@@ -174,7 +174,7 @@ export default class PermissionConnect extends Component {
className="permissions-connect__back"
onClick={() => this.goBack()}
>
<i className="fas fa-chevron-left" />
<i className="fas fa-chevron-left"></i>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Could use self-closing tag here

Suggested change
<i className="fas fa-chevron-left"></i>
<i className="fas fa-chevron-left" />

@ritave ritave merged commit 90b656b into develop Dec 2, 2021
@ritave ritave deleted the ritave/snaps-install branch December 2, 2021 17:22
@github-actions github-actions bot locked and limited conversation to collaborators Dec 2, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants