chore: remove Layout and Toast components
This commit is contained in:
Nicolas Meienberger
Nicolas Meienberger
parent
8d690e408a
commit
ed9477c068
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