@veecode-platform/backstage-plugin-tenant-explorer

Tenant Explorer Plugin

The Tenant plugin has two approaches:

⚠️ It is important to note that the Tenant is a Kind customized by the VeeCode Platform and therefore it requires the installation of the veecode-platform-common plugin in order to work.

To install the veecode-platform-common plugin click here.

Okay, given that you already have a properly configured environment, let's start our installation.

Get Started

cd packages/app
yarn add @veecode-platform/plugin-tenant-explorer

Now, in the file packages > app > src > App.tsx:

...
+ import { TenantExplorerPage } from '@veecode-platform/plugin-tenant-explorer';

...

const routes = (
<FlatRoutes>
+ <Route path="/tenant-explorer" element={<tenantExplorerPage/>}/>
</FlatRoutes>
)
...

To add a menu to your sidebar, just follow these steps: packages > app > src > components > Root > Root.tsx

In the example, we've added an external icon, using the lib react-icons.

cd packages/app
yarn add react-icons

...
+ import { Imcluster } from "react-icons/im";

...

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
        <SidebarSearchModal />
      </SidebarGroup>
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
+        <SidebarItem icon={Imcluster} to="tenant-explorer" text="Tenants" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
        <SidebarDivider />
        <SidebarScrollWrapper>
          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
        </SidebarScrollWrapper>
      </SidebarGroup>
      <SidebarSpace />
      <SidebarDivider />
      <SidebarGroup
        label="Settings"
        icon={<UserSettingsSignInAvatar />}
        to="/settings"
      >
        <SidebarSettings />
      </SidebarGroup>
    </Sidebar>
    {children}
  </SidebarPage>
);

Or you can create a "Instances" menu and add "Tenants" as a submenu:

...

+ import BusinessIcon from '@material-ui/icons/Business';
+ import { Imcluster } from "react-icons/im";

...

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
        <SidebarSearchModal />
      </SidebarGroup>
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
+          <SidebarItem icon={BusinessIcon} text="Instances">
+            <SidebarSubmenu title="">
+              <SidebarDivider />
+              <SidebarSubmenuItem
+                title="Tenants"
+                to="tenant-explorer"
+                icon={Imcluster}
+              />
+
+            </SidebarSubmenu>
+          </SidebarItem>
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
        <SidebarDivider />
        <SidebarScrollWrapper>
          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
        </SidebarScrollWrapper>
      </SidebarGroup>
      <SidebarSpace />
      <SidebarDivider />
      <SidebarGroup
        label="Settings"
        icon={<UserSettingsSignInAvatar />}
        to="/settings"
      >
        <SidebarSettings />
      </SidebarGroup>
    </Sidebar>
    {children}
  </SidebarPage>
);