feat(rbac): display administration to authorized users

[debsmita1]

Resolves:
#842

Test setup:
app-config.yaml

auth:
  providers:
    github:
      development:
        clientId: $GITHUB_CLIENT_ID
        clientSecret: $GITHUB_CLIENT_SECRET
        
permission:
  enabled: true
  rbac:
    admin:
      users:
        - name: user:default/<your-github-id>
        - name: group:default/admins

DynamicRoot.tsx

Add SignInPage component 

    if (!app.current) {
      app.current = createApp({
        apis,
        components: {
          SignInPage: props => (
            <SignInPage
              {...props}
              auto
              provider={{
                id: 'github-auth-provider',
                title: 'GitHub',
                message: 'Sign in using GitHub',
                apiRef: githubAuthApiRef,
              }}
            />
          ),
        },

auth.ts

      github: providers.github.create({
        signIn: {
          resolver({ result }, ctx) {
            const userRef = `user:default/${result.fullProfile.username}`;
            return ctx.issueToken({
              claims: {
                sub: userRef, // The user's own identity
                ent: [userRef], // A list of identities that the user claims ownership through
              },
            });
          },
          // resolver: providers.github.resolvers.usernameMatchingUserEntityName(),
        },
      }),

To load the Administration sidebar item dynamically

Test Setup

Add the @janus-idp/backstage-plugin-rbac package in the packages/app/package.json
Keep the app-config changes from the above set-up

app-config.yaml

dynamicPlugins:
  frontend:
    janus.dynamic-frontend-plugin:
      dynamicRoutes:
        …
        - path: '/rbac'
          importName: 'RbacPage'
          module: 'Administration'

Root.tsx

	export const Root = ({ children }: PropsWithChildren<{}>) => (
	…
        <ScalprumComponent
        scope="janus.dynamic-frontend-plugin"
        module="Administration"
        importName="Administration"
      />
	…

dynamic-modules-registry.json

      {
   	"module": "Administration",
   	 "scope": "janus.dynamic-frontend-plugin",
    	"manifestLocation": "http://localhost:8004/plugin-manifest.json"
  	}

dynamic-frontend-plugin/package.json

"scalprum": {
    …
    "exposedModules": {
       …
      "Administration": "./src/remotes/Administration"
    }
  }

Create Administration/index.ts under dynamic-frontend-plugin/src/remotes

export * from '@janus-idp/backstage-plugin-rbac';

GIF:

Screen.Recording.2023-10-27.at.9.14.14.PM.mov

Updated the Administration Nav icon

[invincibleJai]

@debsmita1 and frontend dynamic plugin support is there now so pls ensure we test that flow as well and capture it as part of the PR description

[ShiranHi]

@debsmita1 looks good to me, thank you!

[debsmita1]

@divyanshiGupta @invincibleJai I have removed the changes from the app folder. Added ReadMe. And documented the steps to load the Administration sidebar item dynamically in the PR description. PTAL