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.

Sign up for GitHub

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

fix: the Snap npm link now leads to a specific version of the npm package #20897

Merged
merged 2 commits into from
Sep 25, 2023
Merged

fix: the Snap npm link now leads to a specific version of the npm package #20897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
476a24b
fix: the Snap npm link now leads to a specific version of the npm pac…
HowardBraham Sep 15, 2023
9c47a2a
made the versionPath safer against possible undefined
HowardBraham Sep 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 79 additions & 81 deletions ui/components/app/snaps/snap-authorship-expanded/snap-authorship-expanded.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { getSnapPrefix } from '@metamask/snaps-utils';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Box from '../../../ui/box';
import {
AlignItems,
BackgroundColor,
TextColor,
FLEX_DIRECTION,
TextVariant,
BlockSize,
BorderColor,
AlignItems,
DISPLAY,
BLOCK_SIZES,
JustifyContent,
BorderRadius,
BorderStyle,
Color,
BorderRadius,
Display,
FlexDirection,
FontWeight,
JustifyContent,
TextColor,
TextVariant,
} from '../../../../helpers/constants/design-system';
import {
formatDate,
getSnapName,
removeSnapIdPrefix,
} from '../../../../helpers/utils/util';

import { ButtonLink, Text } from '../../../component-library';
import { getTargetSubjectMetadata } from '../../../../selectors';
import SnapAvatar from '../snap-avatar';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Tooltip from '../../../ui/tooltip/tooltip';
import ToggleButton from '../../../ui/toggle-button';
import { disableSnap, enableSnap } from '../../../../store/actions';
import { useOriginMetadata } from '../../../../hooks/useOriginMetadata';
import { getTargetSubjectMetadata } from '../../../../selectors';
import { disableSnap, enableSnap } from '../../../../store/actions';
import { Box, ButtonLink, Text } from '../../../component-library';
import ToggleButton from '../../../ui/toggle-button';
import Tooltip from '../../../ui/tooltip/tooltip';
import SnapAvatar from '../snap-avatar';
import SnapVersion from '../snap-version/snap-version';

const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
Expand All @@ -46,8 +44,10 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
const snapPrefix = snapId && getSnapPrefix(snapId);
const packageName = snapId && removeSnapIdPrefix(snapId);
const isNPM = snapPrefix === 'npm:';

const versionPath = snap?.version ? `/v/${snap?.version}` : '';
const url = isNPM
? `https://www.npmjs.com/package/${packageName}`
? `https://www.npmjs.com/package/${packageName}${versionPath}`
: packageName;

const subjectMetadata = useSelector((state) =>
Expand Down Expand Up @@ -76,13 +76,13 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
backgroundColor={BackgroundColor.backgroundDefault}
borderColor={BorderColor.borderDefault}
borderWidth={1}
width={BLOCK_SIZES.FULL}
width={BlockSize.Full}
borderRadius={BorderRadius.LG}
>
<Box
alignItems={AlignItems.center}
display={DISPLAY.FLEX}
width={BLOCK_SIZES.FULL}
display={Display.Flex}
width={BlockSize.Full}
paddingLeft={4}
paddingRight={4}
paddingTop={3}
Expand All @@ -94,8 +94,8 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
<Box
marginLeft={4}
marginRight={0}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
flexDirection={FlexDirection.Column}
style={{ overflow: 'hidden' }}
>
<Text ellipsis fontWeight={FontWeight.Medium}>
Expand All @@ -110,69 +110,67 @@ const SnapAuthorshipExpanded = ({ snapId, className, snap }) => {
</Text>
</Box>
</Box>
<Box flexDirection={FLEX_DIRECTION.COLUMN} width={BLOCK_SIZES.FULL}>
<Box
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JustifyContent.spaceBetween}
paddingLeft={4}
paddingTop={4}
paddingBottom={4}
borderColor={BorderColor.borderDefault}
width={BLOCK_SIZES.FULL}
style={{
borderLeft: BorderStyle.none,
borderRight: BorderStyle.none,
}}
>
<Text variant={TextVariant.bodyMd} fontWeight={FontWeight.Medium}>
{t('enabled')}
</Text>
<Box style={{ maxWidth: '52px' }}>
<Tooltip interactive position="left" html={t('snapsToggle')}>
<ToggleButton value={snap?.enabled} onToggle={onToggle} />
</Tooltip>
</Box>
<Box
display={Display.Flex}
flexDirection={FlexDirection.Row}
justifyContent={JustifyContent.spaceBetween}
paddingLeft={4}
paddingTop={4}
paddingBottom={4}
borderColor={BorderColor.borderDefault}
width={BlockSize.Full}
style={{
borderLeft: BorderStyle.none,
borderRight: BorderStyle.none,
}}
>
<Text variant={TextVariant.bodyMd} fontWeight={FontWeight.Medium}>
{t('enabled')}
</Text>
<Box style={{ maxWidth: '52px' }}>
<Tooltip interactive position="left" html={t('snapsToggle')}>
<ToggleButton value={snap?.enabled} onToggle={onToggle} />
</Tooltip>
</Box>
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
padding={4}
width={BLOCK_SIZES.FULL}
>
{installOrigin && installInfo && (
<Box
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JustifyContent.spaceBetween}
width={BLOCK_SIZES.FULL}
>
<Text variant={TextVariant.bodyMd} fontWeight={FontWeight.Medium}>
{t('installOrigin')}
</Text>
<Box
flexDirection={FLEX_DIRECTION.COLUMN}
alignItems={AlignItems.flexEnd}
>
<ButtonLink href={installOrigin.origin} target="_blank">
{installOrigin.host}
</ButtonLink>
<Text color={Color.textMuted}>
{t('installedOn', [
formatDate(installInfo.date, 'dd MMM yyyy'),
])}
</Text>
</Box>
</Box>
)}
</Box>
<Box padding={4} width={BlockSize.Full}>
{installOrigin && installInfo && (
<Box
flexDirection={FLEX_DIRECTION.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
justifyContent={JustifyContent.spaceBetween}
alignItems={AlignItems.center}
marginTop={4}
width={BlockSize.Full}
>
<Text variant={TextVariant.bodyMd} fontWeight={FontWeight.Medium}>
{t('version')}
{t('installOrigin')}
</Text>
<SnapVersion version={snap?.version} url={url} />
<Box
display={Display.Flex}
flexDirection={FlexDirection.Column}
alignItems={AlignItems.flexEnd}
>
<ButtonLink href={installOrigin.origin} target="_blank">
{installOrigin.host}
</ButtonLink>
<Text color={Color.textMuted}>
{t('installedOn', [
formatDate(installInfo.date, 'dd MMM yyyy'),
])}
</Text>
</Box>
</Box>
)}
<Box
display={Display.Flex}
flexDirection={FlexDirection.Row}
justifyContent={JustifyContent.spaceBetween}
alignItems={AlignItems.center}
marginTop={4}
>
<Text variant={TextVariant.bodyMd} fontWeight={FontWeight.Medium}>
{t('version')}
</Text>
<SnapVersion version={snap?.version} url={url} />
</Box>
</Box>
</Box>
Expand Down
10 changes: 7 additions & 3 deletions ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,18 @@ const SnapAuthorshipHeader = ({
const snapPrefix = snapId && getSnapPrefix(snapId);
const packageName = snapId && removeSnapIdPrefix(snapId);
const isNPM = snapPrefix === 'npm:';
const url = isNPM
? `https://www.npmjs.com/package/${packageName}`
: packageName;

const subjectMetadata = useSelector((state) =>
getTargetSubjectMetadata(state, snapId),
);

const versionPath = subjectMetadata?.version
? `/v/${subjectMetadata?.version}`
: '';
const url = isNPM
? `https://www.npmjs.com/package/${packageName}${versionPath}`
: packageName;

const friendlyName = snapId && getSnapName(snapId, subjectMetadata);

return (
Expand Down
Loading