Updates useRhdhTheme.ts (#16)

Changelog:
- Removes the logic involved in enabling the RHDH theme based on an environment variable

Signed-off-by: Jonathan Kilzi <jkilzi@redhat.com>

workspaces/resource-optimization/packages/app/src/App.tsx

@@ -37,7 +37,7 @@ import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
 import { ResourceOptimizationPage } from '@backstage-community/plugin-resource-optimization';
-import { useRhdhTheme } from './hooks/rhdh-theme';
+import { useRhdhTheme } from './hooks/useRhdhTheme';
 
 const options: Parameters<typeof createApp>[0] = {
   apis,
@@ -64,9 +64,9 @@ const options: Parameters<typeof createApp>[0] = {
 };
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
-const { isRhdhThemeEnabled, theme } = useRhdhTheme();
-if (isRhdhThemeEnabled) {
-  options.themes = theme;
+const rhdhTheme = useRhdhTheme();
+if (rhdhTheme !== null) {
+  options.themes = rhdhTheme.themes;
 }
 
 const app = createApp(options);

workspaces/resource-optimization/packages/app/src/components/Root/Root.tsx

@@ -27,7 +27,7 @@ import {
 import MenuIcon from '@material-ui/icons/Menu';
 import SearchIcon from '@material-ui/icons/Search';
 import { ResourceOptimizationIconOutlined } from '@backstage-community/plugin-resource-optimization';
-import { useRhdhTheme } from '../../hooks/rhdh-theme';
+import { useRhdhTheme } from '../../hooks/useRhdhTheme';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -46,13 +46,15 @@ const useSidebarLogoStyles = makeStyles({
 
 const Logo = (props: { isOpen?: boolean }) => {
   const { isOpen = false } = props;
-  const { isRhdhThemeEnabled, RhdhLogoFull, RhdhLogoIcon } = useRhdhTheme();
+  const rhdhTheme = useRhdhTheme();
+  const isRhdhThemeEnabled = rhdhTheme !== null;
 
   let logo: React.ReactElement | null = null;
-  if (isOpen) {
-    logo = isRhdhThemeEnabled ? <RhdhLogoFull /> : <LogoFull />;
+  if (isRhdhThemeEnabled) {
+    const { RhdhLogoFull, RhdhLogoIcon } = rhdhTheme;
+    logo = isOpen ? <RhdhLogoFull /> : <RhdhLogoIcon />;
   } else {
-    logo = isRhdhThemeEnabled ? <RhdhLogoIcon /> : <LogoIcon />;
+    logo = isOpen ? <LogoFull /> : <LogoIcon />;
   }
 
   return logo;

workspaces/resource-optimization/packages/app/src/components/Root/RhdhLogoFull.tsx → workspaces/resource-optimization/packages/app/src/components/rhdh-logo/RhdhLogoFull.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles({
     fill: '#7df3e1',
   },
 });
-const LogoFull = () => {
+const RhdhLogoFull = () => {
   const classes = useStyles();
 
   return (
@@ -38,4 +38,4 @@ const LogoFull = () => {
   );
 };
 
-export default LogoFull;
+export default RhdhLogoFull;

workspaces/resource-optimization/packages/app/src/components/Root/RhdhLogoIcon.tsx → workspaces/resource-optimization/packages/app/src/components/rhdh-logo/RhdhLogoIcon.tsx

@@ -11,7 +11,7 @@ const useStyles = makeStyles({
   },
 });
 
-const LogoIcon = () => {
+const RhdhLogoIcon = () => {
   const classes = useStyles();
 
   return (
@@ -29,4 +29,4 @@ const LogoIcon = () => {
   );
 };
 
-export default LogoIcon;
+export default RhdhLogoIcon;

workspaces/resource-optimization/packages/app/src/hooks/useRhdhTheme.ts

@@ -0,0 +1,20 @@
+import { getThemes } from '@redhat-developer/red-hat-developer-hub-theme';
+import LogoFull from '../components/rhdh-logo/RhdhLogoFull';
+import RhdhLogoIcon from '../components/rhdh-logo/RhdhLogoIcon';
+
+/**
+ * Change this value to `true` if you want to use the RHDH theme.
+ */
+const ENABLE_RHDH_THEME = false;
+
+export function useRhdhTheme() {
+  return ENABLE_RHDH_THEME
+    ? ({
+        RhdhLogoFull: LogoFull,
+        RhdhLogoIcon: RhdhLogoIcon,
+        get themes() {
+          return getThemes();
+        },
+      } as const)
+    : null;
+}