feat: add note for boundary desktop client (#2672)

* feat: add note for boundary desktop client

* update text

* change install callout to accept child component to make component more generic

src/views/product-downloads-view/boundary/components/install-callout/index.tsx

@@ -8,6 +8,9 @@ import Card from 'components/card'
 import CardWithLink from 'views/product-downloads-view/components/card-with-link'
 import MobileDownloadStandaloneLink from 'components/mobile-download-standalone-link'
 import Heading from 'components/heading'
+import InlineAlert from 'components/inline-alert'
+import InlineLink from 'components/inline-link'
+import { IconInfo16 } from '@hashicorp/flight-icons/svg-react/info-16'
 import { IconDownload16 } from '@hashicorp/flight-icons/svg-react/download-16'
 // Types
 import { InstallProps, ReleaseBuild } from './types'
@@ -26,6 +29,7 @@ function InstallCallout({
 	customInstallProps,
 	headingData,
 	cardClassName,
+	children,
 }: {
 	customInstallProps: InstallProps
 	/** We link to this heading from the side nav, so we've lifted up its data */
@@ -34,6 +38,7 @@ function InstallCallout({
 		text: string
 	}
 	cardClassName?: string
+	children?: React.ReactNode
 }) {
 	const { latestVersion, builds } = customInstallProps
 	return (
@@ -71,6 +76,7 @@ function InstallCallout({
 					/>
 				))}
 			</div>
+			{children}
 		</Card>
 	)
 }

src/views/product-downloads-view/boundary/download.module.css

@@ -6,3 +6,13 @@
 .lastCard {
 	margin-top: 32px;
 }
+
+.alert {
+	margin-top: 24px;
+}
+
+.cardIcon {
+	margin-top: 3px;
+	max-height: 16px;
+	max-width: 16px;
+}

src/views/product-downloads-view/boundary/index.tsx

@@ -7,6 +7,9 @@
 import ProductDownloadsView from 'views/product-downloads-view'
 // Components
 import { InstallCallout } from './components'
+import InlineAlert from 'components/inline-alert'
+import InlineLink from 'components/inline-link'
+import { IconInfo16 } from '@hashicorp/flight-icons/svg-react/info-16'
 // Types
 import { InstallProps } from './components/install-callout/types'
 import { ProductDownloadsViewProps } from 'views/product-downloads-view/types'
@@ -60,7 +63,25 @@ function BoundaryDownloadsView({
 						<InstallCallout
 							headingData={SHARED_HEADINGS.desktopClient}
 							customInstallProps={desktopClientProps}
-						/>
+						>
+							<InlineAlert
+								className={s.alert}
+								color="neutral"
+								title="Note"
+								description={
+									<>
+										You can find previous versions of the Desktop Client on the{' '}
+										<InlineLink
+											href="https://releases.hashicorp.com/boundary-desktop"
+											textSize={200}
+										>
+											Desktop Client releases page.
+										</InlineLink>
+									</>
+								}
+								icon={<IconInfo16 className={s.cardIcon} />}
+							/>
+						</InstallCallout>
 						<InstallCallout
 							cardClassName={s.lastCard}
 							headingData={SHARED_HEADINGS.installer}