Skip to content

Commit

Permalink
Install page enhancement: move content to Release information section (…
Browse files Browse the repository at this point in the history 
…#2236)

* Created a new Release information section

* Moved changelog, note, official release channels and, for Enterprise install pages, terms of use to a new release information section on the install page

* Created a new component, <CardWithLink /> for changelog and official releases cards under Release Information, and in future PRs.

* Removed OfficialReleases as that information is now in the Release information section
  • Loading branch information
@heatlikeheatwave
heatlikeheatwave committed Nov 16, 2023
1 parent b7fbe03 commit c798016
Show file tree
Hide file tree
Showing 10 changed files with 294 additions and 266 deletions.
15 changes: 15 additions & 0 deletions src/views/product-downloads-view/components/card-with-link/card-with-link.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/* *
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/

.root {
display: flex;
padding: 16px;
margin-bottom: 24px;
justify-content: space-between;
}

.contentHeading {
margin-bottom: 4px;
}
45 changes: 45 additions & 0 deletions src/views/product-downloads-view/components/card-with-link/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/

// Third-party imports
import { ReactNode } from 'react'

// Global imports
import Card from 'components/card'
import Text from 'components/text'

// Local imports
import s from './card-with-link.module.css'

interface CardWithLinkProps {
heading: string
subheading: string | ReactNode
icon?: ReactNode
link?: ReactNode
}

const CardWithLink = ({
heading,
subheading,
icon,
link,
}: CardWithLinkProps) => {
return (
<Card className={s.root} elevation="base">
{typeof icon !== undefined ? icon : null}
<div className={s.contentContainer}>
<Text className={s.contentHeading} size={200} weight="semibold">
{heading}
</Text>
<Text className={s.contentSubheading} size={200} weight="regular">
{subheading}
</Text>
</div>
{typeof link !== undefined ? link : null}
</Card>
)
}

export default CardWithLink
32 changes: 0 additions & 32 deletions src/views/product-downloads-view/components/downloads-section/downloads-section.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,6 @@
margin-top: 24px;
}

.specialSubHeading {
margin-bottom: 8px;
}

.textAndLinkCard {
align-items: center;
display: flex;
Expand All @@ -64,31 +60,3 @@
.textAndLinkCardVersionLabel {
color: var(--token-color-foreground-faint);
}

.enterpriseLegalNotice {
background-color: var(--token-color-surface-faint);
border-radius: 6px;
border: 1px solid var(--token-color-border-strong);
display: flex;
gap: 12px;
margin-top: 24px;
padding: 16px;
}

.enterpriseLegalNoticeIcon {
color: var(--token-color-foreground-primary);
display: flex;
flex-grow: 0;
flex-shrink: 0;
height: 20px;
width: 20px;
}

.enterpriseLegalNoticeTitle {
color: var(--token-color-foreground-primary);
}

.enterpriseLegalNoticeText {
color: var(--token-color-foreground-primary);
margin-top: 4px;
}
230 changes: 58 additions & 172 deletions src/views/product-downloads-view/components/downloads-section/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,27 @@

// Third-party imports
import { ReactElement, useMemo } from 'react'
import classNames from 'classnames'

// HashiCorp imports
import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
import { IconExternalLink24 } from '@hashicorp/flight-icons/svg-react/external-link-24'
import { IconInfo24 } from '@hashicorp/flight-icons/svg-react/info-24'
import CodeBlock from '@hashicorp/react-code-block'
import CodeTabs from '@hashicorp/react-code-block/partials/code-tabs'

// Global imports
import { trackProductDownload } from 'lib/analytics'
import { useCurrentProduct } from 'contexts'
import { prettyOs } from 'views/product-downloads-view/helpers'
import { useCurrentVersion } from 'views/product-downloads-view/contexts'
import Card from 'components/card'
import MobileDownloadStandaloneLink from 'components/mobile-download-standalone-link'
import Heading, { HeadingProps } from 'components/heading'
import InlineLink from 'components/inline-link'
import MobileStandaloneLink from 'components/mobile-standalone-link'
import MobileDownloadStandaloneLink from 'components/mobile-download-standalone-link'
import Tabs, { Tab } from 'components/tabs'
import Text from 'components/text'
import { trackProductDownload } from 'lib/analytics'
import { useCurrentVersion } from 'views/product-downloads-view/contexts'
import { prettyOs } from 'views/product-downloads-view/helpers'

// Local imports
import { DownloadsSectionProps } from './types'
import { groupDownloadsByOS, groupPackageManagersByOS } from './helpers'
import s from './downloads-section.module.css'
import { PackageManager } from 'views/product-downloads-view/types'
import ReleaseInformationSection from '../release-information'
import s from './downloads-section.module.css'
import { groupDownloadsByOS, groupPackageManagersByOS } from './helpers'
import { DownloadsSectionProps } from './types'

const SHARED_HEADING_LEVEL_3_PROPS = {
className: s.subHeading,
Expand Down Expand Up @@ -139,117 +133,6 @@ const BinaryDownloadsSection = ({
)
}

const ChangelogSection = ({ selectedRelease }) => {
const { name, version } = selectedRelease
return (
<>
<Heading {...SHARED_HEADING_LEVEL_3_PROPS} id="release-information">
Release information
</Heading>
<Card className={s.textAndLinkCard} elevation="base">
<div className={s.textAndLinkCardTextContainer}>
<Text className={s.textAndLinkCardLabel} size={200} weight="semibold">
Changelog
</Text>
<Text
className={s.textAndLinkCardVersionLabel}
size={200}
weight="regular"
>
Version: {version}
</Text>
</div>
<MobileStandaloneLink
ariaLabel={`${name} version ${version} changelog`}
href={`https://github.com/hashicorp/${name}/releases/tag/v${version}`}
size16Icon={<IconExternalLink16 />}
size24Icon={<IconExternalLink24 />}
iconPosition="trailing"
opensInNewTab
text="GitHub"
/>
</Card>
</>
)
}

const NotesSection = ({ selectedRelease }) => {
const currentProduct = useCurrentProduct()
const { name, shasums, shasums_signature, version } = selectedRelease

return (
<>
<Heading
{...SHARED_HEADING_LEVEL_3_PROPS}
className={classNames(
SHARED_HEADING_LEVEL_3_PROPS.className,
s.specialSubHeading
)}
id="notes"
>
Notes
</Heading>
<Text size={200}>
You can find the{' '}
<InlineLink
href={`https://releases.hashicorp.com/${name}/${version}/${shasums}`}
textSize={200}
>
SHA256 checksums for {currentProduct.name} {version}
</InlineLink>{' '}
online and you can{' '}
<InlineLink
href={`https://releases.hashicorp.com/${name}/${version}/${shasums_signature}`}
textSize={200}
>
verify the checksums signature file
</InlineLink>{' '}
which has been signed using{' '}
<InlineLink href="https://www.hashicorp.com/security" textSize={200}>
{"HashiCorp's GPG key"}
</InlineLink>
.
</Text>
</>
)
}

/**
* @TODO replace with InlineAlert
* ref: https://design-system-components-hashicorp.vercel.app/components/alert
*/
const EnterpriseLegalNotice = () => {
return (
<div className={s.enterpriseLegalNotice}>
<IconInfo24 className={s.enterpriseLegalNoticeIcon} />
<div>
<Text
asElement="p"
className={s.enterpriseLegalNoticeTitle}
size={200}
weight="semibold"
>
Terms of use
</Text>
<Text
asElement="p"
className={s.enterpriseLegalNoticeText}
size={200}
weight="regular"
>
The following shall apply unless your organization has a separately
signed Enterprise License Agreement or Evaluation Agreement governing
your use of the package: Enterprise packages in this repository are
subject to the license terms located in the package. Please read the
license terms prior to using the package. Your installation and use of
the package constitutes your acceptance of these terms. If you do not
accept the terms, do not use the package.
</Text>
</div>
</div>
)
}

const DownloadsSection = ({
isEnterpriseMode = false,
packageManagers,
Expand All @@ -266,55 +149,58 @@ const DownloadsSection = ({
)

return (
<div className={s.root}>
<Card elevation="base">
<div className={s.cardHeader}>
<Heading
className={s.operatingSystemTitle}
level={2}
size={300}
id="operating-system"
weight="bold"
>
Operating System
</Heading>
</div>
<Tabs showAnchorLine>
{Object.keys(downloadsByOS).map((os) => {
const packageManagers = packageManagersByOS[os]
const prettyOSName = prettyOs(os)

/**
* TODO: it might be nice to introduce a local Context here with all
* the information needed so that these helper components don't have
* APIs that could potentially require changes with every visual
* change.
*/
return (
<Tab heading={prettyOSName} key={os}>
<div className={s.tabContent}>
{isLatestVersion && (
<PackageManagerSection
packageManagers={packageManagers}
<>
<div className={s.root}>
<Card elevation="base">
<div className={s.cardHeader}>
<Heading
className={s.operatingSystemTitle}
level={2}
size={300}
id="operating-system"
weight="bold"
>
Operating System
</Heading>
</div>
<Tabs showAnchorLine>
{Object.keys(downloadsByOS).map((os) => {
const packageManagers = packageManagersByOS[os]
const prettyOSName = prettyOs(os)

/**
* TODO: it might be nice to introduce a local Context here with all
* the information needed so that these helper components don't have
* APIs that could potentially require changes with every visual
* change.
*/
return (
<Tab heading={prettyOSName} key={os}>
<div className={s.tabContent}>
{isLatestVersion && (
<PackageManagerSection
packageManagers={packageManagers}
prettyOSName={prettyOSName}
/>
)}
<BinaryDownloadsSection
downloadsByOS={downloadsByOS}
os={os}
prettyOSName={prettyOSName}
selectedRelease={selectedRelease}
/>
)}
<BinaryDownloadsSection
downloadsByOS={downloadsByOS}
os={os}
prettyOSName={prettyOSName}
selectedRelease={selectedRelease}
/>
<ChangelogSection selectedRelease={selectedRelease} />
<NotesSection selectedRelease={selectedRelease} />
{isEnterpriseMode ? <EnterpriseLegalNotice /> : null}
</div>
</Tab>
)
})}
</Tabs>
</Card>
</div>
</div>
</Tab>
)
})}
</Tabs>
</Card>
</div>
<ReleaseInformationSection
selectedRelease={selectedRelease}
isEnterpriseMode={isEnterpriseMode}
/>
</>
)
}

Expand Down
4 changes: 2 additions & 2 deletions src/views/product-downloads-view/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@

import DownloadsSection from './downloads-section'
import FeaturedLearnCardsSection from './featured-learn-cards-section'
import OfficialReleasesSection from './official-releases-section'
import PageHeader from './page-header'
import ReleaseInformationSection from './release-information'
import SidecarMarketingCard from './sidecar-marketing-card'

export {
DownloadsSection,
FeaturedLearnCardsSection,
OfficialReleasesSection,
PageHeader,
ReleaseInformationSection,
SidecarMarketingCard,
}
Loading

1 comment on commit c798016

@vercel
Copy link

@vercel vercel bot commented on c798016 Nov 16, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

dev-portal – ./

dev-portal-git-main-hashicorp.vercel.app
dev-portal-hashicorp.vercel.app
docs.hashicorp.com
developer.hashicorp.com

Please sign in to comment.