From f9c971b3f7a8ee85e994aeb5ef79b0d5a097e3f5 Mon Sep 17 00:00:00 2001 From: Samira Mokaram Date: Fri, 13 Nov 2020 13:41:46 +0100 Subject: [PATCH] refactor code --- plugins/pagerduty/package.json | 1 + .../src/components/Escalation.test.tsx | 34 ------------- .../components/Escalation/Escalation.test.tsx | 47 +++++++++++++++++ .../Escalation/EscalationPolicy.tsx | 36 +++++++++++++ .../EscalationUser.tsx} | 49 ++---------------- .../Escalation/EscalationUsersEmptyState.tsx | 48 +++++++++++++++++ .../Incident/IncidentEmptyState.tsx | 36 +++++++++++++ .../IncidentListItem.tsx} | 51 +++---------------- .../{ => Incident}/Incidents.test.tsx | 23 +++++++-- .../src/components/Incident/Incidents.tsx | 40 +++++++++++++++ .../src/components/PagerDutyServiceCard.tsx | 4 +- .../src/components/TriggerDialog.test.tsx | 33 ++++++------ 12 files changed, 258 insertions(+), 144 deletions(-) delete mode 100644 plugins/pagerduty/src/components/Escalation.test.tsx create mode 100644 plugins/pagerduty/src/components/Escalation/Escalation.test.tsx create mode 100644 plugins/pagerduty/src/components/Escalation/EscalationPolicy.tsx rename plugins/pagerduty/src/components/{Escalation.tsx => Escalation/EscalationUser.tsx} (63%) create mode 100644 plugins/pagerduty/src/components/Escalation/EscalationUsersEmptyState.tsx create mode 100644 plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx rename plugins/pagerduty/src/components/{Incidents.tsx => Incident/IncidentListItem.tsx} (72%) rename plugins/pagerduty/src/components/{ => Incident}/Incidents.test.tsx (71%) create mode 100644 plugins/pagerduty/src/components/Incident/Incidents.tsx diff --git a/plugins/pagerduty/package.json b/plugins/pagerduty/package.json index e5d0264be3..43aad8579a 100644 --- a/plugins/pagerduty/package.json +++ b/plugins/pagerduty/package.json @@ -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", diff --git a/plugins/pagerduty/src/components/Escalation.test.tsx b/plugins/pagerduty/src/components/Escalation.test.tsx deleted file mode 100644 index 13e2687b04..0000000000 --- a/plugins/pagerduty/src/components/Escalation.test.tsx +++ /dev/null @@ -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(), - ); - expect(getByText('Empty escalation policy')).toBeInTheDocument(); - }); - - it('render Escalation list', () => { - const { getByText } = render( - wrapInTestApp(), - ); - expect(getByText('person1')).toBeInTheDocument(); - expect(getByText('person1@example.com')).toBeInTheDocument(); - }); -}); diff --git a/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx b/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx new file mode 100644 index 0000000000..3e4a59d15a --- /dev/null +++ b/plugins/pagerduty/src/components/Escalation/Escalation.test.tsx @@ -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(), + ); + expect(getByText('Empty escalation policy')).toBeInTheDocument(); + }); + + it('render Escalation list', () => { + const { getByText } = render( + wrapInTestApp(), + ); + expect(getByText('person1')).toBeInTheDocument(); + expect(getByText('person1@example.com')).toBeInTheDocument(); + }); +}); diff --git a/plugins/pagerduty/src/components/Escalation/EscalationPolicy.tsx b/plugins/pagerduty/src/components/Escalation/EscalationPolicy.tsx new file mode 100644 index 0000000000..8a2aacead9 --- /dev/null +++ b/plugins/pagerduty/src/components/Escalation/EscalationPolicy.tsx @@ -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) => ( + ON CALL}> + {users.length ? ( + users.map((user, index) => ) + ) : ( + // TODO: how does it look if we used an EmptyState component here + + )} + +); diff --git a/plugins/pagerduty/src/components/Escalation.tsx b/plugins/pagerduty/src/components/Escalation/EscalationUser.tsx similarity index 63% rename from plugins/pagerduty/src/components/Escalation.tsx rename to plugins/pagerduty/src/components/Escalation/EscalationUser.tsx index 56c2c27a03..3fa8ef8d65 100644 --- a/plugins/pagerduty/src/components/Escalation.tsx +++ b/plugins/pagerduty/src/components/Escalation/EscalationUser.tsx @@ -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 ( @@ -84,33 +71,3 @@ const EscalationUser = ({ user }: OnCall) => { ); }; - -const EscalationUsersEmptyState = () => { - const classes = useStyles(); - return ( - - -
- -
- - - - ); -}; - -type EscalationPolicyProps = { - escalation: OnCall[]; -}; - -export const EscalationPolicy = ({ escalation }: EscalationPolicyProps) => ( - ON CALL}> - {escalation.length ? ( - escalation.map((item, index) => ( - - )) - ) : ( - - )} - -); diff --git a/plugins/pagerduty/src/components/Escalation/EscalationUsersEmptyState.tsx b/plugins/pagerduty/src/components/Escalation/EscalationUsersEmptyState.tsx new file mode 100644 index 0000000000..d587011601 --- /dev/null +++ b/plugins/pagerduty/src/components/Escalation/EscalationUsersEmptyState.tsx @@ -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 ( + + +
+ +
+ + + + ); +}; diff --git a/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx b/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx new file mode 100644 index 0000000000..ded161261e --- /dev/null +++ b/plugins/pagerduty/src/components/Incident/IncidentEmptyState.tsx @@ -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 ( + + +

Nice! No incidents are assigned to you!

+ + + EmptyState + + + ); +}; diff --git a/plugins/pagerduty/src/components/Incidents.tsx b/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx similarity index 72% rename from plugins/pagerduty/src/components/Incidents.tsx rename to plugins/pagerduty/src/components/Incident/IncidentListItem.tsx index 52247b8f06..f01c99fc8c 100644 --- a/plugins/pagerduty/src/components/Incidents.tsx +++ b/plugins/pagerduty/src/components/Incident/IncidentListItem.tsx @@ -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 ( - - -
- -
- - - - ); -}; - -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) => { ); }; - -type IncidentsProps = { - incidents: Incident[]; -}; - -export const Incidents = ({ incidents }: IncidentsProps) => ( - INCIDENTS}> - {incidents.length ? ( - incidents.map((incident, index) => ( - - )) - ) : ( - - )} - -); diff --git a/plugins/pagerduty/src/components/Incidents.test.tsx b/plugins/pagerduty/src/components/Incident/Incidents.test.tsx similarity index 71% rename from plugins/pagerduty/src/components/Incidents.test.tsx rename to plugins/pagerduty/src/components/Incident/Incidents.test.tsx index 62c8151af2..fbe3783d30 100644 --- a/plugins/pagerduty/src/components/Incidents.test.tsx +++ b/plugins/pagerduty/src/components/Incident/Incidents.test.tsx @@ -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()); - expect(getByText('No incidents')).toBeInTheDocument(); + expect( + getByText('Nice! No incidents are assigned to you!'), + ).toBeInTheDocument(); }); it('renders all incidents', () => { diff --git a/plugins/pagerduty/src/components/Incident/Incidents.tsx b/plugins/pagerduty/src/components/Incident/Incidents.tsx new file mode 100644 index 0000000000..a49d913c80 --- /dev/null +++ b/plugins/pagerduty/src/components/Incident/Incidents.tsx @@ -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) => ( + {incidents.length && 'INCIDENTS'}} + > + {incidents.length ? ( + incidents.map((incident, index) => ( + + )) + ) : ( + + )} + +); diff --git a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx index d343a9fea1..480e7cdbd6 100644 --- a/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx +++ b/plugins/pagerduty/src/components/PagerDutyServiceCard.tsx @@ -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'; diff --git a/plugins/pagerduty/src/components/TriggerDialog.test.tsx b/plugins/pagerduty/src/components/TriggerDialog.test.tsx index a99e2c03f4..387b168e05 100644 --- a/plugins/pagerduty/src/components/TriggerDialog.test.tsx +++ b/plugins/pagerduty/src/components/TriggerDialog.test.tsx @@ -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( - {/* */} , ), );