From c79801601c19e941f05103135f6a0a8ba1970277 Mon Sep 17 00:00:00 2001 From: Heat Hamilton <55773810+heatlikeheatwave@users.noreply.github.com> Date: Thu, 16 Nov 2023 16:13:47 -0500 Subject: [PATCH] Install page enhancement: move content to Release information section (#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, 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 --- .../card-with-link/card-with-link.module.css | 15 ++ .../components/card-with-link/index.tsx | 45 ++++ .../downloads-section.module.css | 32 --- .../components/downloads-section/index.tsx | 230 +++++------------- .../components/index.ts | 4 +- .../official-releases-section/index.tsx | 41 ---- .../official-releases-section.module.css | 17 -- .../components/release-information/index.tsx | 159 ++++++++++++ .../release-information.module.css | 14 ++ src/views/product-downloads-view/index.tsx | 3 +- 10 files changed, 294 insertions(+), 266 deletions(-) create mode 100644 src/views/product-downloads-view/components/card-with-link/card-with-link.module.css create mode 100644 src/views/product-downloads-view/components/card-with-link/index.tsx delete mode 100644 src/views/product-downloads-view/components/official-releases-section/index.tsx delete mode 100644 src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css create mode 100644 src/views/product-downloads-view/components/release-information/index.tsx create mode 100644 src/views/product-downloads-view/components/release-information/release-information.module.css diff --git a/src/views/product-downloads-view/components/card-with-link/card-with-link.module.css b/src/views/product-downloads-view/components/card-with-link/card-with-link.module.css new file mode 100644 index 0000000000..df29b33a5d --- /dev/null +++ b/src/views/product-downloads-view/components/card-with-link/card-with-link.module.css @@ -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; +} diff --git a/src/views/product-downloads-view/components/card-with-link/index.tsx b/src/views/product-downloads-view/components/card-with-link/index.tsx new file mode 100644 index 0000000000..bdc6cc5f6b --- /dev/null +++ b/src/views/product-downloads-view/components/card-with-link/index.tsx @@ -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 ( + + {typeof icon !== undefined ? icon : null} +
+ + {heading} + + + {subheading} + +
+ {typeof link !== undefined ? link : null} + + ) +} + +export default CardWithLink diff --git a/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css b/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css index 26bfd22d20..18142d20fe 100644 --- a/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css +++ b/src/views/product-downloads-view/components/downloads-section/downloads-section.module.css @@ -38,10 +38,6 @@ margin-top: 24px; } -.specialSubHeading { - margin-bottom: 8px; -} - .textAndLinkCard { align-items: center; display: flex; @@ -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; -} diff --git a/src/views/product-downloads-view/components/downloads-section/index.tsx b/src/views/product-downloads-view/components/downloads-section/index.tsx index b1f30355d3..773bb9292e 100644 --- a/src/views/product-downloads-view/components/downloads-section/index.tsx +++ b/src/views/product-downloads-view/components/downloads-section/index.tsx @@ -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, @@ -139,117 +133,6 @@ const BinaryDownloadsSection = ({ ) } -const ChangelogSection = ({ selectedRelease }) => { - const { name, version } = selectedRelease - return ( - <> - - Release information - - -
- - Changelog - - - Version: {version} - -
- } - size24Icon={} - iconPosition="trailing" - opensInNewTab - text="GitHub" - /> - - - ) -} - -const NotesSection = ({ selectedRelease }) => { - const currentProduct = useCurrentProduct() - const { name, shasums, shasums_signature, version } = selectedRelease - - return ( - <> - - Notes - - - You can find the{' '} - - SHA256 checksums for {currentProduct.name} {version} - {' '} - online and you can{' '} - - verify the checksums signature file - {' '} - which has been signed using{' '} - - {"HashiCorp's GPG key"} - - . - - - ) -} - -/** - * @TODO replace with InlineAlert - * ref: https://design-system-components-hashicorp.vercel.app/components/alert - */ -const EnterpriseLegalNotice = () => { - return ( -
- -
- - Terms of use - - - 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. - -
-
- ) -} - const DownloadsSection = ({ isEnterpriseMode = false, packageManagers, @@ -266,55 +149,58 @@ const DownloadsSection = ({ ) return ( -
- -
- - Operating System - -
- - {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 ( - -
- {isLatestVersion && ( - +
+ +
+ + Operating System + +
+ + {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 ( + +
+ {isLatestVersion && ( + + )} + - )} - - - - {isEnterpriseMode ? : null} -
- - ) - })} - - -
+
+ + ) + })} + + +
+ + ) } diff --git a/src/views/product-downloads-view/components/index.ts b/src/views/product-downloads-view/components/index.ts index b98593ba0c..678a057e2d 100644 --- a/src/views/product-downloads-view/components/index.ts +++ b/src/views/product-downloads-view/components/index.ts @@ -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, } diff --git a/src/views/product-downloads-view/components/official-releases-section/index.tsx b/src/views/product-downloads-view/components/official-releases-section/index.tsx deleted file mode 100644 index 0dbab6ab86..0000000000 --- a/src/views/product-downloads-view/components/official-releases-section/index.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -import { ReactElement } from 'react' -import CardLink from 'components/card-link' -import Heading from 'components/heading' -import Text from 'components/text' -import viewStyles from 'views/product-downloads-view/product-downloads-view.module.css' -import s from './official-releases-section.module.css' - -const OfficialReleasesSection = (): ReactElement => { - return ( -
- - Looking for more? - - - - Official releases - - - All officially supported HashiCorp release channels and their security - guarantees. - - -
- ) -} - -export default OfficialReleasesSection diff --git a/src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css b/src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css deleted file mode 100644 index 6040584d8c..0000000000 --- a/src/views/product-downloads-view/components/official-releases-section/official-releases-section.module.css +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: MPL-2.0 - */ - -.root { - margin-bottom: 48px; -} - -.cardTitle { - color: var(--token-color-foreground-strong); - margin-bottom: 4px; -} - -.cardBody { - color: var(--token-color-foreground-faint); -} diff --git a/src/views/product-downloads-view/components/release-information/index.tsx b/src/views/product-downloads-view/components/release-information/index.tsx new file mode 100644 index 0000000000..2964acc8f2 --- /dev/null +++ b/src/views/product-downloads-view/components/release-information/index.tsx @@ -0,0 +1,159 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +// Third-party imports +import { ReactElement } from 'react' + +// 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 { IconInfo16 } from '@hashicorp/flight-icons/svg-react/info-16' + +// Global imports +import Heading from 'components/heading' +import InlineLink from 'components/inline-link' +import Text from 'components/text' +import { useCurrentProduct } from 'contexts' +import viewStyles from 'views/product-downloads-view/product-downloads-view.module.css' + +import InlineAlert from 'components/inline-alert' +import MobileStandaloneLink from 'components/mobile-standalone-link' +import { ReleaseVersion } from 'lib/fetch-release-data' +import CardWithLink from '../card-with-link' +import s from './release-information.module.css' + +const NoteCard = ({ selectedRelease }) => { + const currentProduct = useCurrentProduct() + const { name, shasums, shasums_signature, version } = selectedRelease + + return ( + + You can find the{' '} + + SHA256 checksums for {currentProduct.name} {version} + {' '} + online and you can{' '} + + verify the checksums signature file + {' '} + which has been signed using{' '} + + {"HashiCorp's GPG key"} + + . + + } + icon={} + /> + ) +} + +const ChangelogNote = ({ selectedRelease }) => { + const { name, version } = selectedRelease + const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1) + + return ( + <> + } + size24Icon={} + iconPosition="trailing" + opensInNewTab + text="GitHub" + /> + } + /> + + ) +} + +const EnterpriseLegalNote = () => { + return ( + + 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. + + } + color="highlight" + icon={} + /> + ) +} + +const OfficialReleasesCard = () => { + return ( + } + size24Icon={} + iconPosition="trailing" + opensInNewTab + text="View all" + /> + } + /> + ) +} + +interface ReleaseInformationSectionProps { + selectedRelease: ReleaseVersion + isEnterpriseMode: boolean +} + +const ReleaseInformationSection = ({ + selectedRelease, + isEnterpriseMode, +}: ReleaseInformationSectionProps): ReactElement => { + return ( + <> + + Release Information + + + + + {isEnterpriseMode ? : null} + + ) +} + +export default ReleaseInformationSection diff --git a/src/views/product-downloads-view/components/release-information/release-information.module.css b/src/views/product-downloads-view/components/release-information/release-information.module.css new file mode 100644 index 0000000000..c3c68ee3a6 --- /dev/null +++ b/src/views/product-downloads-view/components/release-information/release-information.module.css @@ -0,0 +1,14 @@ +/* * + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +.alert { + margin-bottom: 24px; +} + +.cardIcon { + margin-top: 3px; + max-height: 16px; + max-width: 16px; +} diff --git a/src/views/product-downloads-view/index.tsx b/src/views/product-downloads-view/index.tsx index d34d333139..330f74fe36 100644 --- a/src/views/product-downloads-view/index.tsx +++ b/src/views/product-downloads-view/index.tsx @@ -33,7 +33,6 @@ import { CurrentVersionProvider, useCurrentVersion } from './contexts' import { DownloadsSection, FeaturedLearnCardsSection, - OfficialReleasesSection, PageHeader, SidecarMarketingCard, } from './components' @@ -130,7 +129,7 @@ const ProductDownloadsViewContent = ({ selectedRelease={releases.versions[currentVersion]} /> {merchandisingSlot?.position === 'below' ? merchandisingSlot.slot : null} - +