/
GlobalCampaignListPage.tsx
87 lines (82 loc) · 3.39 KB
/
GlobalCampaignListPage.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, { useEffect } from 'react'
import { queryCampaigns as _queryCampaigns } from './backend'
import { RouteComponentProps } from 'react-router'
import { FilteredConnection, FilteredConnectionFilter } from '../../../../components/FilteredConnection'
import { IUser, CampaignState } from '../../../../../../shared/src/graphql/schema'
import { CampaignNode, CampaignNodeCampaign, CampaignNodeProps } from '../../list/CampaignNode'
import { TelemetryProps } from '../../../../../../shared/src/telemetry/telemetryService'
interface Props extends TelemetryProps, Pick<RouteComponentProps, 'history' | 'location'> {
authenticatedUser: Pick<IUser, 'siteAdmin'>
queryCampaigns?: typeof _queryCampaigns
}
const FILTERS: FilteredConnectionFilter[] = [
{
label: 'All',
id: 'all',
tooltip: 'Show all campaigns',
args: {},
},
{
label: 'Open',
id: 'open',
tooltip: 'Show only campaigns that are open',
args: { state: CampaignState.OPEN },
},
{
label: 'Closed',
id: 'closed',
tooltip: 'Show only campaigns that are closed',
args: { state: CampaignState.CLOSED },
},
]
/**
* A list of all campaigns on the Sourcegraph instance.
*/
export const GlobalCampaignListPage: React.FunctionComponent<Props> = ({
queryCampaigns = _queryCampaigns,
...props
}) => {
useEffect(() => props.telemetryService.logViewEvent('CampaignsListPage'), [props.telemetryService])
return (
<>
<div className="d-flex justify-content-between align-items-end mb-3">
<div>
<h1 className="mb-2">
Campaigns{' '}
<sup>
<span className="badge badge-info text-uppercase">Beta</span>
</sup>
</h1>
<p className="mb-0">
Perform and track large-scale code changes.{' '}
<a href="https://docs.sourcegraph.com/user/campaigns">Learn how.</a>
</p>
</div>
</div>
<div className="card mt-4 mb-4">
<div className="card-body p-3">
<h3>Welcome to campaigns!</h3>
<p className="mb-1">
We're excited for you to use campaigns to remove legacy code, fix critical security issues, pay
down tech debt, and more. We look forward to hearing about campaigns you run inside your
organization. Take a look at some{' '}
<a href="https://docs.sourcegraph.com/user/campaigns/examples">examples in our documentation</a>
, and <a href="mailto:feedback@sourcegraph.com?subject=Campaigns feedback">get in touch</a> with
any questions or feedback!
</p>
</div>
</div>
<FilteredConnection<CampaignNodeCampaign, Omit<CampaignNodeProps, 'node'>>
{...props}
nodeComponent={CampaignNode}
nodeComponentProps={{ history: props.history }}
queryConnection={queryCampaigns}
hideSearch={true}
filters={FILTERS}
noun="campaign"
pluralNoun="campaigns"
className="mb-3"
/>
</>
)
}