Skip to content

Commit

Permalink
fix: reorganize javascript, start adding comments
Browse files Browse the repository at this point in the history
  • Loading branch information
prototypicalpro committed Oct 27, 2020
1 parent 8d13fb1 commit 0dee129
Show file tree
Hide file tree
Showing 12 changed files with 600 additions and 480 deletions.
146 changes: 146 additions & 0 deletions nerdlets/maintainer-dashboard/components/dashboard.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import React from 'react';
import {
Card,
CardHeader,
CardBody,
HeadingText,
Spinner,
Grid,
GridItem,
Stack,
StackItem,
Spacing,
Table,
TableHeader,
TableHeaderCell,
TableRow,
TableRowCell,
Button,
Tabs,
TabsItem,
BillboardChart,
BlockText,
Icon,
Modal,
TextField,
Link,
Select,
SelectItem,
UserStorageMutation,
} from 'nr1';
import { KNOWN_LABEL_COLORS } from './issueLabel';
import SettingsUI from './settings';
import DashboardData from './dashboardData';
import UserSettingsQuery from '../util/storageUtil';
import { client } from '../graphql/ApolloClientInstance';
import NewRelicUsers from '../data/userdata-sample.json';

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

export default class MaintainerDashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
queryKey: 0,
settingsHidden: true,
};
}

render() {
return (
<Card style={{ height: '100%' }}>
<CardBody style={{ height: '100%' }}>
<UserSettingsQuery key={this.state.queryKey}>
{({ loading, token, settings }) => {
if (loading)
return <Spinner fillContainer style={{ height: '100%' }} />;
// create apollo client and settings UI
const gqlClient = client(token);
// return settings selection front and center if we have no settings
if (!token || !settings)
return (
<SettingsUI
labelOptions={Array.from(
KNOWN_LABEL_COLORS.entries()
).map(([name, color]) => ({ name, color }))}
onSubmit={() =>
this.setState(({ queryKey }) => ({
settingsHidden: true,
queryKey: queryKey + 1,
}))
}
client={gqlClient}
style={{ maxWidth: '60em' }}
/>
);
return (
// else return the dashboard with a settings modal
<>
<DashboardData
client={gqlClient}
companyUsers={RELICS.concat(settings.users)}
scanRepos={settings.repos}
ignoreLabels={settings.labels}
ignoreUsers={settings.users}
staleTime={settings.staleTime}
/>
<Modal
hidden={this.state.settingsHidden}
onClose={() => this.setState({ settingsHidden: true })}
onHideEnd={() =>
this.setState(({ queryKey }) => ({
queryKey: queryKey + 1,
}))
}
>
<SettingsUI
labelOptions={Array.from(
KNOWN_LABEL_COLORS.entries()
).map(([name, color]) => ({ name, color }))}
onSubmit={() =>
this.setState(() => ({
settingsHidden: true,
}))
}
client={gqlClient}
/>
</Modal>
<Stack
style={{
position: 'absolute',
right: '24px',
top: '8px',
}}
directionType={Stack.DIRECTION_TYPE.HORIZONTAL}
>
<StackItem>
<Button
iconType={Icon.TYPE.PROFILES__EVENTS__COMMENT__A_EDIT}
type={Button.TYPE.PLAIN}
to="https://github.com/newrelic/nr1-ospo/issues/new/choose"
>
Submit an Issue
</Button>
</StackItem>
<StackItem>
<Button
iconType={Icon.TYPE.INTERFACE__OPERATIONS__CONFIGURE}
type={Button.TYPE.NORMAL}
onClick={() => this.setState({ settingsHidden: false })}
>
Configure
</Button>
</StackItem>
</Stack>
</>
);
}}
</UserSettingsQuery>
</CardBody>
</Card>
);
}
}
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import * as humanizeDuration from 'humanize-duration';
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, {
textFilter,
selectFilter,
dateFilter,
Comparator,
multiSelectFilter,
} from 'react-bootstrap-table2-filter';
import {
Spinner,
Stack,
Expand All @@ -18,18 +10,19 @@ import {
TableHeaderCell,
TableRow,
TableRowCell,
Button,
Tabs,
TabsItem,
BillboardChart,
Icon,
Link,
Tooltip,
} from 'nr1';
import { getGithubData } from './githubData';
import { findDashboardItems } from '../graphql/githubData';
import { IssueTable } from './issueTable';

export default class Dashboard extends React.Component {
// TODO: figure out how to fix the tab labels from duplicating the key

export default class DashboardData extends React.Component {
static propTypes = {
client: PropTypes.object,
scanRepos: PropTypes.arrayOf(PropTypes.string),
Expand All @@ -52,7 +45,7 @@ export default class Dashboard extends React.Component {
async componentDidMount() {
// send to UI
this.setState(
await getGithubData(this.props.client, {
await findDashboardItems(this.props.client, {
scanRepos: this.props.scanRepos,
companyUsers: this.props.companyUsers.concat(this.props.ignoreUsers),
ignoreLabels: this.props.ignoreLabels,
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import filterFactory, {
} from 'react-bootstrap-table2-filter';
import { Button, Icon } from 'nr1';
import { IssueLabel } from './issueLabel';
import PullRequestLogo from './img/git-pull-request-16.svg';
import IssueLogo from './img/issue-opened-16.svg';
import PullRequestLogo from '../img/git-pull-request-16.svg';
import IssueLogo from '../img/issue-opened-16.svg';

/** */
export class IssueTable extends React.PureComponent {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import gql from 'graphql-tag';
import {
HeadingText,
Stack,
Expand All @@ -14,24 +13,8 @@ import {
} from 'nr1';
import { Multiselect } from 'react-widgets';
import { IssueLabel } from './issueLabel';
import UserSettingsQuery from './storageUtil';

const GET_CUR_USER_INFO = gql`
query($repoCursor: String) {
viewer {
login
repositories(
affiliations: [OWNER, COLLABORATOR, ORGANIZATION_MEMBER]
first: 100
after: $repoCursor
) {
nodes {
nameWithOwner
}
}
}
}
`;
import { getUserInfo } from '../graphql/githubData';
import UserSettingsQuery from '../util/storageUtil';

export default class SettingsUI extends React.Component {
static splitRepositoryNames(searchTerm) {
Expand Down Expand Up @@ -105,49 +88,39 @@ export default class SettingsUI extends React.Component {
});
// test the token with a user information query
const curNum = ++this.curFetchIndex;
return this.props.client
.query({
query: GET_CUR_USER_INFO,
fetchPolicy: 'network-only',
context: {
headers: {
authorization: `Bearer ${token}`,
try {
const data = await getUserInfo(this.props.client, this.state.token);
// prevent race conditions
if (curNum === this.curFetchIndex) {
this.setState({
patStatus: {
valid: true,
userName: data?.viewer?.login,
repoOptions: data?.viewer?.repositories?.nodes?.map?.(
({ nameWithOwner }) => nameWithOwner
),
},
},
})
.then(({ data }) => {
// prevent race conditions
if (curNum === this.curFetchIndex) {
});
}
} catch (e) {
// prevent race condition
if (curNum === this.curFetchIndex) {
if (e?.networkError?.statusCode === 401)
this.setState({
patStatus: {
valid: true,
userName: data?.viewer?.login,
repoOptions: data?.viewer?.repositories?.nodes?.map?.(
({ nameWithOwner }) => nameWithOwner
),
valid: false,
message: 'Token returned authorization error',
},
});
}
})
.catch((e) => {
// prevent race condition
if (curNum === this.curFetchIndex) {
if (e?.networkError?.statusCode === 401)
this.setState({
patStatus: {
valid: false,
message: 'Token returned authorization error',
},
});
else
this.setState({
patStatus: {
valid: false,
message: 'Unknown GitHub API error',
},
});
}
});
else
this.setState({
patStatus: {
valid: false,
message: 'Unknown GitHub API error',
},
});
}
}
}

handlePATToken(event) {
Expand Down
82 changes: 0 additions & 82 deletions nerdlets/maintainer-dashboard/githubData.js

This file was deleted.

Loading

0 comments on commit 0dee129

Please sign in to comment.