paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

refactor code

Browse Source
This commit is contained in:
Samira Mokaram
2020-11-13 13:41:46 +01:00
parent ab0cceaa08
commit f9c971b3f7
12 changed files with 258 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/pagerduty/package.json
+1
View File
@@ -23,6 +23,7 @@
"@backstage/core": "^0.1.1-alpha.25",
"@backstage/theme": "^0.1.1-alpha.25",
"@backstage/catalog-model": "^0.1.1-alpha.25",
"@backstage/test-utils": "^0.1.1-alpha.25",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "4.0.0-alpha.45",
plugins/pagerduty/src/components/Escalation.test.tsx
-34
View File
@@ -1,34 +0,0 @@
import React from 'react';
import { render } from '@testing-library/react';
import { EscalationPolicy } from './Escalation';
import { wrapInTestApp } from '@backstage/test-utils';
import { OnCall } from './types';
export const escalations: OnCall[] = [
{
user: {
name: 'person1',
id: 'p1',
summary: 'person1',
email: 'person1@example.com',
html_url: 'http://a.com/id1',
},
},
];
describe('Escalation', () => {
it('render emptyState', () => {
const { getByText } = render(
wrapInTestApp(<EscalationPolicy escalation={[]} />),
);
expect(getByText('Empty escalation policy')).toBeInTheDocument();
});
it('render Escalation list', () => {
const { getByText } = render(
wrapInTestApp(<EscalationPolicy escalation={escalations} />),
);
expect(getByText('person1')).toBeInTheDocument();
expect(getByText('person1@example.com')).toBeInTheDocument();
});
});
plugins/pagerduty/src/components/Escalation/Escalation.test.tsx
+47
View File
@@ -0,0 +1,47 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render } from '@testing-library/react';
import { EscalationPolicy } from './EscalationPolicy';
import { wrapInTestApp } from '@backstage/test-utils';
import { User } from '../types';
const escalations: User[] = [
{
name: 'person1',
id: 'p1',
summary: 'person1',
email: 'person1@example.com',
html_url: 'http://a.com/id1',
},
];
describe('Escalation', () => {
it('render emptyState', () => {
const { getByText } = render(
wrapInTestApp(<EscalationPolicy users={[]} />),
);
expect(getByText('Empty escalation policy')).toBeInTheDocument();
});
it('render Escalation list', () => {
const { getByText } = render(
wrapInTestApp(<EscalationPolicy users={escalations} />),
);
expect(getByText('person1')).toBeInTheDocument();
expect(getByText('person1@example.com')).toBeInTheDocument();
});
});
plugins/pagerduty/src/components/Escalation/EscalationPolicy.tsx
+36
View File
@@ -0,0 +1,36 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { List, ListSubheader } from '@material-ui/core';
import { User } from '../types';
import { EscalationUsersEmptyState } from './EscalationUsersEmptyState';
import { EscalationUser } from './EscalationUser';
type EscalationPolicyProps = {
users: User[];
};
export const EscalationPolicy = ({ users }: EscalationPolicyProps) => (
<List dense subheader={<ListSubheader>ON CALL</ListSubheader>}>
{users.length ? (
users.map((user, index) => <EscalationUser key={index} user={user} />)
) : (
// TODO: how does it look if we used an EmptyState component here
<EscalationUsersEmptyState />
)}
</List>
);
plugins/pagerduty/src/components/Escalation.tsx → plugins/pagerduty/src/components/Escalation/EscalationUser.tsx
+3 -46
View File
@@ -16,8 +16,6 @@
import React from 'react';
import {
List,
ListSubheader,
ListItem,
ListItemIcon,
ListItemSecondaryAction,
@@ -29,27 +27,16 @@ import {
} from '@material-ui/core';
import Avatar from '@material-ui/core/Avatar';
import EmailIcon from '@material-ui/icons/Email';
import { StatusWarning } from '@backstage/core';
import { OnCall } from './types';
import PagerdutyIcon from './Pd';
import PagerdutyIcon from '../Pd';
import { User } from '../types';
const useStyles = makeStyles({
denseListIcon: {
marginRight: 0,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
svgButtonImage: {
height: '1em',
},
listItemPrimary: {
fontWeight: 'bold',
},
});
const EscalationUser = ({ user }: OnCall) => {
export const EscalationUser = ({ user }: { user: User }) => {
const classes = useStyles();
return (
<ListItem>
@@ -84,33 +71,3 @@ const EscalationUser = ({ user }: OnCall) => {
</ListItem>
);
};
const EscalationUsersEmptyState = () => {
const classes = useStyles();
return (
<ListItem>
<ListItemIcon>
<div className={classes.denseListIcon}>
<StatusWarning />
</div>
</ListItemIcon>
<ListItemText primary="Empty escalation policy" />
</ListItem>
);
};
type EscalationPolicyProps = {
escalation: OnCall[];
};
export const EscalationPolicy = ({ escalation }: EscalationPolicyProps) => (
<List dense subheader={<ListSubheader>ON CALL</ListSubheader>}>
{escalation.length ? (
escalation.map((item, index) => (
<EscalationUser key={item.user.id + index} user={item.user} />
))
) : (
<EscalationUsersEmptyState />
)}
</List>
);
plugins/pagerduty/src/components/Escalation/EscalationUsersEmptyState.tsx
+48
View File
@@ -0,0 +1,48 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import {
ListItem,
ListItemIcon,
ListItemText,
makeStyles,
} from '@material-ui/core';
import { StatusWarning } from '@backstage/core';
const useStyles = makeStyles({
denseListIcon: {
marginRight: 0,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
});
export const EscalationUsersEmptyState = () => {
const classes = useStyles();
return (
<ListItem>
<ListItemIcon>
<div className={classes.denseListIcon}>
<StatusWarning />
</div>
</ListItemIcon>
<ListItemText primary="Empty escalation policy" />
</ListItem>
);
};
plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx
+36
View File
@@ -0,0 +1,36 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Grid } from '@material-ui/core';
import EmptyStateImage from '../../assets/emptyState.svg';
export const IncidentsEmptyState = () => {
return (
<Grid container justify="center" direction="column" alignItems="center">
<Grid item xs={12}>
<h2>Nice! No incidents are assigned to you!</h2>
</Grid>
<Grid item xs={12}>
<img
src={EmptyStateImage}
alt="EmptyState"
data-testid="emptyStateImg"
/>
</Grid>
</Grid>
);
};
plugins/pagerduty/src/components/Incidents.tsx → plugins/pagerduty/src/components/Incident/IncidentListItem.tsx
+8 -43
View File
@@ -16,7 +16,6 @@
import React from 'react';
import {
List,
ListItem,
ListItemIcon,
ListItemSecondaryAction,
@@ -24,14 +23,17 @@ import {
ListItemText,
makeStyles,
IconButton,
ListSubheader,
Link,
Typography,
} from '@material-ui/core';
import { StatusError, StatusWarning, StatusOK } from '@backstage/core';
import { StatusError, StatusWarning } from '@backstage/core';
import moment from 'moment';
import { Incident } from '../components/types';
import PagerdutyIcon from './Pd';
import { Incident } from '../types';
import PagerdutyIcon from '../Pd';
type IncidentListItemProps = {
incident: Incident;
};
const useStyles = makeStyles({
denseListIcon: {
@@ -41,9 +43,6 @@ const useStyles = makeStyles({
alignItems: 'center',
justifyContent: 'center',
},
svgButtonImage: {
height: '1em',
},
listItemPrimary: {
fontWeight: 'bold',
},
@@ -52,25 +51,7 @@ const useStyles = makeStyles({
},
});
const IncidentsEmptyState = () => {
const classes = useStyles();
return (
<ListItem>
<ListItemIcon>
<div className={classes.denseListIcon}>
<StatusOK />
</div>
</ListItemIcon>
<ListItemText primary="No incidents" secondary="All clear!" />
</ListItem>
);
};
type IncidentListItemProps = {
incident: Incident;
};
const IncidentListItem = ({ incident }: IncidentListItemProps) => {
export const IncidentListItem = ({ incident }: IncidentListItemProps) => {
const classes = useStyles();
const user = incident.assignments[0].assignee;
return (
@@ -117,19 +98,3 @@ const IncidentListItem = ({ incident }: IncidentListItemProps) => {
</ListItem>
);
};
type IncidentsProps = {
incidents: Incident[];
};
export const Incidents = ({ incidents }: IncidentsProps) => (
<List dense subheader={<ListSubheader>INCIDENTS</ListSubheader>}>
{incidents.length ? (
incidents.map((incident, index) => (
<IncidentListItem key={incident.id + index} incident={incident} />
))
) : (
<IncidentsEmptyState />
)}
</List>
);
plugins/pagerduty/src/components/Incidents.test.tsx → plugins/pagerduty/src/components/Incident/Incidents.test.tsx
+20 -3
View File
@@ -1,10 +1,25 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render } from '@testing-library/react';
import { Incidents } from './Incidents';
import { wrapInTestApp } from '@backstage/test-utils';
import { Incident } from './types';
import { Incident } from '../types';
export const incidents: Incident[] = [
const incidents: Incident[] = [
{
id: 'id1',
status: 'triggered',
@@ -48,7 +63,9 @@ export const incidents: Incident[] = [
describe('Incidents', () => {
it('renders an empty state is there are no incidents', () => {
const { getByText } = render(wrapInTestApp(<Incidents incidents={[]} />));
expect(getByText('No incidents')).toBeInTheDocument();
expect(
getByText('Nice! No incidents are assigned to you!'),
).toBeInTheDocument();
});
it('renders all incidents', () => {
plugins/pagerduty/src/components/Incident/Incidents.tsx
+40
View File
@@ -0,0 +1,40 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { List, ListSubheader } from '@material-ui/core';
import { Incident } from '../types';
import { IncidentListItem } from './IncidentListItem';
import { IncidentsEmptyState } from './IncidentEmptyState';
type IncidentsProps = {
incidents: Incident[];
};
export const Incidents = ({ incidents }: IncidentsProps) => (
<List
dense
subheader={<ListSubheader>{incidents.length && 'INCIDENTS'}</ListSubheader>}
>
{incidents.length ? (
incidents.map((incident, index) => (
<IncidentListItem key={incident.id + index} incident={incident} />
))
) : (
<IncidentsEmptyState />
)}
</List>
);
plugins/pagerduty/src/components/PagerDutyServiceCard.tsx
+2 -2
View File
@@ -17,8 +17,8 @@ import React from 'react';
import { useApi } from '@backstage/core';
import { Entity } from '@backstage/catalog-model';
import { LinearProgress } from '@material-ui/core';
import { Incidents } from './Incidents';
import { EscalationPolicy } from './Escalation';
import { Incidents } from './Incident/Incidents';
import { EscalationPolicy } from './Escalation/EscalationPolicy';
import { TriggerButton } from './TriggerButton';
import { useAsync } from 'react-use';
import { Alert } from '@material-ui/lab';
plugins/pagerduty/src/components/TriggerDialog.test.tsx
+17 -16
View File
@@ -1,7 +1,21 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { render, fireEvent, getByTestId } from '@testing-library/react';
import { render, fireEvent } from '@testing-library/react';
import { wrapInTestApp } from '@backstage/test-utils';
import { TriggerDialog } from './TriggerDialog';
import {
ApiRegistry,
alertApiRef,
@@ -38,8 +52,6 @@ describe('TriggerDialog', () => {
]);
it('open the dialog and trigger an alarm', async () => {
const onClick = jest.fn(async () => {});
const entity: Entity = {
apiVersion: 'backstage.io/v1alpha1',
kind: 'Component',
@@ -51,21 +63,10 @@ describe('TriggerDialog', () => {
},
};
const {
getByText,
getByRole,
queryByText,
queryByRole,
getByTestId,
} = render(
const { getByText, getByRole, queryByRole, getByTestId } = render(
wrapInTestApp(
<ApiProvider apis={apis}>
<TriggerButton entity={entity} />
{/* <TriggerDialog
name="pagerduty-plugin"
onClose={onClick}
integrationKey=""
/> */}
</ApiProvider>,
),
);