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

app/react/sidebar/SidebarItem/Icon.module.css

@@ -0,0 +1,17 @@
+.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;
+  }
+}

app/react/sidebar/SidebarItem/Icon.tsx

@@ -0,0 +1,18 @@
+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"
+    />
+  );
+}

app/react/sidebar/SidebarItem/Link.module.css

@@ -0,0 +1,28 @@
+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);
+}

app/react/sidebar/SidebarItem/Link.tsx

@@ -0,0 +1,43 @@
+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 '';
+      })
+    )
+  );
+}

app/react/sidebar/SidebarItem/Menu.module.css

@@ -0,0 +1,24 @@
+.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;
+}

app/react/sidebar/SidebarItem/Menu.tsx

@@ -0,0 +1,129 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import clsx from 'clsx';
+import {
+  Children,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useMemo,
+  useReducer,
+} from 'react';
+
+import { useSidebarState } from '../useSidebarState';
+
+import styles from './Menu.module.css';
+
+interface Props {
+  head: ReactNode;
+  openOnPaths?: string[];
+}
+
+export function Menu({
+  children,
+  head,
+  openOnPaths = [],
+}: PropsWithChildren<Props>) {
+  const { isOpen: isSidebarOpen } = useSidebarState();
+
+  const paths = useMemo(
+    () => [
+      ...getPaths(head, []),
+      ...getPathsForChildren(children),
+      ...openOnPaths,
+    ],
+    [children, openOnPaths, head]
+  );
+
+  const { isOpen, toggleOpen } = useIsOpen(isSidebarOpen, paths);
+
+  return (
+    <>
+      <div className={styles.sidebarMenuHead}>
+        {Children.count(children) > 0 && (
+          <button
+            className={clsx('small', styles.sidebarMenuIndicator)}
+            onClick={handleClickArrow}
+            type="button"
+          >
+            <i
+              className={clsx(
+                'fas',
+                isOpen ? 'fa-chevron-down' : 'fa-chevron-right'
+              )}
+            />
+          </button>
+        )}
+        {head}
+      </div>
+
+      {isOpen && <ul className={styles.items}>{children}</ul>}
+    </>
+  );
+
+  function handleClickArrow(e: React.MouseEvent<HTMLButtonElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+    toggleOpen();
+  }
+}
+
+function useIsOpen(
+  isSidebarOpen: boolean,
+
+  paths: string[] = []
+) {
+  const { state } = useCurrentStateAndParams();
+  const currentStateName = state.name || '';
+  const isOpenByState = paths.some((path) => currentStateName.startsWith(path));
+
+  const [forceOpen, toggleForceOpen] = useReducer((state) => !state, false);
+
+  const isOpen = checkIfOpen();
+
+  return { isOpen, toggleOpen };
+
+  function toggleOpen() {
+    if (!isOpenByState) {
+      toggleForceOpen();
+    }
+  }
+
+  function checkIfOpen() {
+    if (!isSidebarOpen) {
+      return false;
+    }
+
+    if (forceOpen) {
+      return true;
+    }
+
+    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];
+}

app/react/sidebar/SidebarItem/SidebarItem.module.css

@@ -0,0 +1,75 @@
+.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);
+}

app/react/sidebar/SidebarItem/SidebarItem.stories.tsx

@@ -0,0 +1,41 @@
+import { Meta, Story } from '@storybook/react';
+
+import { SidebarItem } from '.';
+
+const meta: Meta = {
+  title: 'Sidebar/SidebarItem',
+  component: SidebarItem,
+};
+export default meta;
+
+interface StoryProps {
+  iconClass?: string;
+  className: string;
+  label: string;
+}
+
+function Template({ iconClass, className, label: linkName }: 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>
+    </ul>
+  );
+}
+
+export const Primary: Story<StoryProps> = Template.bind({});
+Primary.args = {
+  iconClass: 'fa-tachometer-alt fa-fw',
+  className: 'exampleItemClass',
+  label: 'Item with icon',
+};
+
+export const WithoutIcon: Story<StoryProps> = Template.bind({});
+WithoutIcon.args = {
+  className: 'exampleItemClass',
+  label: 'Item without icon',
+};

app/react/sidebar/SidebarItem/SidebarItem.test.tsx

@@ -0,0 +1,34 @@
+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>
+  );
+}

app/react/sidebar/SidebarItem/SidebarItem.tsx

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+
+import { Wrapper } from './Wrapper';
+import { Link } from './Link';
+import { Menu } from './Menu';
+import { Icon } from './Icon';
+
+type Props = {
+  iconClass?: string;
+  to: string;
+  params?: object;
+  label: string;
+  children?: ReactNode;
+  openOnPaths?: string[];
+};
+
+export function SidebarItem({
+  children,
+  iconClass,
+  to,
+  params,
+  label,
+  openOnPaths,
+}: Props) {
+  const head = (
+    <Link to={to} params={params}>
+      {label}
+      {iconClass && <Icon iconClass={iconClass} />}
+    </Link>
+  );
+
+  return (
+    <Wrapper label={label}>
+      {children ? (
+        <Menu head={head} openOnPaths={openOnPaths}>
+          {children}
+        </Menu>
+      ) : (
+        head
+      )}
+    </Wrapper>
+  );
+}

app/react/sidebar/SidebarItem/Wrapper.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren, AriaAttributes } from 'react';
+import clsx from 'clsx';
+
+import styles from './SidebarItem.module.css';
+
+interface Props {
+  className?: string;
+  label?: string;
+}
+
+export function Wrapper({
+  className,
+  children,
+  label,
+  ...ariaProps
+}: PropsWithChildren<Props> & AriaAttributes) {
+  return (
+    <li
+      className={clsx(styles.sidebarMenuItem, className)}
+      title={label}
+      aria-label={label}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...ariaProps}
+    >
+      {children}
+    </li>
+  );
+}

app/react/sidebar/SidebarItem/index.ts

@@ -0,0 +1,20 @@
+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;
+}
+
+export const SidebarItem: typeof MainComponent & SubComponents =
+  MainComponent as typeof MainComponent & SubComponents;
+
+SidebarItem.Link = Link;
+SidebarItem.Icon = Icon;
+SidebarItem.Menu = Menu;
+SidebarItem.Wrapper = Wrapper;