artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 18:51:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

streaming search: redesigned error/skipped items popover (#17254)

Browse Source 
- Redesigned popover to match [Figma](https://www.figma.com/file/IyiXZIbPHK447NCXov0AvK/13928-Streaming-search?node-id=809%3A28574)
- Items are now collapsible
- The first item in the list starts open (unless its severity is `info`)
This commit is contained in:
Juliana Peña 2021-01-14 16:01:14 -08:00 committed by GitHub
parent 72aaffbbd2
commit 4497b71c82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 621 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/shared/src/global-styles/icons.scss
View File

@ -15,15 +15,15 @@
align-items: center;
}
// TODO find a better way to scale icons that is not proportional to the font size
// 14px font size -> 20px icon size
$icon-inline-size: (20em / 14);
svg.icon-inline,
img.icon-inline,
.icon-inline svg {
// TODO find a better way to scale icons that is not proportional to the font size
// 14px font size -> 20px icon size
// stylelint-disable-next-line declaration-property-unit-whitelist
width: (20em / 14);
// stylelint-disable-next-line declaration-property-unit-whitelist
height: (20em / 14);
width: $icon-inline-size;
height: $icon-inline-size;
// Match color of the text
fill: currentColor;
}

41
client/web/src/search/results/streaming/progress/StreamingProgress.scss
View File

@ -33,7 +33,46 @@
&-popover {
width: 20rem;
padding: 0.5rem;
padding: 0;
}
}
}
.streaming-skipped-item {
background: transparent !important;
border: none !important;
&:disabled {
opacity: 1;
}
&__icon {
color: var(--primary);
}
&__message {
$border-size: 2px;
border-left: $border-size solid var(--primary);
// Border should appear directly under the width of the icon
// Halfway past the icon, minus half the border size
margin-left: calc(#{$icon-inline-size} / 2 - #{$border-size} / 2);
// Halfway past the icon, minus half the border size, plus the icon's right margin
padding-left: calc(#{$icon-inline-size} / 2 - #{$border-size} / 2 + 0.5rem);
}
&__bottom-border-spacer {
border-bottom: 1px solid var(--border-color-2);
}
&--warn {
.streaming-skipped-item__icon {
color: var(--danger);
}
.streaming-skipped-item__message {
border-left-color: var(--danger);
}
}
}

48
client/web/src/search/results/streaming/progress/StreamingProgressSkippedPopover.story.tsx
View File

@ -36,20 +36,10 @@ add('popover', () => {
{
reason: 'error',
message:
'There was a network error retrieving search results. Check your Internet connection and try again.',
'There was a network error retrieving search results. Check your Internet connection and try again.\n\nMarkdown sample:\n\n`code`\n\n* item 1\n* item2',
severity: 'error',
title: 'Error loading results',
},
{
reason: 'excluded-archive',
message: '',
severity: 'info',
title: '60k archived repositories excluded',
suggested: {
title: 'include archived',
queryExpression: 'archived:yes',
},
},
{
reason: 'excluded-archive',
message: 'By default we exclude archived repositories. Include them with `archived:yes` in your query.',
@ -80,3 +70,39 @@ add('popover', () => {
</WebStory>
)
})
add('only info', () => {
const progress: Progress = {
durationMs: 1500,
matchCount: 2,
repositoriesCount: 2,
skipped: [
{
reason: 'excluded-fork',
message: '',
severity: 'info',
title: '10k forked repositories excluded',
suggested: {
title: 'include forked',
queryExpression: 'fork:yes',
},
},
{
reason: 'excluded-archive',
message: 'By default we exclude archived repositories. Include them with `archived:yes` in your query.',
severity: 'info',
title: '1 archived',
suggested: {
title: 'include archived',
queryExpression: 'archived:yes',
},
},
],
}
return (
<WebStory>
{() => <StreamingProgressSkippedPopover progress={progress} onSearchAgain={() => {}} history={history} />}
</WebStory>
)
})

8
client/web/src/search/results/streaming/progress/StreamingProgressSkippedPopover.test.tsx
View File

@ -115,7 +115,7 @@ describe('StreamingProgressSkippedPopover', () => {
const element = mount(
<StreamingProgressSkippedPopover progress={progress} onSearchAgain={sinon.spy()} history={history} />
)
const searchAgainButton = element.find(Button)
const searchAgainButton = element.find(Form).find(Button)
expect(searchAgainButton).toHaveLength(1)
expect(searchAgainButton.prop('disabled')).toBe(true)
})
@ -170,7 +170,7 @@ describe('StreamingProgressSkippedPopover', () => {
currentTarget: { checked: true, value: checkbox.props().value as string },
} as ChangeEvent<HTMLInputElement>)
const searchAgainButton = element.find(Button)
const searchAgainButton = element.find(Form).find(Button)
expect(searchAgainButton).toHaveLength(1)
expect(searchAgainButton.prop('disabled')).toBe(false)
})
@ -225,14 +225,14 @@ describe('StreamingProgressSkippedPopover', () => {
currentTarget: { checked: true, value: checkbox.props().value as string },
} as ChangeEvent<HTMLInputElement>)
let searchAgainButton = element.find(Button)
let searchAgainButton = element.find(Form).find(Button)
expect(searchAgainButton.prop('disabled')).toBe(false)
checkbox.invoke('onChange')?.({
currentTarget: { checked: false, value: checkbox.props().value as string },
} as ChangeEvent<HTMLInputElement>)
searchAgainButton = element.find(Button)
searchAgainButton = element.find(Form).find(Button)
expect(searchAgainButton.prop('disabled')).toBe(true)
})

79
client/web/src/search/results/streaming/progress/StreamingProgressSkippedPopover.tsx
View File

@ -1,8 +1,12 @@
import classNames from 'classnames'
import * as H from 'history'
import AlertCircleIcon from 'mdi-react/AlertCircleIcon'
import ChevronDownIcon from 'mdi-react/ChevronDownIcon'
import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon'
import InformationOutlineIcon from 'mdi-react/InformationOutlineIcon'
import SearchIcon from 'mdi-react/SearchIcon'
import React, { useCallback, useState } from 'react'
import { Alert, Button, Form, FormGroup, Input, Label } from 'reactstrap'
import { Button, Collapse, Form, FormGroup, Input, Label } from 'reactstrap'
import { Markdown } from '../../../../../../shared/src/components/Markdown'
import { renderMarkdown } from '../../../../../../shared/src/util/markdown'
import { SyntaxHighlightedSearchQuery } from '../../../../components/SyntaxHighlightedSearchQuery'
@ -27,6 +31,52 @@ const sortBySeverity = (a: Skipped, b: Skipped): number => {
return aSev - bSev
}
const SkippedMessage: React.FunctionComponent<{ skipped: Skipped; history: H.History; startOpen: boolean }> = ({
skipped,
history,
startOpen,
}) => {
const [isOpen, setIsOpen] = useState(startOpen)
const toggleIsOpen = useCallback(() => setIsOpen(oldValue => !oldValue), [])
return (
<Button
className={classNames('streaming-skipped-item pt-3 pb-0 w-100', {
'streaming-skipped-item--warn': skipped.severity !== 'info',
})}
onClick={toggleIsOpen}
disabled={!skipped.message}
>
<h4 className="d-flex align-items-center mb-0 w-100">
{skipped.severity === 'info' ? (
<InformationOutlineIcon className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0" />
) : (
<AlertCircleIcon className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0" />
)}
<span className="flex-grow-1 text-left">{skipped.title}</span>
{skipped.message &&
(isOpen ? (
<ChevronDownIcon className="icon-inline flex-shrink-0" />
) : (
<ChevronLeftIcon className="icon-inline flex-shrink-0" />
))}
</h4>
{skipped.message && (
<Collapse isOpen={isOpen}>
<Markdown
className="streaming-skipped-item__message mt-2 text-left"
dangerousInnerHTML={renderMarkdown(skipped.message)}
history={history}
/>
</Collapse>
)}
<div className="streaming-skipped-item__bottom-border-spacer mt-3" />
</Button>
)
}
export const StreamingProgressSkippedPopover: React.FunctionComponent<
Pick<StreamingProgressProps, 'progress' | 'onSearchAgain' | 'history'>
> = ({ progress, onSearchAgain, history }) => {
@ -56,26 +106,17 @@ export const StreamingProgressSkippedPopover: React.FunctionComponent<
return (
<>
{sortedSkippedItems.map(skipped => (
<Alert key={skipped.reason} color={skipped.severity === 'info' ? 'info' : 'danger'} fade={false}>
<h4 className="d-flex align-items-center mb-0">
{skipped.severity === 'info' ? (
<InformationOutlineIcon className="icon-inline mr-2" />
) : (
<AlertCircleIcon className="icon-inline mr-2" />
)}
<span>{skipped.title}</span>
</h4>
{skipped.message && (
<div className="mt-2">
<Markdown dangerousInnerHTML={renderMarkdown(skipped.message)} history={history} />
</div>
)}
</Alert>
{sortedSkippedItems.map((skipped, index) => (
<SkippedMessage
key={skipped.reason}
skipped={skipped}
history={history}
startOpen={index === 0 && skipped.severity !== 'info'} // Start with first item open, but only if it's not info severity
/>
))}
{sortedSkippedItems.some(skipped => skipped.suggested) && (
<Form onSubmit={submitHandler}>
<div className="mb-2">Search again:</div>
<Form className="pb-3 px-3" onSubmit={submitHandler}>
<div className="mb-2 mt-3">Search again:</div>
<FormGroup check={true}>
{sortedSkippedItems.map(
skipped =>

916
client/web/src/search/results/streaming/progress/__snapshots__/StreamingProgressSkippedPopover.test.tsx.snap
View File

@ -60,521 +60,553 @@ exports[`StreamingProgressSkippedPopover should render correctly 1`] = `
}
}
>
<Alert
closeAriaLabel="Close"
color="danger"
fade={false}
isOpen={true}
<SkippedMessage
history="[History]"
key="error"
tag="div"
transition={
skipped={
Object {
"appear": true,
"baseClass": "fade",
"baseClassActive": "show",
"enter": true,
"exit": true,
"in": true,
"mountOnEnter": false,
"onEnter": [Function],
"onEntered": [Function],
"onEntering": [Function],
"onExit": [Function],
"onExited": [Function],
"onExiting": [Function],
"tag": "div",
"timeout": 150,
"unmountOnExit": true,
"message": "There was a network error retrieving search results. Check your Internet connection and try again.",
"reason": "error",
"severity": "error",
"title": "Error loading results",
}
}
startOpen={true}
>
<Fade
appear={true}
baseClass=""
baseClassActive="show"
className="alert alert-danger"
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
role="alert"
tag="div"
timeout={0}
unmountOnExit={true}
<Button
className="streaming-skipped-item pt-3 pb-0 w-100 streaming-skipped-item--warn"
color="secondary"
disabled={false}
onClick={[Function]}
tag="button"
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={true}
<button
aria-label={null}
className="streaming-skipped-item pt-3 pb-0 w-100 streaming-skipped-item--warn btn btn-secondary"
disabled={false}
onClick={[Function]}
type="button"
>
<div
className="alert alert-danger"
role="alert"
<h4
className="d-flex align-items-center mb-0 w-100"
>
<h4
className="d-flex align-items-center mb-0"
<Memo(AlertCircleIcon)
className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0"
/>
<span
className="flex-grow-1 text-left"
>
<Memo(AlertCircleIcon)
className="icon-inline mr-2"
/>
<span>
Error loading results
</span>
</h4>
<div
className="mt-2"
Error loading results
</span>
<Memo(ChevronDownIcon)
className="icon-inline flex-shrink-0"
/>
</h4>
<Collapse
appear={false}
enter={true}
exit={true}
in={false}
isOpen={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
tag="div"
timeout={350}
unmountOnExit={false}
>
<Transition
appear={false}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={350}
unmountOnExit={false}
>
<Markdown
dangerousInnerHTML="<p>There was a network error retrieving search results. Check your Internet connection and try again.</p>
"
history="[History]"
<div
className="collapse show"
style={Object {}}
>
<div
className="markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>There was a network error retrieving search results. Check your Internet connection and try again.</p>
<Markdown
className="streaming-skipped-item__message mt-2 text-left"
dangerousInnerHTML="<p>There was a network error retrieving search results. Check your Internet connection and try again.</p>
"
history="[History]"
>
<div
className="streaming-skipped-item__message mt-2 text-left markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>There was a network error retrieving search results. Check your Internet connection and try again.</p>
",
}
}
}
onClick={[Function]}
/>
</Markdown>
</div>
</div>
</Transition>
</Fade>
</Alert>
<Alert
closeAriaLabel="Close"
color="danger"
fade={false}
isOpen={true}
onClick={[Function]}
/>
</Markdown>
</div>
</Transition>
</Collapse>
<div
className="streaming-skipped-item__bottom-border-spacer mt-3"
/>
</button>
</Button>
</SkippedMessage>
<SkippedMessage
history="[History]"
key="shard-timedout"
tag="div"
transition={
skipped={
Object {
"appear": true,
"baseClass": "fade",
"baseClassActive": "show",
"enter": true,
"exit": true,
"in": true,
"mountOnEnter": false,
"onEnter": [Function],
"onEntered": [Function],
"onEntering": [Function],
"onExit": [Function],
"onExited": [Function],
"onExiting": [Function],
"tag": "div",
"timeout": 150,
"unmountOnExit": true,
"message": "Search timed out",
"reason": "shard-timedout",
"severity": "warn",
"suggested": Object {
"queryExpression": "timeout:2m",
"title": "timeout:2m",
},
"title": "Search timed out",
}
}
startOpen={false}
>
<Fade
appear={true}
baseClass=""
baseClassActive="show"
className="alert alert-danger"
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
role="alert"
tag="div"
timeout={0}
unmountOnExit={true}
<Button
className="streaming-skipped-item pt-3 pb-0 w-100 streaming-skipped-item--warn"
color="secondary"
disabled={false}
onClick={[Function]}
tag="button"
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={true}
<button
aria-label={null}
className="streaming-skipped-item pt-3 pb-0 w-100 streaming-skipped-item--warn btn btn-secondary"
disabled={false}
onClick={[Function]}
type="button"
>
<div
className="alert alert-danger"
role="alert"
<h4
className="d-flex align-items-center mb-0 w-100"
>
<h4
className="d-flex align-items-center mb-0"
<Memo(AlertCircleIcon)
className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0"
/>
<span
className="flex-grow-1 text-left"
>
<Memo(AlertCircleIcon)
className="icon-inline mr-2"
/>
<span>
Search timed out
</span>
</h4>
<div
className="mt-2"
Search timed out
</span>
<Memo(ChevronLeftIcon)
className="icon-inline flex-shrink-0"
/>
</h4>
<Collapse
appear={false}
enter={true}
exit={true}
in={false}
isOpen={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
tag="div"
timeout={350}
unmountOnExit={false}
>
<Transition
appear={false}
enter={true}
exit={true}
in={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={350}
unmountOnExit={false}
>
<Markdown
dangerousInnerHTML="<p>Search timed out</p>
"
history="[History]"
<div
className="collapse"
style={Object {}}
>
<div
className="markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>Search timed out</p>
<Markdown
className="streaming-skipped-item__message mt-2 text-left"
dangerousInnerHTML="<p>Search timed out</p>
"
history="[History]"
>
<div
className="streaming-skipped-item__message mt-2 text-left markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>Search timed out</p>
",
}
}
}
onClick={[Function]}
/>
</Markdown>
</div>
</div>
</Transition>
</Fade>
</Alert>
<Alert
closeAriaLabel="Close"
color="info"
fade={false}
isOpen={true}
onClick={[Function]}
/>
</Markdown>
</div>
</Transition>
</Collapse>
<div
className="streaming-skipped-item__bottom-border-spacer mt-3"
/>
</button>
</Button>
</SkippedMessage>
<SkippedMessage
history="[History]"
key="excluded-fork"
tag="div"
transition={
skipped={
Object {
"appear": true,
"baseClass": "fade",
"baseClassActive": "show",
"enter": true,
"exit": true,
"in": true,
"mountOnEnter": false,
"onEnter": [Function],
"onEntered": [Function],
"onEntering": [Function],
"onExit": [Function],
"onExited": [Function],
"onExiting": [Function],
"tag": "div",
"timeout": 150,
"unmountOnExit": true,
"message": "10k forked repositories excluded",
"reason": "excluded-fork",
"severity": "info",
"suggested": Object {
"queryExpression": "forked:yes",
"title": "forked:yes",
},
"title": "10k forked repositories excluded",
}
}
startOpen={false}
>
<Fade
appear={true}
baseClass=""
baseClassActive="show"
className="alert alert-info"
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
role="alert"
tag="div"
timeout={0}
unmountOnExit={true}
<Button
className="streaming-skipped-item pt-3 pb-0 w-100"
color="secondary"
disabled={false}
onClick={[Function]}
tag="button"
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={true}
<button
aria-label={null}
className="streaming-skipped-item pt-3 pb-0 w-100 btn btn-secondary"
disabled={false}
onClick={[Function]}
type="button"
>
<div
className="alert alert-info"
role="alert"
<h4
className="d-flex align-items-center mb-0 w-100"
>
<h4
className="d-flex align-items-center mb-0"
<Memo(InformationOutlineIcon)
className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0"
/>
<span
className="flex-grow-1 text-left"
>
<Memo(InformationOutlineIcon)
className="icon-inline mr-2"
/>
<span>
10k forked repositories excluded
</span>
</h4>
<div
className="mt-2"
10k forked repositories excluded
</span>
<Memo(ChevronLeftIcon)
className="icon-inline flex-shrink-0"
/>
</h4>
<Collapse
appear={false}
enter={true}
exit={true}
in={false}
isOpen={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
tag="div"
timeout={350}
unmountOnExit={false}
>
<Transition
appear={false}
enter={true}
exit={true}
in={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={350}
unmountOnExit={false}
>
<Markdown
dangerousInnerHTML="<p>10k forked repositories excluded</p>
"
history="[History]"
<div
className="collapse"
style={Object {}}
>
<div
className="markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>10k forked repositories excluded</p>
<Markdown
className="streaming-skipped-item__message mt-2 text-left"
dangerousInnerHTML="<p>10k forked repositories excluded</p>
"
history="[History]"
>
<div
className="streaming-skipped-item__message mt-2 text-left markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>10k forked repositories excluded</p>
",
}
}
}
onClick={[Function]}
/>
</Markdown>
</div>
</div>
</Transition>
</Fade>
</Alert>
<Alert
closeAriaLabel="Close"
color="info"
fade={false}
isOpen={true}
onClick={[Function]}
/>
</Markdown>
</div>
</Transition>
</Collapse>
<div
className="streaming-skipped-item__bottom-border-spacer mt-3"
/>
</button>
</Button>
</SkippedMessage>
<SkippedMessage
history="[History]"
key="excluded-archive"
tag="div"
transition={
skipped={
Object {
"appear": true,
"baseClass": "fade",
"baseClassActive": "show",
"enter": true,
"exit": true,
"in": true,
"mountOnEnter": false,
"onEnter": [Function],
"onEntered": [Function],
"onEntering": [Function],
"onExit": [Function],
"onExited": [Function],
"onExiting": [Function],
"tag": "div",
"timeout": 150,
"unmountOnExit": true,
"message": "60k archived repositories excluded",
"reason": "excluded-archive",
"severity": "info",
"suggested": Object {
"queryExpression": "archived:yes",
"title": "archived:yes",
},
"title": "60k archived repositories excluded",
}
}
startOpen={false}
>
<Fade
appear={true}
baseClass=""
baseClassActive="show"
className="alert alert-info"
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
role="alert"
tag="div"
timeout={0}
unmountOnExit={true}
<Button
className="streaming-skipped-item pt-3 pb-0 w-100"
color="secondary"
disabled={false}
onClick={[Function]}
tag="button"
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={true}
<button
aria-label={null}
className="streaming-skipped-item pt-3 pb-0 w-100 btn btn-secondary"
disabled={false}
onClick={[Function]}
type="button"
>
<div
className="alert alert-info"
role="alert"
<h4
className="d-flex align-items-center mb-0 w-100"
>
<h4
className="d-flex align-items-center mb-0"
<Memo(InformationOutlineIcon)
className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0"
/>
<span
className="flex-grow-1 text-left"
>
<Memo(InformationOutlineIcon)
className="icon-inline mr-2"
/>
<span>
60k archived repositories excluded
</span>
</h4>
<div
className="mt-2"
60k archived repositories excluded
</span>
<Memo(ChevronLeftIcon)
className="icon-inline flex-shrink-0"
/>
</h4>
<Collapse
appear={false}
enter={true}
exit={true}
in={false}
isOpen={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
tag="div"
timeout={350}
unmountOnExit={false}
>
<Transition
appear={false}
enter={true}
exit={true}
in={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={350}
unmountOnExit={false}
>
<Markdown
dangerousInnerHTML="<p>60k archived repositories excluded</p>
"
history="[History]"
<div
className="collapse"
style={Object {}}
>
<div
className="markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>60k archived repositories excluded</p>
<Markdown
className="streaming-skipped-item__message mt-2 text-left"
dangerousInnerHTML="<p>60k archived repositories excluded</p>
"
history="[History]"
>
<div
className="streaming-skipped-item__message mt-2 text-left markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>60k archived repositories excluded</p>
",
}
}
}
onClick={[Function]}
/>
</Markdown>
</div>
</div>
</Transition>
</Fade>
</Alert>
<Alert
closeAriaLabel="Close"
color="info"
fade={false}
isOpen={true}
onClick={[Function]}
/>
</Markdown>
</div>
</Transition>
</Collapse>
<div
className="streaming-skipped-item__bottom-border-spacer mt-3"
/>
</button>
</Button>
</SkippedMessage>
<SkippedMessage
history="[History]"
key="excluded-archive"
tag="div"
transition={
skipped={
Object {
"appear": true,
"baseClass": "fade",
"baseClassActive": "show",
"enter": true,
"exit": true,
"in": true,
"mountOnEnter": false,
"onEnter": [Function],
"onEntered": [Function],
"onEntering": [Function],
"onExit": [Function],
"onExited": [Function],
"onExiting": [Function],
"tag": "div",
"timeout": 150,
"unmountOnExit": true,
"message": "By default we exclude archived repositories. Include them with \`archived:yes\` in your query.",
"reason": "excluded-archive",
"severity": "info",
"suggested": Object {
"queryExpression": "archived:yes",
"title": "include archived",
},
"title": "1 archived",
}
}
startOpen={false}
>
<Fade
appear={true}
baseClass=""
baseClassActive="show"
className="alert alert-info"
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
role="alert"
tag="div"
timeout={0}
unmountOnExit={true}
<Button
className="streaming-skipped-item pt-3 pb-0 w-100"
color="secondary"
disabled={false}
onClick={[Function]}
tag="button"
>
<Transition
appear={true}
enter={true}
exit={true}
in={true}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={0}
unmountOnExit={true}
<button
aria-label={null}
className="streaming-skipped-item pt-3 pb-0 w-100 btn btn-secondary"
disabled={false}
onClick={[Function]}
type="button"
>
<div
className="alert alert-info"
role="alert"
<h4
className="d-flex align-items-center mb-0 w-100"
>
<h4
className="d-flex align-items-center mb-0"
<Memo(InformationOutlineIcon)
className="icon-inline mr-2 streaming-skipped-item__icon flex-shrink-0"
/>
<span
className="flex-grow-1 text-left"
>
<Memo(InformationOutlineIcon)
className="icon-inline mr-2"
/>
<span>
1 archived
</span>
</h4>
<div
className="mt-2"
1 archived
</span>
<Memo(ChevronLeftIcon)
className="icon-inline flex-shrink-0"
/>
</h4>
<Collapse
appear={false}
enter={true}
exit={true}
in={false}
isOpen={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
tag="div"
timeout={350}
unmountOnExit={false}
>
<Transition
appear={false}
enter={true}
exit={true}
in={false}
mountOnEnter={false}
onEnter={[Function]}
onEntered={[Function]}
onEntering={[Function]}
onExit={[Function]}
onExited={[Function]}
onExiting={[Function]}
timeout={350}
unmountOnExit={false}
>
<Markdown
dangerousInnerHTML="<p>By default we exclude archived repositories. Include them with <code>archived:yes</code> in your query.</p>
"
history="[History]"
<div
className="collapse"
style={Object {}}
>
<div
className="markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>By default we exclude archived repositories. Include them with <code>archived:yes</code> in your query.</p>
<Markdown
className="streaming-skipped-item__message mt-2 text-left"
dangerousInnerHTML="<p>By default we exclude archived repositories. Include them with <code>archived:yes</code> in your query.</p>
"
history="[History]"
>
<div
className="streaming-skipped-item__message mt-2 text-left markdown"
dangerouslySetInnerHTML={
Object {
"__html": "<p>By default we exclude archived repositories. Include them with <code>archived:yes</code> in your query.</p>
",
}
}
}
onClick={[Function]}
/>
</Markdown>
</div>
</div>
</Transition>
</Fade>
</Alert>
onClick={[Function]}
/>
</Markdown>
</div>
</Transition>
</Collapse>
<div
className="streaming-skipped-item__bottom-border-spacer mt-3"
/>
</button>
</Button>
</SkippedMessage>
<Form
className="pb-3 px-3"
onSubmit={[Function]}
tag="form"
>
<form
className=""
className="pb-3 px-3"
onSubmit={[Function]}
>
<div
className="mb-2"
className="mb-2 mt-3"
>
Search again:
</div>