From c7ff216a19f8f8db4d1078729fd90078a121f83f Mon Sep 17 00:00:00 2001
From: Beatrix <68532117+abeatrix@users.noreply.github.com>
Date: Tue, 14 Dec 2021 08:23:49 -0800
Subject: [PATCH] Add dismiss button to announcements (#28963)

---
 .../web/src/search/home/LoggedOutHomepage.tsx | 205 ++++++++----------
 .../VulnerabilityAnnouncement.module.scss     |  12 +
 .../search/home/VulnerabilityAnnouncement.tsx |  58 +++--
 .../settings/temporary/TemporarySettings.ts   |   1 +
 4 files changed, 137 insertions(+), 139 deletions(-)

diff --git a/client/web/src/search/home/LoggedOutHomepage.tsx b/client/web/src/search/home/LoggedOutHomepage.tsx
index fb403907b63..84a6661d293 100644
--- a/client/web/src/search/home/LoggedOutHomepage.tsx
+++ b/client/web/src/search/home/LoggedOutHomepage.tsx
@@ -5,7 +5,6 @@ import React, { useCallback } from 'react'
 import { Link } from '@sourcegraph/shared/src/components/Link'
 import { TelemetryProps } from '@sourcegraph/shared/src/telemetry/telemetryService'
 import { ThemeProps } from '@sourcegraph/shared/src/theme'
-import { Badge } from '@sourcegraph/wildcard'
 
 import { communitySearchContextsList } from '../../communitySearchContexts/HomepageConfig'
 import { SyntaxHighlightedSearchQuery } from '../../components/SyntaxHighlightedSearchQuery'
@@ -72,127 +71,93 @@ const SearchExamples: React.FunctionComponent<SearchExamplesProps> = ({
     )
 }
 
-export const LoggedOutHomepage: React.FunctionComponent<LoggedOutHomepageProps> = props => {
-    const onSignUpClick = useCallback(() => {
-        props.telemetryService.log('HomepageCTAClicked', { campaign: 'Sign up link' }, { campaign: 'Sign up link' })
-    }, [props.telemetryService])
-
-    return (
-        <DynamicWebFonts fonts={fonts}>
-            <div className={styles.loggedOutHomepage}>
-                <VulnerabilityAnnouncement />
-                <div className={styles.helpContent}>
-                    {props.featureFlags.get('search-notebook-onboarding') ? (
-                        <SearchExamples
-                            title="Search notebooks"
-                            subtitle="Three ways code search is more efficient than your IDE"
-                            examples={exampleNotebooks}
-                            icon={<BookOutlineIcon />}
-                            {...props}
-                        />
-                    ) : (
-                        <SearchExamples
-                            title="Search examples"
-                            subtitle="Find answers faster with code search across multiple repos and commits"
-                            examples={exampleQueries}
-                            icon={<MagnifyingGlassSearchIcon />}
-                            {...props}
-                        />
-                    )}
-                    <div className={styles.thumbnail}>
-                        <div className={classNames(styles.title, 'mb-2')}>Watch and learn</div>
-                        <ModalVideo
-                            id="three-ways-to-search-title"
-                            title="Three ways to search"
-                            src="https://www.youtube-nocookie.com/embed/XLfE2YuRwvw"
-                            thumbnail={{
-                                src: `img/watch-and-learn-${props.isLightTheme ? 'light' : 'dark'}.png`,
-                                alt: 'Watch and learn video thumbnail',
-                            }}
-                            onToggle={isOpen =>
-                                props.telemetryService.log(
-                                    isOpen ? 'HomepageVideoWaysToSearchClicked' : 'HomepageVideoClosed'
-                                )
-                            }
-                        />
-                    </div>
-                </div>
-
-                <div className="d-flex justify-content-center">
-                    <div className={classNames('card', styles.ctaCard)}>
-                        <div className="d-flex align-items-center">
-                            <Badge variant="merged" className="text-uppercase mr-2">
-                                Beta
-                            </Badge>
-                        </div>
-                        <span>
-                            Search your public and private code.{' '}
-                            <Link to="/sign-up?src=HomepageCTA" onClick={onSignUpClick}>
-                                Sign up
-                            </Link>{' '}
-                            to get started, or{' '}
-                            <a
-                                href="https://about.sourcegraph.com/blog/why-index-the-oss-universe/"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                read our blog post
-                            </a>{' '}
-                            to learn more.
-                        </span>
-                    </div>
-                </div>
-
-                <div className={styles.heroSection}>
-                    <HeroSection {...props} />
-                </div>
-
-                <div className={styles.communitySearchContextsSection}>
-                    <div className="d-block d-md-flex align-items-baseline mb-3">
-                        <div className={classNames(styles.title, 'mr-2')}>Search open source communities</div>
-                        <div className="font-weight-normal text-muted">
-                            Customized search portals for our open source partners
-                        </div>
-                    </div>
-                    <div className={styles.loggedOutHomepageCommunitySearchContextListCards}>
-                        {communitySearchContextsList.map(communitySearchContext => (
-                            <div
-                                className={classNames(
-                                    styles.loggedOutHomepageCommunitySearchContextListCard,
-                                    'd-flex align-items-center'
-                                )}
-                                key={communitySearchContext.spec}
-                            >
-                                <img
-                                    className={classNames(
-                                        styles.loggedOutHomepageCommunitySearchContextListIcon,
-                                        'mr-2'
-                                    )}
-                                    src={communitySearchContext.homepageIcon}
-                                    alt={`${communitySearchContext.spec} icon`}
-                                />
-                                <Link
-                                    to={communitySearchContext.url}
-                                    className={classNames(styles.loggedOutHomepageCommunitySearchContextsListingTitle)}
-                                >
-                                    {communitySearchContext.title}
-                                </Link>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-
-                <div className={styles.selfHostSection}>
-                    <SelfHostInstructions {...props} />
-                </div>
-
-                <div className={styles.customerSection}>
-                    <CustomersSection {...props} />
+export const LoggedOutHomepage: React.FunctionComponent<LoggedOutHomepageProps> = props => (
+    <DynamicWebFonts fonts={fonts}>
+        <div className={styles.loggedOutHomepage}>
+            <VulnerabilityAnnouncement />
+            <div className={styles.helpContent}>
+                {props.featureFlags.get('search-notebook-onboarding') ? (
+                    <SearchExamples
+                        title="Search notebooks"
+                        subtitle="Three ways code search is more efficient than your IDE"
+                        examples={exampleNotebooks}
+                        icon={<BookOutlineIcon />}
+                        {...props}
+                    />
+                ) : (
+                    <SearchExamples
+                        title="Search examples"
+                        subtitle="Find answers faster with code search across multiple repos and commits"
+                        examples={exampleQueries}
+                        icon={<MagnifyingGlassSearchIcon />}
+                        {...props}
+                    />
+                )}
+                <div className={styles.thumbnail}>
+                    <div className={classNames(styles.title, 'mb-2')}>Watch and learn</div>
+                    <ModalVideo
+                        id="three-ways-to-search-title"
+                        title="Three ways to search"
+                        src="https://www.youtube-nocookie.com/embed/XLfE2YuRwvw"
+                        thumbnail={{
+                            src: `img/watch-and-learn-${props.isLightTheme ? 'light' : 'dark'}.png`,
+                            alt: 'Watch and learn video thumbnail',
+                        }}
+                        onToggle={isOpen =>
+                            props.telemetryService.log(
+                                isOpen ? 'HomepageVideoWaysToSearchClicked' : 'HomepageVideoClosed'
+                            )
+                        }
+                    />
                 </div>
             </div>
-        </DynamicWebFonts>
-    )
-}
+
+            <div className={styles.heroSection}>
+                <HeroSection {...props} />
+            </div>
+
+            <div className={styles.communitySearchContextsSection}>
+                <div className="d-block d-md-flex align-items-baseline mb-3">
+                    <div className={classNames(styles.title, 'mr-2')}>Search open source communities</div>
+                    <div className="font-weight-normal text-muted">
+                        Customized search portals for our open source partners
+                    </div>
+                </div>
+                <div className={styles.loggedOutHomepageCommunitySearchContextListCards}>
+                    {communitySearchContextsList.map(communitySearchContext => (
+                        <div
+                            className={classNames(
+                                styles.loggedOutHomepageCommunitySearchContextListCard,
+                                'd-flex align-items-center'
+                            )}
+                            key={communitySearchContext.spec}
+                        >
+                            <img
+                                className={classNames(styles.loggedOutHomepageCommunitySearchContextListIcon, 'mr-2')}
+                                src={communitySearchContext.homepageIcon}
+                                alt={`${communitySearchContext.spec} icon`}
+                            />
+                            <Link
+                                to={communitySearchContext.url}
+                                className={classNames(styles.loggedOutHomepageCommunitySearchContextsListingTitle)}
+                            >
+                                {communitySearchContext.title}
+                            </Link>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            <div className={styles.selfHostSection}>
+                <SelfHostInstructions {...props} />
+            </div>
+
+            <div className={styles.customerSection}>
+                <CustomersSection {...props} />
+            </div>
+        </div>
+    </DynamicWebFonts>
+)
 
 const MagnifyingGlassSearchIcon = React.memo(() => (
     <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/client/web/src/search/home/VulnerabilityAnnouncement.module.scss b/client/web/src/search/home/VulnerabilityAnnouncement.module.scss
index 260590cd645..25b3accb304 100644
--- a/client/web/src/search/home/VulnerabilityAnnouncement.module.scss
+++ b/client/web/src/search/home/VulnerabilityAnnouncement.module.scss
@@ -6,4 +6,16 @@
     padding: 0.75rem 1rem;
     margin-bottom: 1.75rem;
     background-image: var(--vulnerability-announcement);
+
+    a {
+        color: var(--white);
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+}
+
+.close-button {
+    color: var(--white);
 }
diff --git a/client/web/src/search/home/VulnerabilityAnnouncement.tsx b/client/web/src/search/home/VulnerabilityAnnouncement.tsx
index 38bc8f7a2c4..2315bafb53c 100644
--- a/client/web/src/search/home/VulnerabilityAnnouncement.tsx
+++ b/client/web/src/search/home/VulnerabilityAnnouncement.tsx
@@ -1,29 +1,49 @@
 import classNames from 'classnames'
-import * as React from 'react'
+import CloseIcon from 'mdi-react/CloseIcon'
+import React from 'react'
 
 import { Badge } from '@sourcegraph/wildcard'
 
+import { useTemporarySetting } from '../../settings/temporary/useTemporarySetting'
+
 import styles from './VulnerabilityAnnouncement.module.scss'
 
 /**
- * TODO description
+ * Displays a dismissible banner linking to the log4j blog post
  */
-export const VulnerabilityAnnouncement: React.FunctionComponent = () => (
-    <div className="w-100 d-flex justify-content-center">
-        <a href="https://about.sourcegraph.com/blog/log4j-log4shell-0-day/" target="_blank" rel="noopener noreferrer">
-            <div className="d-flex justify-content-center">
-                <div className={classNames('card', styles.ctaCard)}>
-                    <div className="d-flex align-items-center">
-                        <Badge variant="info" className="text-uppercase mr-2">
-                            Important
-                        </Badge>
+export const VulnerabilityAnnouncement: React.FunctionComponent = () => {
+    const [visible, setVisible] = useTemporarySetting('dotcom.log4jVulnerabilityAnnouncement.visible', true)
+    return (
+        <div className="w-100 d-flex justify-content-center">
+            {visible ? (
+                <div className="d-flex justify-content-center">
+                    <div className={classNames('card', styles.ctaCard)}>
+                        <a
+                            href="https://about.sourcegraph.com/blog/log4j-log4shell-0-day/"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="d-flex align-items-center"
+                        >
+                            <Badge variant="info" className="text-uppercase mr-2">
+                                Important
+                            </Badge>
+
+                            <span>
+                                Read our blog post on how to find <strong>Log4j</strong> vulnerabilities in your code,
+                                including example queries.
+                            </span>
+                        </a>
+                        <button
+                            type="button"
+                            aria-label="Close alert"
+                            className={classNames('btn btn-icon ml-2', styles.closeButton)}
+                            onClick={() => setVisible(false)}
+                        >
+                            <CloseIcon className="icon-inline" />
+                        </button>
                     </div>
-                    <span>
-                        Read our blog post on the <strong>Log4j</strong> vulnerabilities in your search code, including
-                        example queries.
-                    </span>
                 </div>
-            </div>
-        </a>
-    </div>
-)
+            ) : null}
+        </div>
+    )
+}
diff --git a/client/web/src/settings/temporary/TemporarySettings.ts b/client/web/src/settings/temporary/TemporarySettings.ts
index 3d29b153112..060fcd57ec2 100644
--- a/client/web/src/settings/temporary/TemporarySettings.ts
+++ b/client/web/src/settings/temporary/TemporarySettings.ts
@@ -19,6 +19,7 @@ export interface TemporarySettingsSchema {
     'user.daysActiveCount': number
     'signup.finishedWelcomeFlow': boolean
     'codemonitor.info.visible': boolean
+    'dotcom.log4jVulnerabilityAnnouncement.visible': boolean
 }
 
 /**