🔌 Plugin: rebrand

[christophe-f]

🔖 Summary

The rebrand plugin is a front end plugin.

The plugin should display a form and let the user upload a custom logo and primary color to rebrand Backstage. (More UI tweaks could be added later)

🌐 Project website (if applicable)

No response

✌️ Context

The form should contain:

• A file browser/upload to let a user upload a custom logo without text (jpg, png, svg) for the Pin Sidebar turned off
• A file browser/upload to let a user upload a custom logo with text (jpg, png, svg) for the Pin Sidebar turned on
• A color picker to select the primary color.

The plugin will provide a wrapper similar to:

import React, { ReactElement, ReactNode, useEffect, useState } from 'react';
import { BackstageTheme } from '@backstage/theme';
import { lightTheme } from '@backstage/theme';
import { CssBaseline, ThemeProvider } from '@material-ui/core';

type Props = {
  children: ReactElement | ReactNode;
};

export function ThemeWrapper({ children }: Props) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [theme, setTheme] = useState<BackstageTheme>(lightTheme);

  useEffect(() => {
    setIsLoading(true);
    fetch('http://localhost:3000/branding/branding.json', {
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(json => {
        theme.palette.primary.main = json.theme.primary;
        theme.palette.navigation.color = json.theme.primary;
        setTheme(theme);
      })
      .catch(() => {})
      .finally(() => {
        setIsLoading(false);
      });
  }, []);

  return (
    <>
      {!isLoading && (
        <ThemeProvider theme={theme}>
          <CssBaseline>{children}</CssBaseline>
        </ThemeProvider>
      )}
    </>
  );
}

When the Backstage theme is added to App.tsx, the wrapper can be used:

const app = createApp({
  ...
  themes: [
    {
      id: 'janus',
      title: 'Janus Theme',
      icon: <LightIcon />,
      variant: 'light',
      Provider: ({ children }) => <ThemeWrapper>{children}</ThemeWrapper>,
    },
  ],
});

The /image/{name} endpoint from the rebrand-backend plugin will retrieve the logo and can be used in the LogoFull.tsx and LogoIcon.tsx files.

👀 Have you spent some time to check if this plugin request has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Contributing Guidelines

Are you willing to submit PR?

No, but I'm happy to collaborate on a PR with someone else

[RobotSail]

Do we already have a certain mount point where the server can save client-uploaded assets, or a flow for doing this? Or would we instead want to just use something like S3/Minio to upload & retrieve from?