Skip to content

Commit

Permalink
feat: add settings modal with NerdVault integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@prototypicalpro
prototypicalpro committed Oct 20, 2020
1 parent 31ef828 commit 69bc0ec
Show file tree
Hide file tree
Showing 8 changed files with 673 additions and 178 deletions.
15 changes: 15 additions & 0 deletions .extended-webpackrc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|ttf|eot|woff2)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
};
175 changes: 13 additions & 162 deletions nerdlets/maintainer-dashboard/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,14 @@ import {
Icon,
Modal,
TextField,
Link
Link,
Select,
SelectItem,
UserStorageMutation,
} from 'nr1';
import { GitHub } from 'react-feather';
import { getGithubData } from './githubData';
import { IssueLabel, KNOWN_LABEL_COLORS } from './issueLabel';
import SettingsUI from './settings';
import PullRequestLogo from './img/git-pull-request-16.svg';
import IssueLogo from './img/issue-opened-16.svg';
import NewRelicUsers from './data/userdata-sample.json';
Expand All @@ -48,21 +52,8 @@ const STALE_TIME = 1000 * 60 * 60 * 24 * 14; // 2 weeks in ms

const RELICS = Object.values(NewRelicUsers)
.filter(u => u.user_type === 'relic' || u.user_type === 'contractor')
.map(u => u.login);

const KNOWN_LABEL_COLORS = new Map([
['bug', 'd73a4a'],
['documentation', '0075ca'],
['duplicate', 'cfd3d7'],
['enhancement', 'a2eeef'],
['good first issue', '7057ff'],
['help wanted', '008672'],
['invalid', 'e4e669'],
['question', 'd876e3'],
['wontfix', 'ffffff'],
['dependencies', '0366d6'],
['repolinter', 'fbca04'],
]);
.map(u => u.login)
.sort();

const REPOS = [
'newrelic/go-agent',
Expand Down Expand Up @@ -117,15 +108,6 @@ const REPOS = [
'newrelic/k8s-webhook-cert-manager' */
];

// stolen from https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
function pickTextColorBasedOnBgColor(bgColor, lightColor, darkColor) {
const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
const r = parseInt(color.substring(0, 2), 16); // hexToR
const g = parseInt(color.substring(2, 4), 16); // hexToG
const b = parseInt(color.substring(4, 6), 16); // hexToB
return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;
}

class IssueTable extends React.PureComponent {
constructor(props) {
super(props);
Expand Down Expand Up @@ -226,44 +208,7 @@ class IssueTable extends React.PureComponent {
}),
filterValue: cell => cell.map(({ name }) => name),
formatter: cell =>
cell.map(({ name, color }) => {
const bgColor = KNOWN_LABEL_COLORS.has(name)
? KNOWN_LABEL_COLORS.get(name)
: color;
return (
<span
key={name}
style={{
padding: '0 7px',
border: '1px solid transparent',
borderRadius: '2em',
marginRight: '6px',
backgroundColor: `#${bgColor}`,
boxSizing: 'border-box',
display: 'inline-block',
}}
>
<BlockText
type={BlockText.TYPE.PARAGRAPH}
tagType={BlockText.TYPE.P}
style={{
fontSize: '12px',
fontWeight: '500',
lineHeight: '18px',
color: pickTextColorBasedOnBgColor(
bgColor,
'#ffffff',
'#000000'
),
display: 'inline-block',
boxSizing: 'border-box',
}}
>
{name}
</BlockText>
</span>
);
}),
cell.map(({ name, color }) => <IssueLabel key={name} name={name} color={color} />),
},
{
dataField: 'title',
Expand Down Expand Up @@ -343,104 +288,10 @@ export default class MaintainerDashboard extends React.Component {
return (
<div>
<Modal hidden={this.state.settingsHidden} onClose={() => this.setState({ settingsHidden: true })}>
<Stack
fullWidth
horizontalType={Stack.HORIZONTAL_TYPE.FILL}
directionType={Stack.DIRECTION_TYPE.VERTICAL}
gapType={Stack.GAP_TYPE.EXTRA_LARGE}>
<StackItem>
<HeadingText type={HeadingText.TYPE.HEADING_1}>
Dashboard Configuration
</HeadingText>
</StackItem>
<StackItem>
<BlockText type={BlockText.TYPE.NORMAL}>
Supply a personal access token to allow this dashboard to access GitHub's GraphQL API. The token does not need to have any special permissions.
See the{' '}
<Link to="https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token">GitHub documentation</Link> for
more information on creating and using personal access tokens.
</BlockText>
</StackItem>
<StackItem>
<BlockText type={BlockText.TYPE.NORMAL}>
Your personal access token will stored in NerdStorage vault, and only be accessible to you. The token can be removed or revoked at any time.
</BlockText>
</StackItem>
<StackItem>
<Stack
fullWidth
directionType={Stack.DIRECTION_TYPE.HORIZONTAL}
verticalType={Stack.VERTICAL_TYPE.CENTER}>
<StackItem grow>
<TextField
label="Personal Access Token"
type={TextField.TYPE.PASSWORD}
style={{ width: '100%' }}/>
</StackItem>
<StackItem>
<Button
type={Button.TYPE.DESTRUCTIVE}
iconType={Icon.TYPE.INTERFACE__OPERATIONS__TRASH}>
Remove Token
</Button>
</StackItem>
</Stack>
</StackItem>
<StackItem>
<BlockText type={BlockText.TYPE.NORMAL}>
Select which repositories you would like this tool to scan.
</BlockText>
</StackItem>
<StackItem>
<Table
items={[{ first: true, repo: null }].concat(
REPOS.map(repo => ({ repo }))
)}
>
<TableHeader>
<TableHeaderCell
value={() => 'delete'}
width="80px"
/>
<TableHeaderCell value={({ item }) => item.repo}>
Repositories
</TableHeaderCell>
</TableHeader>
{({ item }) =>
item.first ? (
<TableRow>
<TableRowCell />
<TableRowCell>
<Button
type={Button.TYPE.PLAIN}
iconType={
Button.ICON_TYPE.INTERFACE__SIGN__PLUS
}
onClick={() => {}}
>
Add another repository
</Button>
</TableRowCell>
</TableRow>
) : (
<TableRow>
<TableRowCell>
<Button
type={Button.TYPE.PLAIN}
iconType={
Button.ICON_TYPE
.INTERFACE__OPERATIONS__TRASH
}
onClick={() => {}}
/>
</TableRowCell>
<TableRowCell>{item.repo}</TableRowCell>
</TableRow>
)
}
</Table>
</StackItem>
</Stack>
<SettingsUI
client={this.client}
labelOptions={Array.from(KNOWN_LABEL_COLORS.entries()).map(([name, color]) => ({name, color}))}
onSubmit={() => this.setState({ settingsHidden: true })} />
</Modal>
{!this.state.newSearchItems || !this.state.staleSearchItems ? (
<Spinner fillContainer style={{ height: '100vh' }} />
Expand Down
66 changes: 66 additions & 0 deletions nerdlets/maintainer-dashboard/issueLabel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import React from 'react';
import { BlockText } from 'nr1';

export const KNOWN_LABEL_COLORS = new Map([
['bug', 'd73a4a'],
['documentation', '0075ca'],
['duplicate', 'cfd3d7'],
['enhancement', 'a2eeef'],
['good first issue', '7057ff'],
['help wanted', '008672'],
['invalid', 'e4e669'],
['question', 'd876e3'],
['wontfix', 'ffffff'],
['dependencies', '0366d6'],
['repolinter', 'fbca04']
]);

// stolen from https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
function pickTextColorBasedOnBgColor(bgColor, lightColor, darkColor) {
const color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
const r = parseInt(color.substring(0, 2), 16); // hexToR
const g = parseInt(color.substring(2, 4), 16); // hexToG
const b = parseInt(color.substring(4, 6), 16); // hexToB
return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;
}

export class IssueLabel extends React.PureComponent {
constructor(props) {
super(props);
}

render() {
const bgColor = KNOWN_LABEL_COLORS.has(this.props.name)
? KNOWN_LABEL_COLORS.get(this.props.name)
: this.props.color;
return (
<span
key={this.props.name}
style={{
padding: '0 7px',
border: '1px solid transparent',
borderRadius: '2em',
marginRight: '6px',
backgroundColor: `#${bgColor}`,
boxSizing: 'border-box',
display: 'inline-block'
}}
>
<BlockText
type={BlockText.TYPE.PARAGRAPH}
tagType={BlockText.TYPE.P}
style={{
fontSize: '12px',
fontWeight: '500',
lineHeight: '18px',
color: pickTextColorBasedOnBgColor(bgColor, '#ffffff', '#000000'),
display: 'inline-block',
boxSizing: 'border-box'
}}
>
{this.props.name}
</BlockText>
</span>
);
}
}
Loading

0 comments on commit 69bc0ec

Please sign in to comment.