mirror of
https://github.com/twentyhq/twenty.git
synced 2024-11-25 20:00:34 +03:00
Merge pull request #8 from twentyhq/cbo-add-central-panel
Rename tabs to Inbox, Contacts, Insights
This commit is contained in:
commit
33c30e0770
98
front/package-lock.json
generated
98
front/package-lock.json
generated
@ -10,6 +10,10 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@types/node": "^16.18.4",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
@ -2264,6 +2268,63 @@
|
||||
"js-yaml": "bin/js-yaml.js"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
|
||||
"integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
|
||||
"integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-regular-svg-icons": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
|
||||
"integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
|
||||
"integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
|
||||
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">=16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@gar/promisify": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
|
||||
@ -35640,6 +35701,43 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.1.tgz",
|
||||
"integrity": "sha512-Sz07mnQrTekFWLz5BMjOzHl/+NooTdW8F8kDQxjWwbpOJcnoSg4vUDng8d/WR1wOxM0O+CY9Zw0nR054riNYtQ=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.1.tgz",
|
||||
"integrity": "sha512-HELwwbCz6C1XEcjzyT1Jugmz2NNklMrSPjZOWMlc+ZsHIVk+XOvOXLGGQtFBwSyqfJDNgRq4xBCwWOaZ/d9DEA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-regular-svg-icons": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.2.1.tgz",
|
||||
"integrity": "sha512-wiqcNDNom75x+pe88FclpKz7aOSqS2lOivZeicMV5KRwOAeypxEYWAK/0v+7r+LrEY30+qzh8r2XDaEHvoLsMA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.1.tgz",
|
||||
"integrity": "sha512-oKuqrP5jbfEPJWTij4sM+/RvgX+RMFwx3QZCZcK9PrBDgxC35zuc7AOFsyMjMd/PIFPeB2JxyqDr5zs/DZFPPw==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.1"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
|
||||
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"@gar/promisify": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
|
||||
|
@ -5,6 +5,10 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@emotion/styled": "^11.10.5",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@types/node": "^16.18.4",
|
||||
"@types/react": "^18.0.25",
|
||||
"@types/react-dom": "^18.0.9",
|
||||
@ -43,7 +47,7 @@
|
||||
"react-refresh": "0.14.0"
|
||||
},
|
||||
"jest": {
|
||||
"coveragePathIgnorePatterns" : [
|
||||
"coveragePathIgnorePatterns": [
|
||||
"src/stories"
|
||||
]
|
||||
},
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import Tasks from './pages/tasks/Tasks';
|
||||
import History from './pages/History';
|
||||
import Performances from './pages/Performances';
|
||||
import Inbox from './pages/inbox/Inbox';
|
||||
import Contacts from './pages/Contacts';
|
||||
import Insights from './pages/Insights';
|
||||
import AppLayout from './layout/AppLayout';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
|
||||
@ -9,9 +9,9 @@ function App() {
|
||||
return (
|
||||
<AppLayout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Tasks />} />
|
||||
<Route path="/history" element={<History />} />
|
||||
<Route path="/performances" element={<Performances />} />
|
||||
<Route path="/" element={<Inbox />} />
|
||||
<Route path="/contacts" element={<Contacts />} />
|
||||
<Route path="/insights" element={<Insights />} />
|
||||
</Routes>
|
||||
</AppLayout>
|
||||
);
|
||||
|
@ -16,7 +16,7 @@ function Navbar() {
|
||||
<>
|
||||
<NavbarContainer>
|
||||
<NavItem
|
||||
label="Tasks"
|
||||
label="Inbox"
|
||||
to="/"
|
||||
active={
|
||||
!!useMatch({
|
||||
@ -26,21 +26,21 @@ function Navbar() {
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
label="History"
|
||||
to="/history"
|
||||
label="Contacts"
|
||||
to="/contacts"
|
||||
active={
|
||||
!!useMatch({
|
||||
path: useResolvedPath('/history').pathname,
|
||||
path: useResolvedPath('/contacts').pathname,
|
||||
end: true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<NavItem
|
||||
label="Performances"
|
||||
to="/performances"
|
||||
label="Insights"
|
||||
to="/insights"
|
||||
active={
|
||||
!!useMatch({
|
||||
path: useResolvedPath('/performances').pathname,
|
||||
path: useResolvedPath('/insights').pathname,
|
||||
end: true,
|
||||
})
|
||||
}
|
||||
|
@ -1,14 +1,14 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
import Navbar from '../../../layout/navbar/Navbar';
|
||||
import Navbar from '../Navbar';
|
||||
|
||||
export default {
|
||||
title: 'Navbar',
|
||||
component: Navbar,
|
||||
};
|
||||
|
||||
export const NavbarOnPerformance = () => (
|
||||
<MemoryRouter initialEntries={['/performances']}>
|
||||
export const NavbarOnInsights = () => (
|
||||
<MemoryRouter initialEntries={['/insights']}>
|
||||
<Navbar />
|
||||
</MemoryRouter>
|
||||
);
|
@ -1,6 +1,6 @@
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
|
||||
import { NavItemDefault } from '../../../stories/layout/navbar/NavItem.stories'; //👈 Our stories imported here.
|
||||
import { NavItemDefault } from '../__stories__/NavItem.stories';
|
||||
|
||||
const mockedNavigate = jest.fn();
|
||||
jest.mock('react-router-dom', () => ({
|
17
front/src/layout/navbar/__tests__/Navbar.test.tsx
Normal file
17
front/src/layout/navbar/__tests__/Navbar.test.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { NavbarOnInsights } from '../__stories__/Navbar.stories';
|
||||
|
||||
it('Checks the NavItem renders', () => {
|
||||
const { getByRole } = render(<NavbarOnInsights />);
|
||||
|
||||
expect(getByRole('button', { name: 'Insights' })).toHaveAttribute(
|
||||
'aria-selected',
|
||||
'true',
|
||||
);
|
||||
|
||||
expect(getByRole('button', { name: 'Inbox' })).toHaveAttribute(
|
||||
'aria-selected',
|
||||
'false',
|
||||
);
|
||||
});
|
@ -1,4 +1,4 @@
|
||||
function History() {
|
||||
function Contacts() {
|
||||
return (
|
||||
<div>
|
||||
<h1>This is the history page</h1>
|
||||
@ -6,4 +6,4 @@ function History() {
|
||||
);
|
||||
}
|
||||
|
||||
export default History;
|
||||
export default Contacts;
|
@ -1,4 +1,4 @@
|
||||
function Performances() {
|
||||
function Insights() {
|
||||
return (
|
||||
<div>
|
||||
<h1>This is the performances page</h1>
|
||||
@ -6,4 +6,4 @@ function Performances() {
|
||||
);
|
||||
}
|
||||
|
||||
export default Performances;
|
||||
export default Insights;
|
18
front/src/pages/inbox/Inbox.tsx
Normal file
18
front/src/pages/inbox/Inbox.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import FullWidthContainer from '../../layout/containers/FullWidthContainer';
|
||||
import DiscussionPanel from './discussion-panel/DiscussionPanel';
|
||||
import ListPanel from './list-panel/ListPanel';
|
||||
import PluginPanel from './plugin-panel/PluginPanel';
|
||||
|
||||
function Inbox() {
|
||||
return (
|
||||
<FullWidthContainer>
|
||||
<>
|
||||
<ListPanel />
|
||||
<DiscussionPanel />
|
||||
<PluginPanel />
|
||||
</>
|
||||
</FullWidthContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Inbox;
|
13
front/src/pages/inbox/__stories__/Inbox.stories.tsx
Normal file
13
front/src/pages/inbox/__stories__/Inbox.stories.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import Inbox from '../Inbox';
|
||||
|
||||
export default {
|
||||
title: 'Inbox',
|
||||
component: Inbox,
|
||||
};
|
||||
|
||||
export const InboxDefault = () => (
|
||||
<MemoryRouter>
|
||||
<Inbox />
|
||||
</MemoryRouter>
|
||||
);
|
10
front/src/pages/inbox/__tests__/Inbox.test.tsx
Normal file
10
front/src/pages/inbox/__tests__/Inbox.test.tsx
Normal file
@ -0,0 +1,10 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { InboxDefault } from '../__stories__/Inbox.stories';
|
||||
|
||||
it('Checks the Inbox page render', () => {
|
||||
const { getAllByRole } = render(<InboxDefault />);
|
||||
|
||||
const button = getAllByRole('button');
|
||||
expect(button[0]).toHaveTextContent('Sylvie Vartan');
|
||||
});
|
12
front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx
Normal file
12
front/src/pages/inbox/discussion-panel/DiscussionPanel.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledPanel = styled.div`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
function DiscussionPanel() {
|
||||
return <StyledPanel></StyledPanel>;
|
||||
}
|
||||
|
||||
export default DiscussionPanel;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function Composer() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default Composer;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function ComposerSwitch() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default ComposerSwitch;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function Booking() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default Booking;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function Message() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default Message;
|
7
front/src/pages/inbox/discussion-panel/events/Note.tsx
Normal file
7
front/src/pages/inbox/discussion-panel/events/Note.tsx
Normal file
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function Note() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default Note;
|
@ -1,6 +1,6 @@
|
||||
import styled from '@emotion/styled';
|
||||
import TaskListHeader from './TaskListHeader';
|
||||
import TaskListItem from './TaskListItem';
|
||||
import ListPanelHeader from './ListPanelHeader';
|
||||
import ListPanelItem from './ListPanelItem';
|
||||
|
||||
const StyledList = styled.div`
|
||||
display: flex;
|
||||
@ -17,7 +17,7 @@ export type Task = {
|
||||
lastMessage: string;
|
||||
};
|
||||
|
||||
function TaskList() {
|
||||
function ListPanel() {
|
||||
const tasks: Task[] = [
|
||||
{
|
||||
id: 1,
|
||||
@ -38,13 +38,13 @@ function TaskList() {
|
||||
return (
|
||||
<StyledList>
|
||||
<>
|
||||
<TaskListHeader />
|
||||
<ListPanelHeader />
|
||||
{tasks.map((item) => (
|
||||
<TaskListItem key={item.id} task={item} />
|
||||
<ListPanelItem key={item.id} task={item} />
|
||||
))}
|
||||
</>
|
||||
</StyledList>
|
||||
);
|
||||
}
|
||||
|
||||
export default TaskList;
|
||||
export default ListPanel;
|
@ -10,8 +10,8 @@ const StyledHeader = styled.div`
|
||||
border-bottom: 1px solid #eaecee;
|
||||
`;
|
||||
|
||||
function TaskListHeader() {
|
||||
function ListPanelHeader() {
|
||||
return <StyledHeader>6 tasks waiting</StyledHeader>;
|
||||
}
|
||||
|
||||
export default TaskListHeader;
|
||||
export default ListPanelHeader;
|
@ -1,5 +1,5 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { Task } from './TaskList';
|
||||
import { Task } from './ListPanel';
|
||||
|
||||
type OwnProps = {
|
||||
task: Task;
|
||||
@ -72,7 +72,7 @@ const StyledContent = styled.div`
|
||||
margin-top: 8px;
|
||||
`;
|
||||
|
||||
function TaskListItem({ task }: OwnProps) {
|
||||
function ListPanelItem({ task }: OwnProps) {
|
||||
return (
|
||||
<StyledListItem>
|
||||
<StyledHeader>
|
||||
@ -95,4 +95,4 @@ function TaskListItem({ task }: OwnProps) {
|
||||
);
|
||||
}
|
||||
|
||||
export default TaskListItem;
|
||||
export default ListPanelItem;
|
@ -0,0 +1,8 @@
|
||||
import ListPanel from '../ListPanel';
|
||||
|
||||
export default {
|
||||
title: 'Inbox',
|
||||
component: ListPanel,
|
||||
};
|
||||
|
||||
export const ListPanelDefault = () => <ListPanel />;
|
@ -0,0 +1,9 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import ListPanelHeader from '../ListPanelHeader';
|
||||
|
||||
export default {
|
||||
title: 'Inbox',
|
||||
component: ListPanelHeader,
|
||||
};
|
||||
|
||||
export const ListPanelHeaderDefault = () => <ListPanelHeader />;
|
@ -1,13 +1,13 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import TaskListItem from '../../../pages/tasks/TaskListItem';
|
||||
import ListPanelItem from '../ListPanelItem';
|
||||
|
||||
export default {
|
||||
title: 'Tasks',
|
||||
component: TaskListItem,
|
||||
title: 'Inbox',
|
||||
component: ListPanelItem,
|
||||
};
|
||||
|
||||
export const TaskListItemDefault = () => (
|
||||
<TaskListItem
|
||||
export const ListPanelItemDefault = () => (
|
||||
<ListPanelItem
|
||||
task={{
|
||||
id: 1,
|
||||
targetUser: 'Sylvie Vartan',
|
@ -0,0 +1,10 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { ListPanelDefault } from '../__stories__/ListPanel.stories';
|
||||
|
||||
it('Checks the task list render', () => {
|
||||
const { getAllByRole } = render(<ListPanelDefault />);
|
||||
|
||||
const button = getAllByRole('button');
|
||||
expect(button[0]).toHaveTextContent('Sylvie Vartan');
|
||||
});
|
@ -0,0 +1,10 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { ListPanelHeaderDefault } from '../__stories__/ListPanelHeader.stories';
|
||||
|
||||
it('Checks the ListPanelHeader render', () => {
|
||||
const { getAllByText } = render(<ListPanelHeaderDefault />);
|
||||
|
||||
const text = getAllByText('6 tasks waiting');
|
||||
expect(text).toBeDefined();
|
||||
});
|
@ -0,0 +1,10 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { ListPanelItemDefault } from '../__stories__/ListPanelItem.stories';
|
||||
|
||||
it('Checks the ListPanelItem render', () => {
|
||||
const { getAllByText } = render(<ListPanelItemDefault />);
|
||||
|
||||
const text = getAllByText('Sylvie Vartan');
|
||||
expect(text).toBeDefined();
|
||||
});
|
27
front/src/pages/inbox/plugin-panel/PluginPanel.tsx
Normal file
27
front/src/pages/inbox/plugin-panel/PluginPanel.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import styled from '@emotion/styled';
|
||||
import PluginPanelNav from './PluginPanelNav';
|
||||
import PluginHistory from './plugin-history/PanelHistory';
|
||||
|
||||
const StyledPanel = styled.div`
|
||||
display: flex;
|
||||
width: 350px;
|
||||
border-left: 1px solid #eaecee;
|
||||
`;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
`;
|
||||
|
||||
function PluginPanel() {
|
||||
return (
|
||||
<StyledPanel>
|
||||
<StyledContainer>
|
||||
<PluginHistory />
|
||||
</StyledContainer>
|
||||
<PluginPanelNav />
|
||||
</StyledPanel>
|
||||
);
|
||||
}
|
||||
|
||||
export default PluginPanel;
|
46
front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx
Normal file
46
front/src/pages/inbox/plugin-panel/PluginPanelNav.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faClone } from '@fortawesome/free-regular-svg-icons';
|
||||
|
||||
const StyledNav = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 60px;
|
||||
border-left: 1px solid #eaecee;
|
||||
background: #f1f3f5;
|
||||
`;
|
||||
|
||||
const StyledNavItem = styled.div`
|
||||
display: flex;
|
||||
width: 60px;
|
||||
border-bottom: 1px solid #eaecee;
|
||||
padding: 22px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
function PluginPanelNav() {
|
||||
return (
|
||||
<StyledNav>
|
||||
<StyledNavItem>
|
||||
<FontAwesomeIcon icon={faClone} size="lg" />
|
||||
</StyledNavItem>
|
||||
<StyledNavItem>
|
||||
<FontAwesomeIcon icon={faClone} size="lg" />
|
||||
</StyledNavItem>
|
||||
<StyledNavItem>
|
||||
<FontAwesomeIcon icon={faClone} size="lg" />
|
||||
</StyledNavItem>
|
||||
<StyledNavItem>
|
||||
<FontAwesomeIcon icon={faClone} size="lg" />
|
||||
</StyledNavItem>
|
||||
<StyledNavItem>
|
||||
<FontAwesomeIcon icon={faClone} size="lg" />
|
||||
</StyledNavItem>
|
||||
<StyledNavItem>
|
||||
<FontAwesomeIcon icon={faClone} size="lg" />
|
||||
</StyledNavItem>
|
||||
</StyledNav>
|
||||
);
|
||||
}
|
||||
|
||||
export default PluginPanelNav;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function PluginHistory() {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
export default PluginHistory;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function UserActivity() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default UserActivity;
|
@ -0,0 +1,7 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
function UserInformation() {
|
||||
return;
|
||||
}
|
||||
|
||||
export default UserInformation;
|
@ -1,12 +0,0 @@
|
||||
import FullWidthContainer from '../../layout/containers/FullWidthContainer';
|
||||
import TaskList from './TaskList';
|
||||
|
||||
function Tasks() {
|
||||
return (
|
||||
<FullWidthContainer>
|
||||
<TaskList />
|
||||
</FullWidthContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tasks;
|
@ -1,8 +0,0 @@
|
||||
import TaskList from '../../../pages/tasks/TaskList';
|
||||
|
||||
export default {
|
||||
title: 'Tasks',
|
||||
component: TaskList,
|
||||
};
|
||||
|
||||
export const TaskListDefault = () => <TaskList />;
|
@ -1,9 +0,0 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import TaskListHeader from '../../../pages/tasks/TaskListHeader';
|
||||
|
||||
export default {
|
||||
title: 'Tasks',
|
||||
component: TaskListHeader,
|
||||
};
|
||||
|
||||
export const TaskListHeaderDefault = () => <TaskListHeader />;
|
@ -1,13 +0,0 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import Tasks from '../../../pages/tasks/Tasks';
|
||||
|
||||
export default {
|
||||
title: 'Tasks',
|
||||
component: Tasks,
|
||||
};
|
||||
|
||||
export const TasksDefault = () => (
|
||||
<MemoryRouter>
|
||||
<Tasks />
|
||||
</MemoryRouter>
|
||||
);
|
@ -1,17 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { NavbarOnPerformance } from '../../../stories/layout/navbar/Navbar.stories';
|
||||
|
||||
it('Checks the NavItem renders', () => {
|
||||
const { getByRole } = render(<NavbarOnPerformance />);
|
||||
|
||||
expect(getByRole('button', { name: 'Performances' })).toHaveAttribute(
|
||||
'aria-selected',
|
||||
'true',
|
||||
);
|
||||
|
||||
expect(getByRole('button', { name: 'Tasks' })).toHaveAttribute(
|
||||
'aria-selected',
|
||||
'false',
|
||||
);
|
||||
});
|
@ -1,10 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { TaskListDefault } from '../../../stories/pages/tasks/TaskList.stories';
|
||||
|
||||
it('Checks the Tasks page render', () => {
|
||||
const { getAllByRole } = render(<TaskListDefault />);
|
||||
|
||||
const button = getAllByRole('button');
|
||||
expect(button[0]).toHaveTextContent('Sylvie Vartan');
|
||||
});
|
@ -1,10 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { TaskListHeaderDefault } from '../../../stories/pages/tasks/TaskListHeader.stories';
|
||||
|
||||
it('Checks the TaskListHeader render', () => {
|
||||
const { getAllByText } = render(<TaskListHeaderDefault />);
|
||||
|
||||
const text = getAllByText('6 tasks waiting');
|
||||
expect(text).toBeDefined();
|
||||
});
|
@ -1,10 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { TaskListItemDefault } from '../../../stories/pages/tasks/TaskListItem.stories';
|
||||
|
||||
it('Checks the TaskListItem render', () => {
|
||||
const { getAllByText } = render(<TaskListItemDefault />);
|
||||
|
||||
const text = getAllByText('Sylvie Vartan');
|
||||
expect(text).toBeDefined();
|
||||
});
|
@ -1,10 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { TasksDefault } from '../../../stories/pages/tasks/Tasks.stories';
|
||||
|
||||
it('Checks the Tasks page render', () => {
|
||||
const { getAllByRole } = render(<TasksDefault />);
|
||||
|
||||
const button = getAllByRole('button');
|
||||
expect(button[0]).toHaveTextContent('Sylvie Vartan');
|
||||
});
|
2
server/.gitignore
vendored
2
server/.gitignore
vendored
@ -30,6 +30,6 @@ lerna-debug.log*
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/inbox.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
Loading…
Reference in New Issue
Block a user