mirror of
https://github.com/portainer/portainer.git
synced 2025-07-25 08:19:40 +02:00
feat(sidebar): implement new design [EE-3447] (#7118)
This commit is contained in:
Chaim Lev-Ari
GitHub
parent
e5e57978af
commit
ed8f9b5931
54 changed files with 1928 additions and 857 deletions
|
|
@ -2,6 +2,8 @@ import { UserContext } from '@/portainer/hooks/useUser';
|
|||
import { UserViewModel } from '@/portainer/models/user';
|
||||
import { render, within } from '@/react-tools/test-utils';
|
||||
|
||||
import { TestSidebarProvider } from '../useSidebarState';
|
||||
|
||||
import { AzureSidebar } from './AzureSidebar';
|
||||
|
||||
test('dashboard items should render correctly', () => {
|
||||
|
|
@ -11,11 +13,9 @@ test('dashboard items should render correctly', () => {
|
|||
expect(dashboardItem).toHaveTextContent('Dashboard');
|
||||
|
||||
const dashboardItemElements = within(dashboardItem);
|
||||
expect(dashboardItemElements.getByLabelText('itemIcon')).toBeVisible();
|
||||
expect(dashboardItemElements.getByLabelText('itemIcon')).toHaveClass(
|
||||
'fa-tachometer-alt',
|
||||
'fa-fw'
|
||||
);
|
||||
expect(
|
||||
dashboardItemElements.getByRole('img', { hidden: true })
|
||||
).toBeVisible();
|
||||
|
||||
const containerInstancesItem = getByLabelText(/Container Instances/i);
|
||||
expect(containerInstancesItem).toBeVisible();
|
||||
|
|
@ -23,12 +23,8 @@ test('dashboard items should render correctly', () => {
|
|||
|
||||
const containerInstancesItemElements = within(containerInstancesItem);
|
||||
expect(
|
||||
containerInstancesItemElements.getByLabelText('itemIcon')
|
||||
containerInstancesItemElements.getByRole('img', { hidden: true })
|
||||
).toBeVisible();
|
||||
expect(containerInstancesItemElements.getByLabelText('itemIcon')).toHaveClass(
|
||||
'fa-cubes',
|
||||
'fa-fw'
|
||||
);
|
||||
});
|
||||
|
||||
function renderComponent() {
|
||||
|
|
@ -36,7 +32,9 @@ function renderComponent() {
|
|||
|
||||
return render(
|
||||
<UserContext.Provider value={{ user }}>
|
||||
<AzureSidebar environmentId={1} />
|
||||
<TestSidebarProvider>
|
||||
<AzureSidebar environmentId={1} />
|
||||
</TestSidebarProvider>
|
||||
</UserContext.Provider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
import { Box } from 'react-feather';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
|
||||
import { DashboardLink } from '../items/DashboardLink';
|
||||
import { SidebarItem } from '../SidebarItem';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -9,16 +12,11 @@ interface Props {
|
|||
export function AzureSidebar({ environmentId }: Props) {
|
||||
return (
|
||||
<>
|
||||
<SidebarItem
|
||||
to="azure.dashboard"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-tachometer-alt fa-fw"
|
||||
label="Dashboard"
|
||||
/>
|
||||
<DashboardLink environmentId={environmentId} platformPath="azure" />
|
||||
<SidebarItem
|
||||
to="azure.containerinstances"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-cubes fa-fw"
|
||||
icon={Box}
|
||||
label="Container instances"
|
||||
/>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,16 @@
|
|||
import {
|
||||
Box,
|
||||
Clock,
|
||||
Layers,
|
||||
List,
|
||||
Lock,
|
||||
Share2,
|
||||
Shuffle,
|
||||
Trello,
|
||||
Clipboard,
|
||||
Edit,
|
||||
} from 'react-feather';
|
||||
|
||||
import {
|
||||
type Environment,
|
||||
type EnvironmentId,
|
||||
|
|
@ -11,6 +24,8 @@ import {
|
|||
import { useInfo, useVersion } from '@/docker/services/system.service';
|
||||
|
||||
import { SidebarItem } from './SidebarItem';
|
||||
import { DashboardLink } from './items/DashboardLink';
|
||||
import { VolumesLink } from './items/VolumesLink';
|
||||
|
||||
interface Props {
|
||||
environmentId: EnvironmentId;
|
||||
|
|
@ -41,44 +56,37 @@ export function DockerSidebar({ environmentId, environment }: Props) {
|
|||
const setupSubMenuProps = isSwarmManager
|
||||
? {
|
||||
label: 'Swarm',
|
||||
iconClass: 'fa-object-group fa-fw',
|
||||
icon: Trello,
|
||||
to: 'docker.swarm',
|
||||
}
|
||||
: {
|
||||
label: 'Host',
|
||||
iconClass: 'fa-th fa-fw',
|
||||
icon: Trello,
|
||||
to: 'docker.host',
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SidebarItem
|
||||
to="docker.dashboard"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-tachometer-alt fa-fw"
|
||||
label="Dashboard"
|
||||
/>
|
||||
<DashboardLink environmentId={environmentId} platformPath="docker" />
|
||||
|
||||
{!offlineMode && (
|
||||
<SidebarItem
|
||||
label="App Templates"
|
||||
icon={Edit}
|
||||
to="docker.templates"
|
||||
params={{ endpointId: environmentId }}
|
||||
>
|
||||
<SidebarItem
|
||||
label="App Templates"
|
||||
iconClass="fa-rocket fa-fw"
|
||||
to="docker.templates"
|
||||
label="Custom Templates"
|
||||
to="docker.templates.custom"
|
||||
params={{ endpointId: environmentId }}
|
||||
>
|
||||
<SidebarItem
|
||||
label="Custom Templates"
|
||||
to="docker.templates.custom"
|
||||
params={{ endpointId: environmentId }}
|
||||
/>
|
||||
</SidebarItem>
|
||||
)}
|
||||
/>
|
||||
</SidebarItem>
|
||||
|
||||
{areStacksVisible && (
|
||||
<SidebarItem
|
||||
to="docker.stacks"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-th-list fa-fw"
|
||||
icon={Layers}
|
||||
label="Stacks"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -87,7 +95,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
|
|||
<SidebarItem
|
||||
to="docker.services"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-list-alt fa-fw"
|
||||
icon={Shuffle}
|
||||
label="Services"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -95,36 +103,31 @@ export function DockerSidebar({ environmentId, environment }: Props) {
|
|||
<SidebarItem
|
||||
to="docker.containers"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-cubes fa-fw"
|
||||
icon={Box}
|
||||
label="Containers"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
to="docker.images"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-clone fa-fw"
|
||||
icon={List}
|
||||
label="Images"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
to="docker.networks"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-sitemap fa-fw"
|
||||
icon={Share2}
|
||||
label="Networks"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
to="docker.volumes"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-hdd fa-fw"
|
||||
label="Volumes"
|
||||
/>
|
||||
<VolumesLink environmentId={environmentId} platformPath="docker" />
|
||||
|
||||
{apiVersion >= 1.3 && isSwarmManager && (
|
||||
<SidebarItem
|
||||
to="docker.configs"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-file-code fa-fw"
|
||||
icon={Clipboard}
|
||||
label="Configs"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -133,7 +136,7 @@ export function DockerSidebar({ environmentId, environment }: Props) {
|
|||
<SidebarItem
|
||||
to="docker.secrets"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-user-secret fa-fw"
|
||||
icon={Lock}
|
||||
label="Secrets"
|
||||
/>
|
||||
)}
|
||||
|
|
@ -142,14 +145,14 @@ export function DockerSidebar({ environmentId, environment }: Props) {
|
|||
<SidebarItem
|
||||
to="docker.events"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-history fa-fw"
|
||||
icon={Clock}
|
||||
label="Events"
|
||||
/>
|
||||
)}
|
||||
|
||||
<SidebarItem
|
||||
label={setupSubMenuProps.label}
|
||||
iconClass={setupSubMenuProps.iconClass}
|
||||
icon={setupSubMenuProps.icon}
|
||||
to={setupSubMenuProps.to}
|
||||
params={{ endpointId: environmentId }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,15 @@
|
|||
import { Box, Clock, Grid, Layers } from 'react-feather';
|
||||
|
||||
import { SidebarItem } from './SidebarItem';
|
||||
import { SidebarSection } from './SidebarSection';
|
||||
|
||||
export function EdgeComputeSidebar() {
|
||||
return (
|
||||
<SidebarSection title="Edge compute">
|
||||
<SidebarItem
|
||||
to="edge.devices"
|
||||
iconClass="fas fa-laptop-code fa-fw"
|
||||
label="Edge Devices"
|
||||
/>
|
||||
<SidebarItem
|
||||
to="edge.groups"
|
||||
iconClass="fa-object-group fa-fw"
|
||||
label="Edge Groups"
|
||||
/>
|
||||
<SidebarItem
|
||||
to="edge.stacks"
|
||||
iconClass="fa-layer-group fa-fw"
|
||||
label="Edge Stacks"
|
||||
/>
|
||||
<SidebarItem
|
||||
to="edge.jobs"
|
||||
iconClass="fa-clock fa-fw"
|
||||
label="Edge Jobs"
|
||||
/>
|
||||
<SidebarItem to="edge.devices" label="Edge Devices" icon={Box} />
|
||||
<SidebarItem to="edge.groups" label="Edge Groups" icon={Grid} />
|
||||
<SidebarItem to="edge.stacks" label="Edge Stacks" icon={Layers} />
|
||||
<SidebarItem to="edge.jobs" label="Edge Jobs" icon={Clock} />
|
||||
</SidebarSection>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { useCurrentStateAndParams } from '@uirouter/react';
|
||||
import { useCurrentStateAndParams, useRouter } from '@uirouter/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { X } from 'react-feather';
|
||||
|
||||
import {
|
||||
PlatformType,
|
||||
|
|
@ -9,59 +10,61 @@ import {
|
|||
import { getPlatformType } from '@/portainer/environments/utils';
|
||||
import { useEnvironment } from '@/portainer/environments/queries/useEnvironment';
|
||||
|
||||
import { getPlatformIcon } from '../portainer/environments/utils/get-platform-icon';
|
||||
|
||||
import { AzureSidebar } from './AzureSidebar';
|
||||
import { DockerSidebar } from './DockerSidebar';
|
||||
import { KubernetesSidebar } from './KubernetesSidebar';
|
||||
import { SidebarSection } from './SidebarSection';
|
||||
import styles from './EnvironmentSidebar.module.css';
|
||||
import { useSidebarState } from './useSidebarState';
|
||||
|
||||
export function EnvironmentSidebar() {
|
||||
const currentEnvironmentQuery = useCurrentEnvironment();
|
||||
const { query: currentEnvironmentQuery, clearEnvironment } =
|
||||
useCurrentEnvironment();
|
||||
const environment = currentEnvironmentQuery.data;
|
||||
|
||||
if (!environment) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const platform = getPlatformType(environment.Type);
|
||||
const sidebar = getSidebar(environment);
|
||||
const Sidebar = getSidebar(platform);
|
||||
|
||||
return (
|
||||
<SidebarSection
|
||||
title={
|
||||
<div className={styles.title}>
|
||||
<i className="fa fa-plug space-right" />
|
||||
{environment.Name}
|
||||
</div>
|
||||
}
|
||||
label={PlatformType[platform]}
|
||||
>
|
||||
{sidebar}
|
||||
</SidebarSection>
|
||||
<div className="rounded border border-dotted py-2 be:bg-gray-10 bg-blue-11 be:border-gray-8 border-blue-9">
|
||||
<SidebarSection
|
||||
title={PlatformType[platform]}
|
||||
renderTitle={(className) => (
|
||||
<Title
|
||||
className={className}
|
||||
environment={environment}
|
||||
onClear={clearEnvironment}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<Sidebar environmentId={environment.Id} environment={environment} />
|
||||
</SidebarSection>
|
||||
</div>
|
||||
);
|
||||
|
||||
function getSidebar(environment: Environment) {
|
||||
switch (platform) {
|
||||
case PlatformType.Azure:
|
||||
return <AzureSidebar environmentId={environment.Id} />;
|
||||
case PlatformType.Docker:
|
||||
return (
|
||||
<DockerSidebar
|
||||
environmentId={environment.Id}
|
||||
environment={environment}
|
||||
/>
|
||||
);
|
||||
case PlatformType.Kubernetes:
|
||||
return <KubernetesSidebar environmentId={environment.Id} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
function getSidebar(platform: PlatformType) {
|
||||
const sidebar: {
|
||||
[key in PlatformType]: React.ComponentType<{
|
||||
environmentId: EnvironmentId;
|
||||
environment: Environment;
|
||||
}>;
|
||||
} = {
|
||||
[PlatformType.Azure]: AzureSidebar,
|
||||
[PlatformType.Docker]: DockerSidebar,
|
||||
[PlatformType.Kubernetes]: KubernetesSidebar,
|
||||
};
|
||||
|
||||
return sidebar[platform];
|
||||
}
|
||||
}
|
||||
|
||||
function useCurrentEnvironment() {
|
||||
const { params } = useCurrentStateAndParams();
|
||||
|
||||
const router = useRouter();
|
||||
const [environmentId, setEnvironmentId] = useState<EnvironmentId>();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -71,5 +74,50 @@ function useCurrentEnvironment() {
|
|||
}
|
||||
}, [params.endpointId]);
|
||||
|
||||
return useEnvironment(environmentId);
|
||||
return { query: useEnvironment(environmentId), clearEnvironment };
|
||||
|
||||
function clearEnvironment() {
|
||||
if (params.endpointId) {
|
||||
router.stateService.go('portainer.home');
|
||||
}
|
||||
|
||||
setEnvironmentId(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
interface TitleProps {
|
||||
className: string;
|
||||
environment: Environment;
|
||||
onClear(): void;
|
||||
}
|
||||
|
||||
function Title({ className, environment, onClear }: TitleProps) {
|
||||
const { isOpen } = useSidebarState();
|
||||
const EnvironmentIcon = getPlatformIcon(environment.Type);
|
||||
|
||||
if (!isOpen) {
|
||||
return (
|
||||
<li className="w-full flex justify-center" title={environment.Name}>
|
||||
<EnvironmentIcon className="text-2xl" />
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li className={className}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Environment</span>
|
||||
<EnvironmentIcon className="text-2xl" />
|
||||
<span className="text-white">{environment.Name}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
className="flex items-center justify-center be:bg-gray-9 bg-blue-10 rounded border-0 text-sm h-5 w-5 p-1 ml-auto mr-2 text-gray-5 be:text-gray-6 hover:text-white"
|
||||
>
|
||||
<X />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,3 @@
|
|||
:global(#page-wrapper:not(.open)) .root {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.root {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: inline;
|
||||
width: 100%;
|
||||
max-width: 100px;
|
||||
height: 100%;
|
||||
max-height: 35px;
|
||||
margin: 2px 0 2px 20px;
|
||||
}
|
||||
|
||||
.version {
|
||||
font-size: 11px;
|
||||
margin: 11px 20px 0 7px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.edition-version {
|
||||
font-size: 10px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { useQuery } from 'react-query';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import smallLogo from '@/assets/images/logo_small.png';
|
||||
import { getStatus } from '@/portainer/services/api/status.service';
|
||||
|
||||
import { UpdateNotification } from './UpdateNotifications';
|
||||
|
|
@ -17,22 +16,23 @@ export function Footer() {
|
|||
const { Edition, Version } = statusQuery.data;
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<div className={clsx(styles.root, 'text-center')}>
|
||||
{process.env.PORTAINER_EDITION === 'CE' && <UpdateNotification />}
|
||||
<div>
|
||||
<img
|
||||
src={smallLogo}
|
||||
className={clsx('img-responsive', styles.logo)}
|
||||
alt="Portainer"
|
||||
/>
|
||||
<span
|
||||
className={styles.version}
|
||||
data-cy="portainerSidebar-versionNumber"
|
||||
>
|
||||
{Version}
|
||||
</span>
|
||||
{process.env.PORTAINER_EDITION !== 'CE' && (
|
||||
<div className={styles.editionVersion}>{Edition}</div>
|
||||
<div className="text-xs space-x-1 text-gray-5 be:text-gray-6">
|
||||
<span>©</span>
|
||||
<span>Portainer {Edition}</span>
|
||||
|
||||
<span data-cy="portainerSidebar-versionNumber">{Version}</span>
|
||||
|
||||
{process.env.PORTAINER_EDITION === 'CE' && (
|
||||
<a
|
||||
href="https://www.portainer.io/install-BE-now"
|
||||
className="text-blue-6 font-medium"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Upgrade
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
.root {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toggle-button {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: initial;
|
||||
float: right;
|
||||
padding-right: 28px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.root {
|
||||
height: 60px;
|
||||
list-style: none;
|
||||
text-indent: 20px;
|
||||
font-size: 18px;
|
||||
background: var(--bg-sidebar-header-color);
|
||||
}
|
||||
|
||||
.root a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.root a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import defaultLogo from '@/assets/images/logo.png';
|
||||
import { ChevronsLeft, ChevronsRight } from 'react-feather';
|
||||
|
||||
import defaultLogo from '@/assets/images/logo_small_alt.png';
|
||||
|
||||
import { Link } from '@@/Link';
|
||||
|
||||
import styles from './Header.module.css';
|
||||
import { useSidebarState } from './useSidebarState';
|
||||
|
||||
interface Props {
|
||||
|
|
@ -10,28 +11,32 @@ interface Props {
|
|||
}
|
||||
|
||||
export function Header({ logo }: Props) {
|
||||
const { toggle } = useSidebarState();
|
||||
const { toggle, isOpen } = useSidebarState();
|
||||
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<Link to="portainer.home" data-cy="portainerSidebar-homeImage">
|
||||
<div className="flex justify-between items-center">
|
||||
<Link
|
||||
to="portainer.home"
|
||||
data-cy="portainerSidebar-homeImage"
|
||||
className="text-2xl text-white no-underline hover:no-underline hover:text-white"
|
||||
>
|
||||
<img
|
||||
src={logo || defaultLogo}
|
||||
className="img-responsive logo"
|
||||
alt={!logo ? 'Portainer' : ''}
|
||||
alt={!logo ? 'portainer.io' : 'Logo'}
|
||||
/>
|
||||
{isOpen && 'portainer.io'}
|
||||
</Link>
|
||||
{toggle && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle()}
|
||||
className={styles.toggleButton}
|
||||
aria-label="Toggle Sidebar"
|
||||
title="Toggle Sidebar"
|
||||
>
|
||||
<i className="glyphicon glyphicon-transfer" />
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggle()}
|
||||
className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm be:bg-gray-10 bg-blue-11 hover:text-white be:hover:text-white"
|
||||
aria-label="Toggle Sidebar"
|
||||
title="Toggle Sidebar"
|
||||
>
|
||||
{isOpen ? <ChevronsLeft /> : <ChevronsRight />}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,12 @@
|
|||
import { Box, Edit, Layers, Loader, Lock, Server } from 'react-feather';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
import { Authorized } from '@/portainer/hooks/useUser';
|
||||
|
||||
import { DashboardLink } from '../items/DashboardLink';
|
||||
import { SidebarItem } from '../SidebarItem';
|
||||
import { VolumesLink } from '../items/VolumesLink';
|
||||
import { useSidebarState } from '../useSidebarState';
|
||||
|
||||
import { KubectlShellButton } from './KubectlShell';
|
||||
|
||||
|
|
@ -10,28 +15,25 @@ interface Props {
|
|||
}
|
||||
|
||||
export function KubernetesSidebar({ environmentId }: Props) {
|
||||
const { isOpen } = useSidebarState();
|
||||
|
||||
return (
|
||||
<>
|
||||
<KubectlShellButton environmentId={environmentId} />
|
||||
{isOpen && <KubectlShellButton environmentId={environmentId} />}
|
||||
|
||||
<SidebarItem
|
||||
to="kubernetes.dashboard"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-tachometer-alt fa-fw"
|
||||
label="Dashboard"
|
||||
/>
|
||||
<DashboardLink environmentId={environmentId} platformPath="kubernetes" />
|
||||
|
||||
<SidebarItem
|
||||
to="kubernetes.templates.custom"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-rocket fa-fw"
|
||||
icon={Edit}
|
||||
label="Custom Templates"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
to="kubernetes.resourcePools"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-layer-group fa-fw"
|
||||
icon={Layers}
|
||||
label="Namespaces"
|
||||
/>
|
||||
|
||||
|
|
@ -39,7 +41,7 @@ export function KubernetesSidebar({ environmentId }: Props) {
|
|||
<SidebarItem
|
||||
to="kubernetes.templates.helm"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-dharmachakra fa-fw"
|
||||
icon={Loader}
|
||||
label="Helm"
|
||||
/>
|
||||
</Authorized>
|
||||
|
|
@ -47,28 +49,23 @@ export function KubernetesSidebar({ environmentId }: Props) {
|
|||
<SidebarItem
|
||||
to="kubernetes.applications"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-laptop-code fa-fw"
|
||||
icon={Box}
|
||||
label="Applications"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
to="kubernetes.configurations"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-file-code fa-fw"
|
||||
icon={Lock}
|
||||
label="ConfigMaps & Secrets"
|
||||
/>
|
||||
|
||||
<SidebarItem
|
||||
to="kubernetes.volumes"
|
||||
params={{ endpointId: environmentId }}
|
||||
iconClass="fa-database fa-fw"
|
||||
label="Volumes"
|
||||
/>
|
||||
<VolumesLink environmentId={environmentId} platformPath="kubernetes" />
|
||||
|
||||
<SidebarItem
|
||||
iconClass="fa-server fa-fw"
|
||||
label="Cluster"
|
||||
to="kubernetes.cluster"
|
||||
icon={Server}
|
||||
params={{ endpointId: environmentId }}
|
||||
>
|
||||
<Authorized authorizations="K8sClusterSetupRW" adminOnlyCE>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,12 @@
|
|||
import {
|
||||
Users,
|
||||
Award,
|
||||
Settings,
|
||||
HardDrive,
|
||||
Radio,
|
||||
FileText,
|
||||
} from 'react-feather';
|
||||
|
||||
import { usePublicSettings } from '@/portainer/settings/queries';
|
||||
|
||||
import { SidebarItem } from './SidebarItem';
|
||||
|
|
@ -18,11 +27,7 @@ export function SettingsSidebar({ isAdmin }: Props) {
|
|||
return (
|
||||
<SidebarSection title="Settings">
|
||||
{showUsersSection && (
|
||||
<SidebarItem
|
||||
to="portainer.users"
|
||||
label="Users"
|
||||
iconClass="fa-users fa-fw"
|
||||
>
|
||||
<SidebarItem to="portainer.users" label="Users" icon={Users}>
|
||||
<SidebarItem to="portainer.teams" label="Teams" />
|
||||
|
||||
{isAdmin && <SidebarItem to="portainer.roles" label="Roles" />}
|
||||
|
|
@ -33,7 +38,7 @@ export function SettingsSidebar({ isAdmin }: Props) {
|
|||
<SidebarItem
|
||||
label="Environments"
|
||||
to="portainer.endpoints"
|
||||
iconClass="fa-plug fa-fw"
|
||||
icon={HardDrive}
|
||||
openOnPaths={['portainer.wizard.endpoints']}
|
||||
>
|
||||
<SidebarItem to="portainer.groups" label="Groups" />
|
||||
|
|
@ -43,22 +48,26 @@ export function SettingsSidebar({ isAdmin }: Props) {
|
|||
<SidebarItem
|
||||
label="Registries"
|
||||
to="portainer.registries"
|
||||
iconClass="fa-database fa-fw"
|
||||
icon={Radio}
|
||||
/>
|
||||
|
||||
{process.env.PORTAINER_EDITION !== 'CE' && (
|
||||
<SidebarItem
|
||||
to="portainer.licenses"
|
||||
label="Licenses"
|
||||
icon={Award}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SidebarItem
|
||||
label="Authentication logs"
|
||||
to="portainer.authLogs"
|
||||
iconClass="fa-history fa-fw"
|
||||
icon={FileText}
|
||||
>
|
||||
<SidebarItem to="portainer.activityLogs" label="Activity Logs" />
|
||||
</SidebarItem>
|
||||
|
||||
<SidebarItem
|
||||
to="portainer.settings"
|
||||
label="Settings"
|
||||
iconClass="fa-cogs fa-fw"
|
||||
>
|
||||
<SidebarItem to="portainer.settings" label="Settings" icon={Settings}>
|
||||
{!window.ddExtension && (
|
||||
<SidebarItem
|
||||
to="portainer.settings.authentication"
|
||||
|
|
@ -81,6 +90,7 @@ export function SettingsSidebar({ isAdmin }: Props) {
|
|||
}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="px-3 rounded flex h-full items-center"
|
||||
>
|
||||
Help / About
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,43 @@
|
|||
:global(#page-wrapper) {
|
||||
padding-left: var(--sidebar-closed-width);
|
||||
transition: all 0.4s ease 0s;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 561px) {
|
||||
:global(#page-wrapper.open) {
|
||||
padding-left: var(--sidebar-width);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 560px) {
|
||||
:global(#page-wrapper.open) {
|
||||
padding-left: var(--sidebar-closed-width);
|
||||
}
|
||||
}
|
||||
|
||||
:global(#page-wrapper) {
|
||||
--sidebar-width: 300px;
|
||||
--sidebar-closed-width: 75px;
|
||||
}
|
||||
|
||||
:global(#page-wrapper.open) .root {
|
||||
left: 150px;
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
|
||||
.root {
|
||||
margin-left: -150px;
|
||||
left: -30px;
|
||||
width: 250px;
|
||||
position: fixed;
|
||||
width: var(--sidebar-closed-width);
|
||||
height: 100%;
|
||||
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
||||
z-index: 999;
|
||||
transition: all 0.4s ease 0s;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.root {
|
||||
background-color: var(--blue-5);
|
||||
}
|
||||
:global(:root[theme='dark']) .root {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
:global(:root[theme='highcontrast']) .root {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
:global(:root[data-edition='BE']) .root {
|
||||
background-color: var(--grey-5);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='dark']) .root {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) .root {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
||||
ul.sidebar {
|
||||
.root ul {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-indent: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
import clsx from 'clsx';
|
||||
import { Home } from 'react-feather';
|
||||
|
||||
import { useUser } from '@/portainer/hooks/useUser';
|
||||
import { useIsTeamLeader } from '@/portainer/users/queries';
|
||||
import { usePublicSettings } from '@/portainer/settings/queries';
|
||||
|
|
@ -26,15 +29,19 @@ export function Sidebar() {
|
|||
return (
|
||||
/* in the future (when we remove r2a) this should wrap the whole app - to change root styles */
|
||||
<SidebarProvider>
|
||||
<nav id="sidebar-wrapper" className={styles.root} aria-label="Main">
|
||||
<nav
|
||||
className={clsx(
|
||||
styles.root,
|
||||
'p-5 flex flex-col be:bg-gray-11 bg-blue-10'
|
||||
)}
|
||||
aria-label="Main"
|
||||
>
|
||||
<Header logo={LogoURL} />
|
||||
<div className={styles.sidebarContent}>
|
||||
<ul className={styles.sidebar}>
|
||||
<SidebarItem
|
||||
to="portainer.home"
|
||||
iconClass="fa-home fa-fw"
|
||||
label="Home"
|
||||
/>
|
||||
|
||||
{/* negative margin + padding -> scrollbar won't hide the content */}
|
||||
<div className="mt-6 overflow-y-auto flex-1 -mr-4 pr-4">
|
||||
<ul className="space-y-9">
|
||||
<SidebarItem to="portainer.home" icon={Home} label="Home" />
|
||||
|
||||
<EnvironmentSidebar />
|
||||
|
||||
|
|
@ -44,7 +51,9 @@ export function Sidebar() {
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
<div className="mt-auto pt-8">
|
||||
<Footer />
|
||||
</div>
|
||||
</nav>
|
||||
</SidebarProvider>
|
||||
);
|
||||
|
|
|
|||
85
app/react/sidebar/SidebarItem/Head.tsx
Normal file
85
app/react/sidebar/SidebarItem/Head.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import {
|
||||
TransitionOptions,
|
||||
useCurrentStateAndParams,
|
||||
useSrefActive as useUiRouterSrefActive,
|
||||
} from '@uirouter/react';
|
||||
import clsx from 'clsx';
|
||||
import { ComponentProps } from 'react';
|
||||
|
||||
import { Link } from '@@/Link';
|
||||
import { IconProps, Icon } from '@@/Icon';
|
||||
|
||||
import { useSidebarState } from '../useSidebarState';
|
||||
|
||||
interface Props extends IconProps, ComponentProps<typeof Link> {
|
||||
label: string;
|
||||
ignorePaths?: string[];
|
||||
}
|
||||
|
||||
export function Head({
|
||||
to,
|
||||
options,
|
||||
params = {},
|
||||
label,
|
||||
icon,
|
||||
ignorePaths = [],
|
||||
}: Props) {
|
||||
const { isOpen } = useSidebarState();
|
||||
const anchorProps = useSrefActive(
|
||||
to,
|
||||
'bg-blue-8 be:bg-gray-8',
|
||||
params,
|
||||
options,
|
||||
ignorePaths
|
||||
);
|
||||
|
||||
return (
|
||||
<a
|
||||
href={anchorProps.href}
|
||||
onClick={anchorProps.onClick}
|
||||
title={label}
|
||||
className={clsx(
|
||||
anchorProps.className,
|
||||
'text-inherit no-underline hover:no-underline hover:text-inherit focus:no-underline focus:text-inherit w-full flex-1 rounded-md',
|
||||
{ 'px-3': isOpen }
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx('flex items-center h-8 space-x-4 text-sm', {
|
||||
'justify-start w-full': isOpen,
|
||||
'justify-center w-8': !isOpen,
|
||||
})}
|
||||
>
|
||||
{!!icon && (
|
||||
<Icon icon={icon} feather className={clsx('flex [&>svg]:w-4')} />
|
||||
)}
|
||||
{isOpen && <span>{label}</span>}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function useSrefActive(
|
||||
to: string,
|
||||
activeClassName: string,
|
||||
params: Partial<Record<string, string>> = {},
|
||||
options: TransitionOptions = {},
|
||||
ignorePaths: string[] = []
|
||||
) {
|
||||
const { state } = useCurrentStateAndParams();
|
||||
const anchorProps = useUiRouterSrefActive(
|
||||
to,
|
||||
params || {},
|
||||
activeClassName,
|
||||
options
|
||||
);
|
||||
|
||||
const className = ignorePaths.includes(state.name || '')
|
||||
? ''
|
||||
: anchorProps.className;
|
||||
|
||||
return {
|
||||
...anchorProps,
|
||||
className,
|
||||
};
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.menu-icon {
|
||||
padding-right: 30px;
|
||||
width: 70px;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@media (max-height: 785px) {
|
||||
.menu-icon {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 786px) and (max-height: 924px) {
|
||||
.menu-icon {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import styles from './Icon.module.css';
|
||||
|
||||
interface Props {
|
||||
iconClass: string;
|
||||
}
|
||||
|
||||
export function Icon({ iconClass }: Props) {
|
||||
return (
|
||||
<i
|
||||
role="img"
|
||||
className={clsx('fa', iconClass, styles.menuIcon)}
|
||||
aria-label="itemIcon"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
a.active {
|
||||
color: #fff;
|
||||
border-left-color: var(--border-sidebar-color);
|
||||
}
|
||||
|
||||
a.active {
|
||||
background: var(--grey-37);
|
||||
}
|
||||
|
||||
:global(:root[theme='dark']) a.active {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
|
||||
:global(:root[theme='highcontrast']) a.active {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
||||
:global(:root[data-edition='BE']) a.active {
|
||||
background-color: var(--grey-5);
|
||||
}
|
||||
|
||||
:global(:root[data-edition='BE'][theme='dark']) a.active {
|
||||
background-color: var(--grey-1);
|
||||
}
|
||||
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) a.active {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { UISrefActive } from '@uirouter/react';
|
||||
import { Children, ComponentProps, ReactNode } from 'react';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { Link as NavLink } from '@@/Link';
|
||||
|
||||
import styles from './Link.module.css';
|
||||
|
||||
interface Props extends ComponentProps<typeof NavLink> {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function Link({ children, to, options, params, title }: Props) {
|
||||
const label = title || getLabel(children);
|
||||
|
||||
return (
|
||||
<UISrefActive class={styles.active}>
|
||||
<NavLink
|
||||
to={to}
|
||||
params={params}
|
||||
className={styles.link}
|
||||
title={label}
|
||||
options={options}
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
</UISrefActive>
|
||||
);
|
||||
}
|
||||
|
||||
function getLabel(children: ReactNode) {
|
||||
return _.first(
|
||||
_.compact(
|
||||
Children.map(children, (child) => {
|
||||
if (typeof child === 'string') {
|
||||
return child;
|
||||
}
|
||||
|
||||
return '';
|
||||
})
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.sidebar-menu-head {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebar-menu-head .sidebar-menu-indicator {
|
||||
background: none;
|
||||
border: 0;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 25%;
|
||||
}
|
||||
|
||||
.items {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.items > * {
|
||||
text-indent: 35px;
|
||||
}
|
||||
|
|
@ -1,17 +1,16 @@
|
|||
import { useCurrentStateAndParams } from '@uirouter/react';
|
||||
import clsx from 'clsx';
|
||||
import {
|
||||
Children,
|
||||
PropsWithChildren,
|
||||
ReactElement,
|
||||
ReactNode,
|
||||
useMemo,
|
||||
useReducer,
|
||||
} from 'react';
|
||||
import { ChevronDown, ChevronUp } from 'react-feather';
|
||||
|
||||
import { useSidebarState } from '../useSidebarState';
|
||||
|
||||
import styles from './Menu.module.css';
|
||||
import { getPaths } from './utils';
|
||||
|
||||
interface Props {
|
||||
head: ReactNode;
|
||||
|
|
@ -26,38 +25,32 @@ export function Menu({
|
|||
const { isOpen: isSidebarOpen } = useSidebarState();
|
||||
|
||||
const paths = useMemo(
|
||||
() => [
|
||||
...getPaths(head, []),
|
||||
...getPathsForChildren(children),
|
||||
...openOnPaths,
|
||||
],
|
||||
[children, openOnPaths, head]
|
||||
() => [...getPaths(head, []), ...openOnPaths],
|
||||
[openOnPaths, head]
|
||||
);
|
||||
|
||||
const { isOpen, toggleOpen } = useIsOpen(isSidebarOpen, paths);
|
||||
|
||||
const CollapseButtonIcon = isOpen ? ChevronUp : ChevronDown;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.sidebarMenuHead}>
|
||||
{Children.count(children) > 0 && (
|
||||
<div className="flex-1">
|
||||
<div className="flex w-full justify-between items-center relative ">
|
||||
{head}
|
||||
{isSidebarOpen && Children.count(children) > 0 && (
|
||||
<button
|
||||
className={clsx('small', styles.sidebarMenuIndicator)}
|
||||
className="bg-transparent border-0 w-6 h-6 flex items-center justify-center absolute right-2 text-gray-5"
|
||||
onClick={handleClickArrow}
|
||||
type="button"
|
||||
aria-label="Collapse button"
|
||||
>
|
||||
<i
|
||||
className={clsx(
|
||||
'fas',
|
||||
isOpen ? 'fa-chevron-down' : 'fa-chevron-right'
|
||||
)}
|
||||
/>
|
||||
<CollapseButtonIcon className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
{head}
|
||||
</div>
|
||||
|
||||
{isOpen && <ul className={styles.items}>{children}</ul>}
|
||||
</>
|
||||
{isOpen && <ul className="!pl-8">{children}</ul>}
|
||||
</div>
|
||||
);
|
||||
|
||||
function handleClickArrow(e: React.MouseEvent<HTMLButtonElement>) {
|
||||
|
|
@ -100,30 +93,3 @@ function useIsOpen(
|
|||
return isOpenByState;
|
||||
}
|
||||
}
|
||||
|
||||
function isReactElement(element: ReactNode): element is ReactElement {
|
||||
return (
|
||||
!!element &&
|
||||
typeof element === 'object' &&
|
||||
'type' in element &&
|
||||
'props' in element
|
||||
);
|
||||
}
|
||||
|
||||
function getPathsForChildren(children: ReactNode): string[] {
|
||||
return Children.map(children, (child) => getPaths(child, []))?.flat() || [];
|
||||
}
|
||||
|
||||
function getPaths(element: ReactNode, paths: string[]): string[] {
|
||||
if (!isReactElement(element)) {
|
||||
return paths;
|
||||
}
|
||||
|
||||
if (typeof element.props.to === 'undefined') {
|
||||
return Children.map(element.props.children, (child) =>
|
||||
getPaths(child, paths)
|
||||
);
|
||||
}
|
||||
|
||||
return [element.props.to, ...paths];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
.sidebar-menu-item {
|
||||
text-indent: 25px;
|
||||
}
|
||||
|
||||
.sidebar-menu-item a {
|
||||
padding-left: 5px;
|
||||
border-left: 3px solid transparent;
|
||||
font-size: 14px;
|
||||
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.03em;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
text-decoration: none;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.sidebar-menu-item a {
|
||||
color: var(--grey-56);
|
||||
}
|
||||
:global(:root[theme='dark']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[theme='highcontrast']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[data-edition='BE']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='dark']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) .sidebar-menu-item a {
|
||||
color: var(--white-color);
|
||||
}
|
||||
|
||||
@media (max-height: 785px) {
|
||||
.sidebar-menu-item a {
|
||||
font-size: 12px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 786px) and (max-height: 924px) {
|
||||
.sidebar-menu-item a {
|
||||
font-size: 12px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu-item a:hover {
|
||||
color: #fff;
|
||||
border-left-color: #e99d1a;
|
||||
}
|
||||
|
||||
.sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-37);
|
||||
}
|
||||
:global(:root[theme='dark']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
:global(:root[theme='highcontrast']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
:global(:root[data-edition='BE']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-34);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='dark']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--grey-3);
|
||||
}
|
||||
:global(:root[data-edition='BE'][theme='highcontrast']) .sidebar-menu-item a:hover {
|
||||
background-color: var(--black-color);
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { Meta, Story } from '@storybook/react';
|
||||
import { Clock, Icon } from 'react-feather';
|
||||
|
||||
import { SidebarItem } from '.';
|
||||
|
||||
|
|
@ -9,33 +10,30 @@ const meta: Meta = {
|
|||
export default meta;
|
||||
|
||||
interface StoryProps {
|
||||
iconClass?: string;
|
||||
className: string;
|
||||
icon?: Icon;
|
||||
label: string;
|
||||
}
|
||||
|
||||
function Template({ iconClass, className, label: linkName }: StoryProps) {
|
||||
function Template({ icon, label }: StoryProps) {
|
||||
return (
|
||||
<ul className="sidebar">
|
||||
<SidebarItem.Wrapper className={className}>
|
||||
<SidebarItem.Link to="example.path" params={{ endpointId: 1 }}>
|
||||
{linkName}
|
||||
{iconClass && <SidebarItem.Icon iconClass={iconClass} />}
|
||||
</SidebarItem.Link>
|
||||
</SidebarItem.Wrapper>
|
||||
<SidebarItem
|
||||
to="example.path"
|
||||
params={{ endpointId: 1 }}
|
||||
icon={icon}
|
||||
label={label}
|
||||
/>
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export const Primary: Story<StoryProps> = Template.bind({});
|
||||
Primary.args = {
|
||||
iconClass: 'fa-tachometer-alt fa-fw',
|
||||
className: 'exampleItemClass',
|
||||
icon: Clock,
|
||||
label: 'Item with icon',
|
||||
};
|
||||
|
||||
export const WithoutIcon: Story<StoryProps> = Template.bind({});
|
||||
WithoutIcon.args = {
|
||||
className: 'exampleItemClass',
|
||||
label: 'Item without icon',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
import { render } from '@/react-tools/test-utils';
|
||||
|
||||
import { SidebarItem } from '.';
|
||||
|
||||
test('should be visible & have expected class', () => {
|
||||
const { getByRole, getByText } = renderComponent('Test', 'testClass');
|
||||
const listItem = getByRole('listitem');
|
||||
expect(listItem).toBeVisible();
|
||||
expect(listItem).toHaveClass('testClass');
|
||||
expect(getByText('Test')).toBeVisible();
|
||||
});
|
||||
|
||||
test('icon should with correct icon if iconClass is provided', () => {
|
||||
const { getByLabelText } = renderComponent('', '', 'testIconClass');
|
||||
const sidebarIcon = getByLabelText('itemIcon');
|
||||
expect(sidebarIcon).toBeVisible();
|
||||
expect(sidebarIcon).toHaveClass('testIconClass');
|
||||
});
|
||||
|
||||
test('icon should not be rendered if iconClass is not provided', () => {
|
||||
const { queryByRole } = renderComponent();
|
||||
expect(queryByRole('img')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
function renderComponent(label = '', className = '', iconClass = '') {
|
||||
return render(
|
||||
<SidebarItem.Wrapper className={className}>
|
||||
<SidebarItem.Link to="" params={{ endpointId: 1 }}>
|
||||
{label}
|
||||
</SidebarItem.Link>
|
||||
<SidebarItem.Icon iconClass={iconClass} />
|
||||
</SidebarItem.Wrapper>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,38 +1,43 @@
|
|||
import { ReactNode } from 'react';
|
||||
import { Icon } from 'react-feather';
|
||||
|
||||
import { Wrapper } from './Wrapper';
|
||||
import { Link } from './Link';
|
||||
import { Menu } from './Menu';
|
||||
import { Icon } from './Icon';
|
||||
import { Head } from './Head';
|
||||
import { getPathsForChildren } from './utils';
|
||||
|
||||
type Props = {
|
||||
iconClass?: string;
|
||||
interface Props {
|
||||
icon?: Icon;
|
||||
to: string;
|
||||
params?: object;
|
||||
label: string;
|
||||
children?: ReactNode;
|
||||
openOnPaths?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export function SidebarItem({
|
||||
children,
|
||||
iconClass,
|
||||
icon,
|
||||
to,
|
||||
params,
|
||||
label,
|
||||
openOnPaths,
|
||||
openOnPaths = [],
|
||||
}: Props) {
|
||||
const childrenPath = getPathsForChildren(children);
|
||||
const head = (
|
||||
<Link to={to} params={params}>
|
||||
{label}
|
||||
{iconClass && <Icon iconClass={iconClass} />}
|
||||
</Link>
|
||||
<Head
|
||||
icon={icon}
|
||||
to={to}
|
||||
params={params}
|
||||
label={label}
|
||||
ignorePaths={childrenPath}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<Wrapper label={label}>
|
||||
{children ? (
|
||||
<Menu head={head} openOnPaths={openOnPaths}>
|
||||
<Menu head={head} openOnPaths={[...openOnPaths, ...childrenPath]}>
|
||||
{children}
|
||||
</Menu>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { PropsWithChildren, AriaAttributes } from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
import styles from './SidebarItem.module.css';
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
label?: string;
|
||||
|
|
@ -16,7 +14,11 @@ export function Wrapper({
|
|||
}: PropsWithChildren<Props> & AriaAttributes) {
|
||||
return (
|
||||
<li
|
||||
className={clsx(styles.sidebarMenuItem, className)}
|
||||
className={clsx(
|
||||
'flex',
|
||||
className,
|
||||
'text-gray-3 min-h-8 [&>a]:text-inherit [&>a]:hover:text-inherit [&>a]:hover:no-underline'
|
||||
)}
|
||||
title={label}
|
||||
aria-label={label}
|
||||
// eslint-disable-next-line react/jsx-props-no-spreading
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
import { SidebarItem as MainComponent } from './SidebarItem';
|
||||
import { Icon } from './Icon';
|
||||
import { Link } from './Link';
|
||||
import { Menu } from './Menu';
|
||||
import { Wrapper } from './Wrapper';
|
||||
|
||||
interface SubComponents {
|
||||
Icon: typeof Icon;
|
||||
Link: typeof Link;
|
||||
Menu: typeof Menu;
|
||||
Wrapper: typeof Wrapper;
|
||||
}
|
||||
|
|
@ -14,7 +10,5 @@ interface SubComponents {
|
|||
export const SidebarItem: typeof MainComponent & SubComponents =
|
||||
MainComponent as typeof MainComponent & SubComponents;
|
||||
|
||||
SidebarItem.Link = Link;
|
||||
SidebarItem.Icon = Icon;
|
||||
SidebarItem.Menu = Menu;
|
||||
SidebarItem.Wrapper = Wrapper;
|
||||
|
|
|
|||
28
app/react/sidebar/SidebarItem/utils.ts
Normal file
28
app/react/sidebar/SidebarItem/utils.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { ReactNode, ReactElement, Children } from 'react';
|
||||
|
||||
function isReactElement(element: ReactNode): element is ReactElement {
|
||||
return (
|
||||
!!element &&
|
||||
typeof element === 'object' &&
|
||||
'type' in element &&
|
||||
'props' in element
|
||||
);
|
||||
}
|
||||
|
||||
export function getPathsForChildren(children: ReactNode): string[] {
|
||||
return Children.map(children, (child) => getPaths(child, []))?.flat() || [];
|
||||
}
|
||||
|
||||
export function getPaths(element: ReactNode, paths: string[]): string[] {
|
||||
if (!isReactElement(element)) {
|
||||
return paths;
|
||||
}
|
||||
|
||||
if (typeof element.props.to === 'undefined') {
|
||||
return Children.map(element.props.children, (child) =>
|
||||
getPaths(child, paths)
|
||||
);
|
||||
}
|
||||
|
||||
return [element.props.to, ...paths];
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
.sidebar-title {
|
||||
color: var(--text-sidebar-title-color);
|
||||
font-size: 12px;
|
||||
height: 35px;
|
||||
line-height: 40px;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.6s ease 0s;
|
||||
}
|
||||
|
||||
#page-wrapper:not(.open) .sidebar-title {
|
||||
display: none;
|
||||
height: 0px;
|
||||
text-indent: -100px;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
@media (max-height: 785px) {
|
||||
.sidebar-title {
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 786px) and (max-height: 924px) {
|
||||
.sidebar-title {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +1,30 @@
|
|||
import { PropsWithChildren, ReactNode } from 'react';
|
||||
|
||||
import styles from './SidebarSection.module.css';
|
||||
import { useSidebarState } from './useSidebarState';
|
||||
|
||||
interface Props {
|
||||
title: ReactNode;
|
||||
label?: string;
|
||||
title: string;
|
||||
renderTitle?: (className: string) => ReactNode;
|
||||
}
|
||||
|
||||
export function SidebarSection({
|
||||
title,
|
||||
label,
|
||||
renderTitle,
|
||||
children,
|
||||
}: PropsWithChildren<Props>) {
|
||||
const labelText = typeof title === 'string' ? title : label;
|
||||
const { isOpen } = useSidebarState();
|
||||
const titleClassName =
|
||||
'ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out';
|
||||
|
||||
return (
|
||||
<>
|
||||
<li className={styles.sidebarTitle}>{title}</li>
|
||||
<div>
|
||||
{renderTitle
|
||||
? renderTitle(titleClassName)
|
||||
: isOpen && <li className={titleClassName}>{title}</li>}
|
||||
|
||||
<nav aria-label={labelText}>
|
||||
<nav aria-label={title} className="mt-4">
|
||||
<ul>{children}</ul>
|
||||
</nav>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
21
app/react/sidebar/items/DashboardLink.tsx
Normal file
21
app/react/sidebar/items/DashboardLink.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Layout } from 'react-feather';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
|
||||
import { SidebarItem } from '../SidebarItem';
|
||||
|
||||
interface Props {
|
||||
environmentId: EnvironmentId;
|
||||
platformPath: string;
|
||||
}
|
||||
|
||||
export function DashboardLink({ environmentId, platformPath }: Props) {
|
||||
return (
|
||||
<SidebarItem
|
||||
to={`${platformPath}.dashboard`}
|
||||
params={{ endpointId: environmentId }}
|
||||
icon={Layout}
|
||||
label="Dashboard"
|
||||
/>
|
||||
);
|
||||
}
|
||||
21
app/react/sidebar/items/VolumesLink.tsx
Normal file
21
app/react/sidebar/items/VolumesLink.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { Database } from 'react-feather';
|
||||
|
||||
import { EnvironmentId } from '@/portainer/environments/types';
|
||||
|
||||
import { SidebarItem } from '../SidebarItem';
|
||||
|
||||
interface Props {
|
||||
environmentId: EnvironmentId;
|
||||
platformPath: string;
|
||||
}
|
||||
|
||||
export function VolumesLink({ environmentId, platformPath }: Props) {
|
||||
return (
|
||||
<SidebarItem
|
||||
to={`${platformPath}.volumes`}
|
||||
params={{ endpointId: environmentId }}
|
||||
icon={Database}
|
||||
label="Volumes"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
import {
|
||||
createContext,
|
||||
PropsWithChildren,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
useReducer,
|
||||
} from 'react';
|
||||
import angular, { IScope } from 'angular';
|
||||
import _ from 'lodash';
|
||||
|
|
@ -21,7 +23,7 @@ interface State {
|
|||
toggle(): void;
|
||||
}
|
||||
|
||||
const Context = createContext<State | null>(null);
|
||||
export const Context = createContext<State | null>(null);
|
||||
|
||||
export function useSidebarState() {
|
||||
const context = useContext(Context);
|
||||
|
|
@ -39,6 +41,17 @@ export function SidebarProvider({ children }: { children: React.ReactNode }) {
|
|||
return <Context.Provider value={state}> {children} </Context.Provider>;
|
||||
}
|
||||
|
||||
export function TestSidebarProvider({ children }: PropsWithChildren<unknown>) {
|
||||
const [isOpen, toggle] = useReducer((state) => !state, true);
|
||||
|
||||
const state = useMemo(
|
||||
() => ({ isOpen, toggle: () => toggle() }),
|
||||
[isOpen, toggle]
|
||||
);
|
||||
|
||||
return <Context.Provider value={state}> {children} </Context.Provider>;
|
||||
}
|
||||
|
||||
/* @ngInject */
|
||||
export function AngularSidebarService($rootScope: IScope) {
|
||||
const state = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue