highlight · SpennyNDaJets · Aug 5, 2024 · Aug 1, 2024 · Aug 1, 2024 · Aug 2, 2024
diff --git a/frontend/src/__generated/index.css b/frontend/src/__generated/index.css
diff --git a/frontend/src/pages/Alerts/Alerts.tsx b/frontend/src/pages/Alerts/Alerts.tsx
@@ -3,6 +3,7 @@ import { SearchEmptyState } from '@components/SearchEmptyState/SearchEmptyState'
 import { GetAlertsPagePayloadQuery } from '@graph/operations'
 import {
 	Box,
+	Callout,
 	Container,
 	Heading,
 	IconSolidChartBar,
@@ -14,6 +15,7 @@ import {
 	IconSolidLightningBolt,
 	IconSolidLogs,
 	IconSolidMicrosoftTeams,
+	IconSolidPlay,
 	IconSolidPlayCircle,
 	IconSolidPlus,
 	IconSolidRefresh,
@@ -34,13 +36,15 @@ import SvgTargetIcon from '@icons/TargetIcon'
 import SvgUserPlusIcon from '@icons/UserPlusIcon'
 import { AlertEnableSwitch } from '@pages/Alerts/AlertEnableSwitch/AlertEnableSwitch'
 import { useAlertsContext } from '@pages/Alerts/AlertsContext/AlertsContext'
+import useLocalStorage from '@rehooks/local-storage'
 import { useParams } from '@util/react-router/useParams'
 import React from 'react'
 import { RiMailFill, RiSlackFill } from 'react-icons/ri'
 import { useNavigate } from 'react-router-dom'
 
 import { Button } from '@/components/Button'
 import { Link } from '@/components/Link'
+import { LinkButton } from '@/components/LinkButton'
 import {
 	AlertDestination,
 	AlertDestinationType,
@@ -174,6 +178,9 @@ export const ALERT_CONFIGURATIONS: { [key: string]: AlertConfiguration } = {
 		supportsExcludeRules: true,
 	},
 } as const
+const WALKTHROUGH_LINK = 'TODO'
+const ALERTS_DOCS_LINK =
+	'https://www.highlight.io/docs/general/product-features/general-features/alerts'
 
 export default function AlertsPage() {
 	const { alertsPayload, loading } = useAlertsContext()
@@ -265,6 +272,10 @@ function AlertsPageLoaded({
 }: {
 	alertsPayload: GetAlertsPagePayloadQuery | undefined
 }) {
+	const [visible, setVisible] = useLocalStorage<boolean>(
+		'display-alerts-docs-callout',
+		true,
+	)
 	const { project_id } = useParams<{ project_id: string }>()
 	const navigate = useNavigate()
 	const metricAlertsEnabled = useFeatureFlag(Feature.MetricAlerts)
@@ -392,6 +403,41 @@ function AlertsPageLoaded({
 								<NewAlertMenu />
 							)}
 						</Box>
+						{visible && (
+							<Callout
+								title="Want to learn more about
+												Alerts?"
+								icon={false}
+								handleCloseClick={() => setVisible(false)}
+							>
+								<Stack gap="16">
+									<Text>
+										Be sure to take a look at the docs, and
+										the walkthrough coming soon!
+									</Text>
+									<Stack flexDirection="row" gap="8">
+										<LinkButton
+											kind="secondary"
+											emphasis="high"
+											trackingId="alerts-watch-walkthrough"
+											to={WALKTHROUGH_LINK}
+											iconLeft={<IconSolidPlay />}
+											disabled
+										>
+											Watch walkthrough
+										</LinkButton>
+										<LinkButton
+											trackingId="alerts-read-docs"
+											kind="secondary"
+											emphasis="low"
+											to={ALERTS_DOCS_LINK}
+										>
+											Read docs
+										</LinkButton>
+									</Stack>
+								</Stack>
+							</Callout>
+						)}
 						{alertsPayload && (
 							<Stack gap="6">
 								{alertsAsTableRows.length > 0 ? (

diff --git a/frontend/src/pages/Graphing/DashboardOverview.tsx b/frontend/src/pages/Graphing/DashboardOverview.tsx
@@ -4,22 +4,26 @@ import {
 	Badge,
 	Box,
 	Button,
+	Callout,
 	Container,
 	Heading,
 	IconSolidChartBar,
 	IconSolidDotsHorizontal,
+	IconSolidPlay,
 	IconSolidTrash,
 	Menu,
 	Stack,
 	Table,
 	Text,
 } from '@highlight-run/ui/components'
+import useLocalStorage from '@rehooks/local-storage'
 import moment from 'moment'
 import React, { useState } from 'react'
 import { Helmet } from 'react-helmet'
 import { useNavigate } from 'react-router-dom'
 import { useDebounce } from 'react-use'
 
+import { LinkButton } from '@/components/LinkButton'
 import LoadingBox from '@/components/LoadingBox'
 import { SearchEmptyState } from '@/components/SearchEmptyState/SearchEmptyState'
 import {
@@ -37,8 +41,16 @@ import * as style from './DashboardOverview.css'
 
 const ITEMS_PER_PAGE = 10
 
-export default function DashboardOverview() {
+const METRICS_DOCS_LINK =
+	'https://www.highlight.io/docs/general/product-features/metrics/overview'
+const WALKTHROUGH_LINK = 'https://www.youtube.com/watch?v=MzJMCcgf6iU'
+
+export const DashboardOverview: React.FC = () => {
 	const { projectId } = useProjectId()
+	const [visible, setVisible] = useLocalStorage<boolean>(
+		'display-dashboard-docs-callout',
+		true,
+	)
 
 	const [query, setQuery] = useState('')
 	const [debouncedQuery, setDebouncedQuery] = useState('')
@@ -113,6 +125,48 @@ export default function DashboardOverview() {
 										Metrics allow you to visualize what's
 										happening in your app.
 									</Text>
+									{visible && (
+										<Callout
+											title="Want to learn more about
+												Metrics?"
+											icon={false}
+											handleCloseClick={() =>
+												setVisible(false)
+											}
+										>
+											<Stack gap="16">
+												<Text>
+													Be sure to take a look at
+													the docs, or watch the
+													walkthrough video!
+												</Text>
+												<Stack
+													flexDirection="row"
+													gap="8"
+												>
+													<LinkButton
+														kind="secondary"
+														emphasis="high"
+														trackingId="dashboard-watch-walkthrough"
+														to={WALKTHROUGH_LINK}
+														iconLeft={
+															<IconSolidPlay />
+														}
+													>
+														Watch walkthrough
+													</LinkButton>
+													<LinkButton
+														trackingId="dashboard-read-docs"
+														kind="secondary"
+														emphasis="low"
+														to={METRICS_DOCS_LINK}
+													>
+														Read docs
+													</LinkButton>
+												</Stack>
+											</Stack>
+										</Callout>
+									)}
 								</Stack>
 								<Stack gap="8" width="full">
 									<Box

diff --git a/frontend/src/pages/Graphing/DashboardRouter.tsx b/frontend/src/pages/Graphing/DashboardRouter.tsx
@@ -1,7 +1,7 @@
 import { Route, Routes } from 'react-router-dom'
 
 import { Dashboard } from '@/pages/Graphing/Dashboard'
-import DashboardOverview from '@/pages/Graphing/DashboardOverview'
+import { DashboardOverview } from '@/pages/Graphing/DashboardOverview'
 import { ExpandedGraph } from '@/pages/Graphing/ExpandedGraph'
 import { GraphingEditor } from '@/pages/Graphing/GraphingEditor'
 

diff --git a/packages/ui/src/components/Callout/Callout.tsx b/packages/ui/src/components/Callout/Callout.tsx
@@ -80,19 +80,18 @@ export const Callout: React.FC<Props> = ({
 
 			<Box gap="16" display="flex" flexDirection="column" width="full">
 				{title && (
-					<Box
-						alignItems="flex-start"
-						display="flex"
-						justifyContent="space-between"
-					>
+					<Box display="flex" position="relative">
 						<Box mt="6">
 							<Text color="strong" weight="bold" size="small">
 								{title}
 							</Text>
 						</Box>
 
 						{handleCloseClick && (
-							<Box flexShrink={0}>
+							<Box
+								flexShrink={0}
+								style={{ position: 'absolute', right: '0' }}
+							>
 								<ButtonIcon
 									kind="secondary"
 									emphasis="low"

diff --git a/packages/ui/src/components/Table/Row/styles.css.ts b/packages/ui/src/components/Table/Row/styles.css.ts
@@ -18,10 +18,11 @@ export const row = style({
 		},
 
 		// Borders
-		[`${tableStyles.table}:not(${tableStyles.noBorder}) &`]: {
-			borderLeft: BORDER,
-			borderRight: BORDER,
-		},
+		[`${tableStyles.table}:not(${tableStyles.noBorder}) ${bodyStyles.body} &, ${tableStyles.table}:not(${tableStyles.noBorder}) ${headStyles.head} &`]:
+			{
+				borderLeft: BORDER,
+				borderRight: BORDER,
+			},
 		[`${tableStyles.noBorder} ${bodyStyles.body} &:last-of-type`]: {
 			borderBottom: 0,
 		},