mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 17:31:43 +00:00
Add dismiss button to announcements (#28963)
This commit is contained in:
Beatrix
GitHub
parent
a029ad7ffb
commit
c7ff216a19
@ -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">
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -19,6 +19,7 @@ export interface TemporarySettingsSchema {
|
||||
'user.daysActiveCount': number
|
||||
'signup.finishedWelcomeFlow': boolean
|
||||
'codemonitor.info.visible': boolean
|
||||
'dotcom.log4jVulnerabilityAnnouncement.visible': boolean
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user