ggd-help-panel

Library that provides all global help components

Install

Make sure you have installed nodejs 16. The libraries are hosted in private npm repo, to tell npm to use the repo, run the command once:

npm config set registry https://svl-artifactory.juniper.net/artifactory/api/npm/SLIPSTREAM_NPM_VIRTUAL

To install our ggd-help-panel library, run the below command:

npm install --save ggd-help-panel

Usage

Components can be used as shown in the below chunk of code.

import React, { useState } from "react";
import { SButton, SAlert } from "ggd-help-panel";
import "./App.css";

function App() {
  const [showAlert, setShowAlert] = useState(false);

  const handleSbuttonClick = () => {
    setShowAlert(!showAlert);
  };

  return (
    <div className="App">
      <header className="App-header">
        <SButton
          text={global_config.globalHelp.actions[0].urlType}
          type="primary"
          onClick={handleSbuttonClick}
        />
        {showAlert && (
          <SAlert
            type="success"
            closable={true}
            message="Successfully clicked"
          />
        )}
      </header>
    </div>
  );
}

export default App;

To use GlobalHelp widgets and functionalities, need to implement DefaultProviderFactory, DefaultAuthProvider and DefaultRbacProvider for the application. Sample implementation looks like below:

// DefaultProviderFactory

import { ensureJson, IGlobalConfig, IProviderFactory } from "ggd-help-panel";
import globalConfig from "../global_config.json";
import DefaultAuthProvider from "./DefaultAuthProvider";
import DefaultRbacProvider from "./DefaultRbacProvider";

export default class DefaultProviderFactory implements IProviderFactory {
  private authProvider = new DefaultAuthProvider();
  private rbacProvider = new DefaultRbacProvider(this.authProvider);
  private aliasMapping: any = null;
  public getAuthProvider() {
    return this.authProvider;
  }
  public getRbacProvider() {
    return this.rbacProvider;
  }

  public getGlobalConfig<T extends IGlobalConfig>(): any {
    const appInfo: any = sessionStorage.getItem("appInfo");
    if (appInfo) {
      const appInfoObj = ensureJson(appInfo);
      if (appInfoObj && appInfoObj.version) {
        globalConfig.version = appInfoObj.version;
      }
    }
    return globalConfig;
  }
  public getHelpMapping(linkId: string) {
    return "HelpMapping Logic";
  }
}

// DefaultAuthProvider

import { IAuthProvider, IAuthenticationInfo } from "ggd-help-panel";

export default class DefaultAuthProvider
  implements IAuthProvider<DefaultAuthenticationInfo>
{
  public getTokenIssueAt() {
    return "TokenIssuedAt";
  }
  public getTokenExpireAt() {
    return "TokenExpireAt";
  }

  public getToken() {
    return "Token";
  }
  public getIdentifier() {
    return "TenantId";
  }

  public async unauthenticate() {
    return true;
  }

  public async authenticate({}) {
    const userName = "Bhargava Narayan K P";
    const userId = "bnarayankp";
    const project = "testnpmpackage";
    const projectId = "tenantId";
    return new DefaultAuthenticationInfo(userName, userId, project, projectId);
  }

  public isAuthenticated() {
    return true;
  }
  public recoverFromContext() {
    console.log("Recover from context");
  }

  public getAuthenticationInfo(): DefaultAuthenticationInfo {
    const userName = "Bhargava Narayan K P";
    const userId = "bnarayankp";
    const project = "testnpmpackage";
    const projectId = "tenantId";
    return new DefaultAuthenticationInfo(userName, userId, project, projectId);
  }
}

export class DefaultAuthenticationInfo implements IAuthenticationInfo {
  public userName: string;
  public userId: string;
  public project: string;
  public projectId: string;
  constructor(
    userName: string,
    userId: string,
    project: string,
    projectId: string
  ) {
    this.userName = userName;
    this.userId = userId;
    this.project = project;
    this.projectId = projectId;
  }
}

// DefaultRbacProvider

import { IRbacProvider } from "ggd-help-panel";
import DefaultAuthProvider from "./DefaultAuthProvider";

export default class DefaultRbacProvider implements IRbacProvider {
  private authProvider: DefaultAuthProvider;

  constructor(auth: DefaultAuthProvider) {
    this.authProvider = auth;
  }

  public verifyAccess(requiredCaps: string[]) {
    if (requiredCaps == null || requiredCaps.length === 0) {
      return true;
    }
    return false;
  }
}

The DefaultProviderFactory constructor should be passed as an argument to the bootstrap function like below:

// src/index.ts

import React from "react";
import ReactDOM from "react-dom/client";
import { bootstrap } from "ggd-help-panel";
import "./index.css";
import SomeApp from "./App";
import reportWebVitals from "./reportWebVitals";
import DefaultProviderFactory from "./adapter/DefaultProviderFactory";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <SomeApp />
  </React.StrictMode>
);

reportWebVitals();

// Way to pass DefaultProviderFactory to bootstrap() function
bootstrap(new DefaultProviderFactory());

To use GlobalHelp component, try adding below code:

import React from "react";
import {
  SButton,
  SAlert,
  getProviderFactory,
  GlobalHelp,
} from "ggd-help-panel";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <GlobalHelp
          showWhatsNewVersion={true}
          useSDropDown={true}
          helpLink={"helpLink"}
          getProviderFactory={getProviderFactory}
        />
      </header>
    </div>
  );
}

export default App;

License

MIT © [Bhargava Narayan K P](https://github.com/Bhargava Narayan K P)