web: add popover and alert for browser extension (#14256)

Display an alert on first render of a repo page after the user has seen 3 hovers. Add a popover when the user first clicks on 'View on [code host]'.

client/branded/src/global-styles/index.scss

@@ -137,6 +137,7 @@ $code-bg: var(--body-bg);
 @import './card';
 @import './dropdown';
 @import './modal';
+@import './popover';
 @import './nav';
 @import './type';
 @import './list-group';

client/branded/src/global-styles/popover.scss

@@ -0,0 +1,6 @@
+$popover-font-size: $font-size-base;
+$popover-arrow-outer-color: var(--border-color);
+$popover-arrow-color: var(--body-bg);
+$popover-max-width: auto;
+
+@import 'bootstrap/scss/popover';

client/shared/src/actions/ActionItem.tsx

@@ -7,7 +7,7 @@ import { catchError, map, mapTo, mergeMap, startWith, tap } from 'rxjs/operators
 import { ExecuteCommandParams } from '../api/client/services/command'
 import { ActionContribution, Evaluated } from '../api/protocol'
 import { urlForOpenPanel } from '../commands/commands'
-import { LinkOrButton } from '../components/LinkOrButton'
+import { ButtonLink } from '../components/LinkOrButton'
 import { ExtensionsControllerProps } from '../extensions/controller'
 import { PlatformContextProps } from '../platform/context'
 import { TelemetryProps } from '../telemetry/telemetryService'
@@ -206,7 +206,7 @@ export class ActionItem extends React.PureComponent<ActionItemProps, State> {
                 : {}
 
         return (
-            <LinkOrButton
+            <ButtonLink
                 data-tooltip={
                     this.props.showInlineError && isErrorLike(this.state.actionOrError)
                         ? `Error: ${this.state.actionOrError.message}`
@@ -237,7 +237,7 @@ export class ActionItem extends React.PureComponent<ActionItemProps, State> {
                         <LoadingSpinner className={this.props.iconClassName} />
                     </div>
                 )}
-            </LinkOrButton>
+            </ButtonLink>
         )
     }
 

client/shared/src/components/LinkOrButton.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import { LinkOrButton } from './LinkOrButton'
+import { ButtonLink } from './LinkOrButton'
 
 describe('LinkOrButton', () => {
     test('render a link when "to" is set', () => {
-        const component = renderer.create(<LinkOrButton to="http://example.com">foo</LinkOrButton>)
+        const component = renderer.create(<ButtonLink to="http://example.com">foo</ButtonLink>)
         expect(component.toJSON()).toMatchSnapshot()
     })
 
     test('render a button when "to" is undefined', () => {
-        const component = renderer.create(<LinkOrButton to={undefined}>foo</LinkOrButton>)
+        const component = renderer.create(<ButtonLink to={undefined}>foo</ButtonLink>)
         expect(component.toJSON()).toMatchSnapshot()
     })
 })

client/shared/src/components/LinkOrButton.tsx

@@ -34,16 +34,17 @@ interface Props extends Pick<AnchorHTMLAttributes<never>, 'target' | 'rel'> {
     className?: string
 
     disabled?: boolean
+
+    id?: string
 }
 
 /**
  * A component that is displayed in the same way, regardless of whether it's a link (with a
  * destination URL) or a button (with a click handler).
  *
- * It is keyboard accessible: unlike <Link> or <a>, pressing the enter key triggers it. Unlike
- * <button>, it shows a focus ring.
+ * It is keyboard accessible: unlike `<Link>` or `<a>`, pressing the enter key triggers it.
  */
-export const LinkOrButton: React.FunctionComponent<Props> = ({
+export const ButtonLink: React.FunctionComponent<Props> = ({
     className = 'nav-link',
     to,
     target,
@@ -53,6 +54,7 @@ export const LinkOrButton: React.FunctionComponent<Props> = ({
     'data-tooltip': tooltip,
     onSelect = noop,
     children,
+    id,
 }) => {
     // We need to set up a keypress listener because <a onclick> doesn't get
     // triggered by enter.
@@ -76,6 +78,7 @@ export const LinkOrButton: React.FunctionComponent<Props> = ({
         tabIndex: 0,
         onClick: onSelect,
         onKeyPress: onAnchorKeyPress,
+        id,
     }
 
     const onClickPreventDefault: React.MouseEventHandler<HTMLAnchorElement> = useCallback(

client/web/src/Layout.tsx

@@ -1,5 +1,5 @@
 import { LoadingSpinner } from '@sourcegraph/react-loading-spinner'
-import React, { Suspense } from 'react'
+import React, { Suspense, useCallback } from 'react'
 import { Redirect, Route, RouteComponentProps, Switch, matchPath } from 'react-router'
 import { Observable } from 'rxjs'
 import { ActivationProps } from '../../shared/src/components/activation/Activation'
@@ -64,6 +64,7 @@ import { AuthenticatedUser, authRequired as authRequiredObservable } from './aut
 import { SearchPatternType } from './graphql-operations'
 import { TelemetryProps } from '../../shared/src/telemetry/telemetryService'
 import { useObservable } from '../../shared/src/util/useObservable'
+import { useExtensionAlertAnimation } from './nav/UserNavItem'
 
 export interface LayoutProps
     extends RouteComponentProps<{}>,
@@ -169,6 +170,13 @@ export const Layout: React.FunctionComponent<LayoutProps> = props => {
 
     const breadcrumbProps = useBreadcrumbs()
 
+    // Control browser extension discoverability animation here.
+    // `Layout` is the lowest common ancestor of `UserNavItem` (target) and `RepoContainer` (trigger)
+    const { isExtensionAlertAnimating, startExtensionAlertAnimation } = useExtensionAlertAnimation()
+    const onExtensionAlertDismissed = useCallback(() => {
+        startExtensionAlertAnimation()
+    }, [startExtensionAlertAnimation])
+
     useScrollToLocationHash(props.location)
     // Remove trailing slash (which is never valid in any of our URLs).
     if (props.location.pathname !== '/' && props.location.pathname.endsWith('/')) {
@@ -178,6 +186,7 @@ export const Layout: React.FunctionComponent<LayoutProps> = props => {
     const context = {
         ...props,
         ...breadcrumbProps,
+        onExtensionAlertDismissed,
     }
 
     return (
@@ -211,6 +220,7 @@ export const Layout: React.FunctionComponent<LayoutProps> = props => {
                     }
                     hideNavLinks={false}
                     minimalNavLinks={minimalNavLinks}
+                    isExtensionAlertAnimating={isExtensionAlertAnimating}
                 />
             )}
             {needsSiteInit && !isSiteInit && <Redirect to="/site-admin/init" />}

client/web/src/SourcegraphWebApp.scss

@@ -109,6 +109,8 @@ body,
 @import './repo/RepoContainer';
 @import './repo/FilePathBreadcrumbs.scss';
 @import './repo/settings/RepoSettingsArea';
+@import './repo/actions//InstallBrowserExtensionPopover.scss';
+@import './repo/actions/InstallBrowserExtensionAlert.scss';
 @import './components/LoaderInput';
 @import '../../branded/src/components/CodeSnippet';
 @import './components/PageHeader';

client/web/src/auth/icons.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 export const SourcegraphIcon: React.FunctionComponent<React.SVGAttributes<SVGSVGElement>> = props => (
-    <svg width="65" height="64" viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg viewBox="0 0 65 64" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
         <path
             fillRule="evenodd"
             clipRule="evenodd"

client/web/src/components/Dialog.scss

@@ -0,0 +1,16 @@
+@import '~@reach/dialog/styles.css';
+
+.modal-body {
+    background-color: var(--body-bg);
+    padding: 1rem;
+    width: 32rem;
+    max-width: 100vw;
+
+    &--centered {
+        transform: translate(-50%, -50%);
+        position: absolute;
+        top: 50%;
+        margin: 0;
+        left: 50%;
+    }
+}

client/web/src/components/shared.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { ActionsNavItems, ActionsNavItemsProps } from '../../../shared/src/actions/ActionsNavItems'
 import { CommandListPopoverButton, CommandListPopoverButtonProps } from '../../../shared/src/commandPalette/CommandList'
 import {
@@ -9,10 +9,11 @@ import {
 import { isErrorLike } from '../../../shared/src/util/errors'
 import { HoverOverlay, HoverOverlayProps } from '../../../shared/src/hover/HoverOverlay'
 import { useLocalStorage } from '../util/useLocalStorage'
+import { HoverThresholdProps } from '../repo/RepoContainer'
 
 // Components from shared with web-styling class names applied
 
-export const WebHoverOverlay: React.FunctionComponent<HoverOverlayProps> = props => {
+export const WebHoverOverlay: React.FunctionComponent<HoverOverlayProps & HoverThresholdProps> = props => {
     const [dismissedAlerts, setDismissedAlerts] = useLocalStorage<string[]>('WebHoverOverlay.dismissedAlerts', [])
     const onAlertDismissed = useCallback(
         (alertType: string) => {
@@ -31,6 +32,18 @@ export const WebHoverOverlay: React.FunctionComponent<HoverOverlayProps> = props
         propsToUse = { ...props, hoverOrError: { ...props.hoverOrError, alerts: filteredAlerts } }
     }
 
+    const { hoverOrError } = propsToUse
+    const { onHoverShown, hoveredToken } = props
+
+    /** Whether the hover has actual content (that provides value to the user) */
+    const hoverHasValue = hoverOrError !== 'loading' && !isErrorLike(hoverOrError) && !!hoverOrError?.contents?.length
+
+    useEffect(() => {
+        if (hoverHasValue) {
+            onHoverShown?.()
+        }
+    }, [hoveredToken?.filePath, hoveredToken?.line, hoveredToken?.character, onHoverShown, hoverHasValue])
+
     return (
         <HoverOverlay
             {...propsToUse}