Skip to content

Commit

Permalink
Add action item and list, component design, logic, and tests (#394)
Browse files Browse the repository at this point in the history 
* Add action item and list component design, logic, and tests

* Change deploy dialog
  • Loading branch information
@jaypontes
jaypontes authored Nov 4, 2022
1 parent d0899db commit a81828f
Show file tree
Hide file tree
Showing 6 changed files with 435 additions and 23 deletions.
6 changes: 6 additions & 0 deletions services/frontend-service/src/images/Delete_Gray.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions services/frontend-service/src/images/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { ReactComponent as Environments } from './Environments.svg';
import { ReactComponent as Locks } from './Locks.svg';
import { ReactComponent as LocksWhite } from './Locks_White.svg';
import { ReactComponent as Delete } from './Delete.svg';
import { ReactComponent as DeleteGray } from './Delete_Gray.svg';
import { ReactComponent as DeleteWhite } from './Delete_White.svg';
import { ReactComponent as HistoryWhite } from './History_White.svg';
import { ReactComponent as ShowBar } from './ShowBar.svg';
Expand All @@ -37,6 +38,7 @@ export {
LocksWhite,
Environments,
Delete,
DeleteGray,
ShowBar,
HideBar,
History,
Expand Down
61 changes: 58 additions & 3 deletions services/frontend-service/src/ui/components/SideBar/SideBar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
width: 100%;
}

.mdc-drawer-sidebar-header__button {
.mdc-drawer-sidebar-header__button{
position: relative;
height: auto;
color: white;
Expand All @@ -21,13 +21,63 @@
}
}

.mdc-drawer-sidebar-list{
margin: 35px 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}

.mdc-drawer-sidebar-list-item{
border: 2px solid #F2F5F7;
border-radius: 10px;
background-color: white;
padding: 20px; // 105px 20px 20px;
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}


.mdc-drawer-sidebar-list-item-text{
flex: 3;
display: flex;
flex-direction: column;
gap: 6px;
color: var(--mdc-theme-on-surface);
font-size: 14px;
line-height: 24px;
align-items: flex-start;
}

.mdc-drawer-sidebar-list-item-text-name{
font-weight: bold;
}

.mdc-drawer-sidebar-list-item-delete-icon{
flex: 2;
position: absolute;
right: 11px;
top: 11px;
color: #4A4A4A
}

.mdc-drawer-sidebar-list-item-delete-icon:hover{
color: #000000;
}

.mdc-drawer-sidebar-content{
overflow-y: scroll;
position: relative;
text-align: center;
width: 100%;
background-color: white;
background-color: #FAFBFC;
height: 80vh;
}



.mdc-drawer-sidebar .mdc-sidebar-sidebar-footer .mdc-drawer-sidebar-apply-button{
position: relative;
background-color: var(--mdc-theme-primary);
Expand All @@ -42,6 +92,11 @@
font-weight: bold;
}

.mdc-drawer__drawer{
display: flex;
flex-direction: column;
}

.mdc-drawer-sidebar-container{
height: 100%;
transition: $sidebar-transition-duration-large-screen;
Expand Down
200 changes: 196 additions & 4 deletions services/frontend-service/src/ui/components/SideBar/SideBar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { act, render, renderHook } from '@testing-library/react';
import { TopAppBar } from '../TopAppBar/TopAppBar';
import { MemoryRouter } from 'react-router-dom';
import { BatchAction } from '../../../api/api';
import { addAction, updateActions, useActions } from '../../utils/store';
import { addAction, deleteAction, useActions, updateActions } from '../../utils/store';

describe('Show and Hide Sidebar', () => {
interface dataT {
Expand Down Expand Up @@ -67,10 +67,142 @@ describe('Show and Hide Sidebar', () => {
});
});

describe('Sidebar shows list of actions', () => {
interface dataT {
name: string;
actions: BatchAction[];
expectedNumOfActions: number;
}

const data: dataT[] = [
{
name: '2 results',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
],
expectedNumOfActions: 2,
},
{
name: '3 results',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } },
],
expectedNumOfActions: 3,
},
{
name: '0 results',
actions: [],
expectedNumOfActions: 0,
},
];

const getNode = (overrides?: {}): JSX.Element | any => {
// given
const defaultProps: any = {
children: null,
};
return (
<MemoryRouter>
<TopAppBar {...defaultProps} {...overrides} />{' '}
</MemoryRouter>
);
};
const getWrapper = (overrides?: {}) => render(getNode(overrides));

describe.each(data)('', (testcase) => {
it(testcase.name, () => {
// given
updateActions(testcase.actions);
// when
const { container } = getWrapper({});
const result = container.querySelector('.mdc-show-button')! as HTMLElement;
act(() => {
result.click();
});
// then
expect(container.getElementsByClassName('mdc-drawer-sidebar-list')[0].children).toHaveLength(
testcase.expectedNumOfActions
);
});
});
});

describe('Sidebar test deletebutton', () => {
interface dataT {
name: string;
actions: BatchAction[];
expectedNumOfActions: number;
}

const data: dataT[] = [
{
name: '2 results',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
],
expectedNumOfActions: 1,
},
{
name: '3 results',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } },
],
expectedNumOfActions: 2,
},
{
name: '0 results',
actions: [],
expectedNumOfActions: 0,
},
];

const getNode = (overrides?: {}): JSX.Element | any => {
// given
const defaultProps: any = {
children: null,
};
return (
<MemoryRouter>
<TopAppBar {...defaultProps} {...overrides} />{' '}
</MemoryRouter>
);
};
const getWrapper = (overrides?: {}) => render(getNode(overrides));

describe.each(data)('', (testcase) => {
it(testcase.name, () => {
// given
updateActions(testcase.actions);
// when
const { container } = getWrapper({});
const result = container.querySelector('.mdc-show-button')! as HTMLElement;
act(() => {
result.click();
});
const svg = container.getElementsByClassName('mdc-drawer-sidebar-list-item-delete-icon')[0];
if (svg) {
const button = svg.parentElement;
if (button) button.click();
}
// then
expect(container.getElementsByClassName('mdc-drawer-sidebar-list')[0].children).toHaveLength(
testcase.expectedNumOfActions
);
});
});
});

describe('Action Store functionality', () => {
interface dataT {
name: string;
actions: BatchAction[];
deleteActions?: BatchAction[];
expectedActions: BatchAction[];
}

Expand Down Expand Up @@ -112,9 +244,10 @@ describe('Action Store functionality', () => {
describe.each(dataGetSet)('Test getting actions from the store and setting the store from an array', (testcase) => {
it(testcase.name, () => {
// given
renderHook(() => updateActions(testcase.actions));
updateActions(testcase.actions);
// when
const actions = renderHook(() => useActions()).result.current;
// then
expect(actions).toStrictEqual(testcase.expectedActions);
});
});
Expand Down Expand Up @@ -157,12 +290,71 @@ describe('Action Store functionality', () => {
describe.each(dataAdding)('Test adding actions to the store', (testcase) => {
it(testcase.name, () => {
// given
renderHook(() => updateActions([]));
updateActions([]);
testcase.actions.forEach((action) => {
renderHook(() => addAction(action));
addAction(action);
});
// when
const actions = renderHook(() => useActions()).result.current;
// then
expect(actions).toStrictEqual(testcase.expectedActions);
});
});

const dataDeleting: dataT[] = [
{
name: 'delete 1 action - 0 remain',
actions: [{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } }],
deleteActions: [{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } }],
expectedActions: [],
},
{
name: 'delete 1 action (different action type, same app) - 1 remains',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
],
deleteActions: [{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } }],
expectedActions: [{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } }],
},
{
name: 'delete 1 action (same action type, different app) - 1 remains',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } },
],
deleteActions: [{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } }],
expectedActions: [{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } }],
},
{
name: 'delete 1 action from empty array - 0 remain',
actions: [],
deleteActions: [{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } }],
expectedActions: [],
},
{
name: 'delete 2 actions - 1 remain',
actions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
],
deleteActions: [
{ action: { $case: 'undeploy', undeploy: { application: 'nmww' } } },
{ action: { $case: 'prepareUndeploy', prepareUndeploy: { application: 'nmww' } } },
],
expectedActions: [{ action: { $case: 'undeploy', undeploy: { application: 'auth-service' } } }],
},
];

describe.each(dataDeleting)('Test deleting actions', (testcase) => {
it(testcase.name, () => {
// given
updateActions(testcase.actions);
// when
testcase.deleteActions?.map((action) => deleteAction(action));
const actions = renderHook(() => useActions()).result.current;
// then
expect(actions).toStrictEqual(testcase.expectedActions);
});
});
Expand Down
Loading

0 comments on commit a81828f

Please sign in to comment.