Skip to main content
Version: Early Access

Adding the Release Plugin to Backstage Frontend

Before You Begin​

Ensure that you have installed the Backstage application. If not, you can follow the Getting Started guide on Backstage to create one. Once you have the Backstage application installed, you can proceed with installing the plugins.

Installing and Configuring the Frontend Plugin​

The frontend plugin needs to be added to your application. To do so:

  1. Run the following command from the Backstage root directory:

    yarn --cwd packages/app add @digital-ai/plugin-dai-release

  2. Add Active Releases to your Backstage.

    a. Add the DaiReleasePage extension to your App.tsx to include the ReleaseHomePage component exported from the plugin. For example,

    // In packages/app/src/App.tsx
    import {DaiReleasePage} from '@digital-ai/plugin-dai-release';
    const routes = (
        <FlatRoutes>
            {/* ...other routes */}
            <Route path="/dai-release" element={<DaiReleasePage/>}/>

    b. Add Digital.ai Release to your app sidebar.

    i) In packages/app/src/components/Root/Root.tsx

    import '@digital-ai/dot-icons/index.css';

    export const activeReleaseIcon = () => {
    return <span className="dot-icon">
    <i className="icon-release"/>
    </span>
    }

    ii) Add the following to display in the dropdown menu.

    In packages/app/src/components/Root/Root.tsx

    <SidebarItem icon={ReleaseSvgIcon} onClick={() => {}} text="digital.ai Release">
    <SidebarSubmenu title="Release">
    <SidebarSubmenuItem
    title="Active releases"
    to="dai-release"
    icon={activeReleaseIcon}
    />
    </SidebarSubmenu>
    </SidebarItem>

  3. Add Release template to your Backstage.

    a. Add the DaiTemplatePage extension to your App.tsx to include the ReleaseHomePage component exported from the plugin. For example,

      // In packages/app/src/App.tsx
    import {DaiTemplatePage} from '@digital-ai/plugin-dai-release';

    const routes = (
        <FlatRoutes>
            {/* ...other routes */}
            <Route path="/dai-template" element={<DaiTemplatePage/>}/>

    b. Add Digital.ai Template to your app sidebar.

    / In packages/app/src/components/Root/Root.tsx
    import '@digital-ai/dot-icons/index.css';

    export const activeReleaseIcon = () => {
    return <span className="dot-icon">
    <i className="icon-release"/>
    </span>
    }

    c. Add the following to display in the dropdown menu.


    <SidebarItem icon={ReleaseSvgIcon} onClick={() => {}} text="digital.ai Release">
    <SidebarSubmenu title="Templates">
    <SidebarSubmenuItem
    title="Templates"
    to="dai-release"
    icon={templateIcon}
    />
    </SidebarSubmenu>
    </SidebarItem>

  4. Add Release Workflow catalog to your Backstage.

    a. Add the DaiWorkflowCatalog Page extension to your App.tsx to include the ReleaseHomePage component exported from the plugin. For example,

      // In packages/app/src/App.tsx
    import {DaiWorkflowCatalogPage} from '@digital-ai/plugin-dai-release';

    const routes = (
        <FlatRoutes>
            {/* ...other routes */}
            <Route path="/dai-workflowcatalog" element={<DaiWorkflowCatalogPage/>}/>

    b. Add Digital.ai Template to your app sidebar.

    / In packages/app/src/components/Root/Root.tsx
    import '@digital-ai/dot-icons/index.css';

    export const workFlowIcon = () => {
    return <span className="dot-icon">
    <i className="icon-workflow"/>
    </span>
    }

    c. Add the following to display in the dropdown menu.

    <SidebarItem icon={ReleaseSvgIcon} onClick={() => {}} text="digital.ai Release">
    ...
    <SidebarSubmenu title="Workflow catalog">
    <SidebarSubmenuItem
    title="Workflow"
    to="dai-workflowcatalog"
    icon={WorkflowIcon}
    />
    </SidebarSubmenu>
    </SidebarItem>

Permissions​

The DAI Release plugin is compatible with the permissions framework. The following sections provide guidance on how to use it, assuming the permissions framework is already configured and operational.

Note: These sections are intended as guidance and are completely optional. The dai-release plugin works with the permission framework enabled and does not does not require any specific policy setup.

Secure Sidebar Option​

To use the permission framework to secure the Digital.ai Release sidebar option do the following:

  1. Add the @backstage/plugin-dai-release-common package to your frontend app:

    # From your Backstage root directory
    yarn --cwd packages/app add @backstage/plugin-dai-release-common

  2. Open the packages/app/src/components/Root/Root.tsx file, and add imports after all the existing import statements:

    import { daiReleaseViewPermission } from '@digital-ai/plugin-dai-release-common';
    import { RequirePermission } from '@backstage/plugin-permission-react';

    Then make the following changes:

    +   <RequirePermission
    +     permission={daiReleaseViewPermission}
    +     errorPage={<></>}>
    +     <SidebarItem icon={ReleaseSvgIcon} to="dai-release" text="Digital.ai Release" />
    +   </RequirePermission>

Secure the dai-release Route​

To use the permission framework to secure the dai-release route do the following:

  1. Add the @backstage/plugin-dai-release-common package to your frontend app (skip this step if you've done already):

    # From your Backstage root directory
    yarn --cwd packages/app add @backstage/plugin-dai-release-common

  2. Open the packages/app/src/App.tsx file, and add import after all the existing import statements:

    import { daiReleaseViewPermission } from '@digital-ai/plugin-dai-release-common';

    Then make the following change:

    +   <Route path="/dai-release"
    +     element={
    +     <RequirePermission permission={daiReleaseViewPermission}>
    +       <DaiReleasePage/>
    +     </RequirePermission>
    +     }
    +   />