Remove unnecessary code, Rename ItemWithSubmenu, Make style properties optional in pallette

Signed-off-by: hiba-aldalaty <hibaaldalaty@gmail.com>

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -43,7 +43,7 @@ import {
 import {
   sidebarConfig,
   SidebarContext,
-  ItemWithSubmenuContext,
+  SidebarItemWithSubmenuContext,
 } from './config';
 import { SidebarSubmenu } from './SidebarSubmenu';
 
@@ -96,11 +96,13 @@ const useStyles = makeStyles<BackstageTheme>(
       },
       highlightable: {
         '&:hover': {
-          background: theme.palette.navigation.navItem.hoverBackground,
+          background:
+            theme.palette.navigation.navItem?.hoverBackground ?? '#404040',
         },
       },
       highlighted: {
-        background: theme.palette.navigation.navItem.hoverBackground,
+        background:
+          theme.palette.navigation.navItem?.hoverBackground ?? '#404040',
       },
       label: {
         // XXX (@koroeskohr): I can't seem to achieve the desired font-weight from the designs
@@ -168,7 +170,10 @@ const useStyles = makeStyles<BackstageTheme>(
   { name: 'BackstageSidebarItem' },
 );
 
-function isItemWithSubmenuActive(submenu: ReactNode, locationPathname: string) {
+function isSidebarItemWithSubmenuActive(
+  submenu: ReactNode,
+  locationPathname: string,
+) {
   // Item is active if any of submenu items have active paths
   const toPathnames: string[] = [];
   let isActive = false;
@@ -194,16 +199,16 @@ function isItemWithSubmenuActive(submenu: ReactNode, locationPathname: string) {
   return isActive;
 }
 
-const ItemWithSubmenu = ({
+const SidebarItemWithSubmenu = ({
   text,
   hasNotifications = false,
   icon: Icon,
   children,
-}: PropsWithChildren<ItemWithSubmenuProps>) => {
+}: PropsWithChildren<SidebarItemWithSubmenuProps>) => {
   const classes = useStyles();
   const [isHoveredOn, setIsHoveredOn] = useState(false);
   const { pathname: locationPathname } = useLocation();
-  const isActive = isItemWithSubmenuActive(children, locationPathname);
+  const isActive = isSidebarItemWithSubmenuActive(children, locationPathname);
 
   const handleMouseEnter = () => {
     setIsHoveredOn(true);
@@ -240,7 +245,7 @@ const ItemWithSubmenu = ({
   const closedContent = itemIcon;
 
   return (
-    <ItemWithSubmenuContext.Provider
+    <SidebarItemWithSubmenuContext.Provider
       value={{
         isHoveredOn,
         setIsHoveredOn,
@@ -268,7 +273,7 @@ const ItemWithSubmenu = ({
         </div>
         {isHoveredOn && children}
       </div>
-    </ItemWithSubmenuContext.Provider>
+    </SidebarItemWithSubmenuContext.Provider>
   );
 };
 
@@ -290,7 +295,7 @@ type SidebarItemLinkProps = SidebarItemBaseProps & {
   onClick?: (ev: React.MouseEvent) => void;
 } & NavLinkProps;
 
-type ItemWithSubmenuProps = SidebarItemBaseProps & {
+type SidebarItemWithSubmenuProps = SidebarItemBaseProps & {
   to?: string;
   onClick?: (ev: React.MouseEvent) => void;
   children: ReactNode;
@@ -304,7 +309,7 @@ type ItemWithSubmenuProps = SidebarItemBaseProps & {
 type SidebarItemProps =
   | SidebarItemLinkProps
   | SidebarItemButtonProps
-  | ItemWithSubmenuProps;
+  | SidebarItemWithSubmenuProps;
 
 function isButtonItem(
   props: SidebarItemProps,
@@ -427,11 +432,7 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
   ).type;
   // Filter children for SidebarSubmenu components
   const submenus = useElementFilter(children, elements =>
-    elements
-      .getElements()
-      .filter(
-        child => React.isValidElement(child) && child.type === componentType,
-      ),
+    elements.getElements().filter(child => child.type === componentType),
   );
   // Error thrown if more than one SidebarSubmenu in a SidebarItem
   if (submenus.length > 1) {
@@ -445,13 +446,13 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
 
   if (hasSubmenu) {
     return (
-      <ItemWithSubmenu
+      <SidebarItemWithSubmenu
         text={text}
         icon={Icon}
         hasNotifications={hasNotifications}
       >
         {submenu}
-      </ItemWithSubmenu>
+      </SidebarItemWithSubmenu>
     );
   }
 

packages/core-components/src/layout/Sidebar/Sidebar.stories.tsx

@@ -72,7 +72,7 @@ export const SampleScalableSidebar = () => (
     <Sidebar disableExpandOnHover>
       <SidebarSearchField onSearch={handleSearch} to="/search" />
       <SidebarDivider />
-      <SidebarItem icon={CatalogSidebarLogo} onClick={() => {}} text="Catalog">
+      <SidebarItem icon={CatalogSidebarLogo} text="Catalog">
         <SidebarSubmenu title="Catalog">
           <SidebarSubmenuItem title="Tools" to="/1" icon={BuildRoundedIcon} />
           <SidebarSubmenuItem title="APIs" to="/2" icon={APIsIcon} />

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -18,7 +18,7 @@ import Typography from '@material-ui/core/Typography';
 import clsx from 'clsx';
 import React, { PropsWithChildren, ReactNode, useContext } from 'react';
 import {
-  ItemWithSubmenuContext,
+  SidebarItemWithSubmenuContext,
   sidebarConfig,
   SidebarContext,
   submenuConfig,
@@ -42,7 +42,7 @@ const useStyles = (props: { left: number }) =>
       top: 0,
       bottom: 0,
       padding: 0,
-      background: theme.palette.navigation.submenu.background,
+      background: theme.palette.navigation.submenu?.background ?? '#404040',
       overflowX: 'hidden',
       msOverflowStyle: 'none',
       scrollbarWidth: 'none',
@@ -94,7 +94,7 @@ export const SidebarSubmenu = ({
   const props = { left: left };
   const classes = useStyles(props)();
 
-  const { isHoveredOn } = useContext(ItemWithSubmenuContext);
+  const { isHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   return (
     <div
       className={clsx(classes.drawer, {

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -28,7 +28,7 @@ import clsx from 'clsx';
 import { BackstageTheme } from '@backstage/theme';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
-import { ItemWithSubmenuContext } from './config';
+import { SidebarItemWithSubmenuContext } from './config';
 
 const useStyles = makeStyles<BackstageTheme>(theme => ({
   item: {
@@ -118,7 +118,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => {
   const classes = useStyles();
   const { pathname: locationPathname } = useLocation();
   const { pathname: toPathname } = useResolvedPath(to);
-  const { setIsHoveredOn } = useContext(ItemWithSubmenuContext);
+  const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext);
   const closeSubmenu = () => {
     setIsHoveredOn(false);
   };

packages/core-components/src/layout/Sidebar/config.ts

@@ -67,14 +67,13 @@ export const SidebarContext = createContext<SidebarContextType>({
   setOpen: _open => {},
 });
 
-export type ItemWithSubmenuContextType = {
+export type SidebarItemWithSubmenuContextType = {
   isHoveredOn: boolean;
   setIsHoveredOn: Dispatch<SetStateAction<boolean>>;
 };
 
-export const ItemWithSubmenuContext = createContext<ItemWithSubmenuContextType>(
-  {
+export const SidebarItemWithSubmenuContext =
+  createContext<SidebarItemWithSubmenuContextType>({
     isHoveredOn: false,
     setIsHoveredOn: () => {},
-  },
-);
+  });

packages/theme/src/types.ts

@@ -53,10 +53,10 @@ export type BackstagePaletteAdditions = {
     indicator: string;
     color: string;
     selectedColor: string;
-    navItem: {
+    navItem?: {
       hoverBackground: string;
     };
-    submenu: {
+    submenu?: {
       background: string;
     };
   };