chore: remove Layout and Toast components
This commit is contained in:
Nicolas Meienberger
parent
15951fb254
commit
4b3a39e8fe
8 changed files with 0 additions and 205 deletions
|
|
@ -1,3 +0,0 @@
|
|||
.topActions {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '../../../../tests/test-utils';
|
||||
import { Layout } from './Layout';
|
||||
|
||||
const pushFn = jest.fn();
|
||||
jest.mock('next/router', () => {
|
||||
const actualRouter = jest.requireActual('next-router-mock');
|
||||
|
||||
return {
|
||||
...actualRouter,
|
||||
useRouter: () => ({
|
||||
...actualRouter.useRouter(),
|
||||
push: pushFn,
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
describe('Test: Layout', () => {
|
||||
it('should render correctly its children', () => {
|
||||
render(<Layout>test</Layout>);
|
||||
|
||||
expect(screen.getByText('test')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import semver from 'semver';
|
||||
import { Header } from '../ui/Header';
|
||||
import styles from './Layout.module.scss';
|
||||
import { useSystemStore } from '../../state/systemStore';
|
||||
|
||||
interface IProps {
|
||||
breadcrumbs?: { name: string; href: string; current?: boolean }[];
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
actions?: React.ReactNode;
|
||||
}
|
||||
|
||||
export const Layout: React.FC<IProps> = ({ children, breadcrumbs, title, actions }) => {
|
||||
const { version } = useSystemStore();
|
||||
const defaultVersion = '0.0.0';
|
||||
const isLatest = semver.gte(version?.current || defaultVersion, version?.latest || defaultVersion);
|
||||
|
||||
const renderBreadcrumbs = () => {
|
||||
if (!breadcrumbs) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<ol className="breadcrumb" aria-label="breadcrumbs">
|
||||
{breadcrumbs.map((breadcrumb) => (
|
||||
<li key={breadcrumb.name} data-testid="breadcrumb-item" className={clsx('breadcrumb-item', { active: breadcrumb.current })}>
|
||||
<Link data-testid="breadcrumb-link" href={breadcrumb.href}>
|
||||
{breadcrumb.name}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div data-testid={`${title?.toLowerCase().split(' ').join('-')}-layout`} className="page">
|
||||
<Head>
|
||||
<title>{`${title} - Tipi`}</title>
|
||||
</Head>
|
||||
<Header isUpdateAvailable={!isLatest} />
|
||||
<div className="page-wrapper">
|
||||
<div className="page-header d-print-none">
|
||||
<div className="container-xl">
|
||||
<div className={clsx('align-items-stretch align-items-md-center d-flex flex-column flex-md-row ', styles.topActions)}>
|
||||
<div className="me-3 text-white">
|
||||
<div className="page-pretitle">{renderBreadcrumbs()}</div>
|
||||
<h2 className="page-title">{title}</h2>
|
||||
</div>
|
||||
<div className="flex-fill">{actions}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-body">
|
||||
<div className="container-xl">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { Layout } from './Layout';
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
@keyframes slideInAndOut {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
5% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
95% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.slideIn {
|
||||
animation: slideInAndOut 5s ease-in-out;
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import React from 'react';
|
||||
import { fireEvent, screen, render } from '../../../../../tests/test-utils';
|
||||
import { Toast } from './Toast';
|
||||
|
||||
describe('Toast', () => {
|
||||
it('renders the correct title', () => {
|
||||
// arrange
|
||||
render(<Toast id="toast-1" title="Test Title" onClose={jest.fn} status="info" />);
|
||||
|
||||
// assert
|
||||
expect(screen.getByText('Test Title')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the correct message', () => {
|
||||
// arrange
|
||||
render(<Toast id="toast-1" title="Test Title" message="Test message" onClose={jest.fn} status="info" />);
|
||||
|
||||
// assert
|
||||
expect(screen.getByText('Test message')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the correct status', () => {
|
||||
// arrange
|
||||
render(<Toast id="toast-1" title="Test Title" status="success" onClose={jest.fn} />);
|
||||
const toastElement = screen.getByRole('alert');
|
||||
|
||||
// assert
|
||||
expect(toastElement).toHaveClass('alert-success');
|
||||
});
|
||||
|
||||
it('calls the correct function when the close button is clicked', () => {
|
||||
// arrange
|
||||
const onCloseMock = jest.fn();
|
||||
render(<Toast id="toast-1" title="Test Title" onClose={onCloseMock} status="info" />);
|
||||
const closeButton = screen.getByRole('button', { name: 'close' });
|
||||
|
||||
// act
|
||||
fireEvent.click(closeButton);
|
||||
|
||||
// assert
|
||||
expect(onCloseMock).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
import styles from './Toast.module.scss';
|
||||
|
||||
interface IProps {
|
||||
onClose: () => void;
|
||||
status: 'success' | 'error' | 'warning' | 'info';
|
||||
title: string;
|
||||
message?: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export const Toast: React.FC<IProps> = ({ status, onClose, title, message, id }) => (
|
||||
<div
|
||||
id={id}
|
||||
className={clsx(styles.slideIn, 'show fade alert alert-important alert-dismissible tipi-toast', {
|
||||
'alert-danger': status === 'error',
|
||||
'alert-success': status === 'success',
|
||||
'alert-info': status === 'info',
|
||||
warning: status === 'warning',
|
||||
})}
|
||||
role="alert"
|
||||
>
|
||||
<div className="d-flex align-items-center">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon alert-icon"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
||||
<circle cx="12" cy="12" r="9" />
|
||||
<line x1="12" y1="8" x2="12" y2="12" />
|
||||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex-fill">
|
||||
<h4 className="alert-title text-white font-weight-bold">{title}</h4>
|
||||
{message && <div className="text-white">{message}</div>}
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={onClose} data-testid="toast-close-button" className="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close" />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1 +0,0 @@
|
|||
export { Toast } from './Toast';
|
||||
Loading…
Add table
Reference in a new issue