mirror of
https://github.com/portainer/portainer.git
synced 2025-08-04 21:35:23 +02:00
refactor(sidebar): migrate sidebar to react [EE-2907] (#6725)
* refactor(sidebar): migrate sidebar to react [EE-2907] fixes [EE-2907] feat(sidebar): show label for help fix(sidebar): apply changes from ddExtension fix(sidebar): resolve conflicts style(ts): add explanation for ddExtension fix(sidebar): use enum for status refactor(sidebar): rename to EdgeComputeSidebar refactor(sidebar): removed the need of `ident` prop style(sidebar): add ref for mobile breakpoint refactor(app): document testing props refactor(sidebar): use single sidebar item refactor(sidebar): use section for nav refactor(sidebar): rename sidebarlink to link refactor(sidebar): memoize menu paths fix(kubectl-shell): infinite loop on hooks dependencies refactor(sidebar): use authorized element feat(k8s/shell): track open shell refactor(k8s/shell): remove memoization refactor(settings): move settings queries to queries fix(sidebar): close sidebar on mobile refactor(settings): use mutation helpers refactor(sidebar): remove memo refactor(sidebar): rename sidebar item for storybook refactor(sidebar): move to react gprefactor(sidebar): remove dependence on EndProvider feat(environments): rename settings type feat(kube): move kubeconfig button fix(sidebar): open submenus fix(sidebar): open on expand fix(sibebar): show kube shell correctly * fix(sidebar): import from react component * chore(tests): fix missing prop
This commit is contained in:
parent
f78a6568a6
commit
84611a90a1
118 changed files with 2284 additions and 1648 deletions
51
app/react/sidebar/Sidebar.tsx
Normal file
51
app/react/sidebar/Sidebar.tsx
Normal file
|
@ -0,0 +1,51 @@
|
|||
import { useUser } from '@/portainer/hooks/useUser';
|
||||
import { useIsTeamLeader } from '@/portainer/users/queries';
|
||||
import { usePublicSettings } from '@/portainer/settings/queries';
|
||||
|
||||
import styles from './Sidebar.module.css';
|
||||
import { EdgeComputeSidebar } from './EdgeComputeSidebar';
|
||||
import { EnvironmentSidebar } from './EnvironmentSidebar';
|
||||
import { SettingsSidebar } from './SettingsSidebar';
|
||||
import { SidebarItem } from './SidebarItem';
|
||||
import { Footer } from './Footer';
|
||||
import { Header } from './Header';
|
||||
import { SidebarProvider } from './useSidebarState';
|
||||
|
||||
export function Sidebar() {
|
||||
const { isAdmin, user } = useUser();
|
||||
const isTeamLeader = useIsTeamLeader(user);
|
||||
|
||||
const settingsQuery = usePublicSettings();
|
||||
|
||||
if (!settingsQuery.data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { EnableEdgeComputeFeatures, LogoURL } = settingsQuery.data;
|
||||
|
||||
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">
|
||||
<Header logo={LogoURL} />
|
||||
<div className={styles.sidebarContent}>
|
||||
<ul className={styles.sidebar}>
|
||||
<SidebarItem
|
||||
to="portainer.home"
|
||||
iconClass="fa-home fa-fw"
|
||||
label="Home"
|
||||
/>
|
||||
|
||||
<EnvironmentSidebar />
|
||||
|
||||
{isAdmin && EnableEdgeComputeFeatures && <EdgeComputeSidebar />}
|
||||
|
||||
{(isAdmin || isTeamLeader) && <SettingsSidebar isAdmin={isAdmin} />}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</nav>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue