How to use @kyma-project/luigi-client - 10 common examples

reloadLambdaSpec() {
    luigiClient.uxManager().showLoadingIndicator();
    this.eventTriggerChooserModal.initializeView();

    // temporary workaround for 'reappearing' triggers
    setTimeout(() => {
      if (this.mode === 'create') {
        sessionStorage.displayLambdaSavedNotification = true;
        luigiClient
          .linkManager()
          .fromClosestContext()
          .navigate(`/details/${this.lambda.metadata.name}`);
      } else {
        this.showSuccessNotification();
        this.ngOnInit();
        luigiClient.uxManager().hideLoadingIndicator();
      }
    }, 3000);

constructor(private apollo: Apollo, private httpLink: HttpLink) {

    let apolloClientInitialized = false;

    LuigiClient.addContextUpdateListener(e => {
      if(e.idToken && !apolloClientInitialized){
        // Create an http link:
        const http = httpLink.create({
          uri: AppConfig.graphqlApiUrl
        });

        // Create a WebSocket link:
        const ws = new WebSocketLink({
          uri: AppConfig.subscriptionsApiUrl,
          options: {
            reconnect: true
          }
        });

        const link = split(
          // split based on operation type

.subscribe((ctx: IContextMessage) => {
        if (!ctx.context) {
          console.warn(
            `To use this component properly, node configuration requires context.label to be defined.
            context.links can be defined as array of strings to generate links to children`
          );
          return;
        }

        const lastPathParam = Object.values(getPathParams() || {}).pop();

        // We can directly access our specified context values here
        this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);
        this.links = ctx.context.links;

        // preserveView and node params
        this.hasBack = linkManager().hasBack();
        this.nodeParams =
          Object.keys(getNodeParams()).length > 0 ? getNodeParams() : null;

        if (!this.cdr['destroyed']) {
          this.cdr.detectChanges();
        }
      });
  }

.subscribe((ctx: IContextMessage) => {
        if (ctx.contextType === 'init' || ctx.contextType === 'update') {
          this.projectId = ctx.context.currentProject;
          this.preservedViewCallbackContext = ctx.context.goBackContext;
          this.currentLocale = uxManager().getCurrentLocale();
          this.canChangeLocale = getClientPermissions().changeCurrentLocale;
          // Since Luigi runs outside of Zone.js, changes need
          // to be updated manually
          // Be sure to check for destroyed ChangeDetectorRef,
          // else you get runtime Errors
          if (!this.cdr['destroyed']) {
            this.cdr.detectChanges();
          }
        }
      });

`To use this component properly, node configuration requires context.label to be defined.
            context.links can be defined as array of strings to generate links to children`
          );
          return;
        }

        const lastPathParam = Object.values(getPathParams() || {}).pop();

        // We can directly access our specified context values here
        this.nodeLabel = toTitleCase(ctx.context.label || lastPathParam);
        this.links = ctx.context.links;

        // preserveView and node params
        this.hasBack = linkManager().hasBack();
        this.nodeParams =
          Object.keys(getNodeParams()).length > 0 ? getNodeParams() : null;

        if (!this.cdr['destroyed']) {
          this.cdr.detectChanges();
        }
      });
  }

.subscribe((ctx: IContextMessage) => {
        // We can directly access our custom specified context value here
        this.groupLabel = toTitleCase(ctx.context.currentGroup);

        // Default way, if context is not specified in node configuration
        this.pathParams = getPathParams();
        this.groupLabel =
          this.pathParams &&
          this.pathParams.group &&
          toTitleCase(this.pathParams.group);

        if (!this.cdr['destroyed']) {
          this.cdr.detectChanges();
        }
      });
  }

.subscribe((ctx: IContextMessage) => {
        if (ctx.contextType === 'init' || ctx.contextType === 'update') {
          this.projectId = ctx.context.currentProject;
          this.preservedViewCallbackContext = ctx.context.goBackContext;
          this.currentLocale = uxManager().getCurrentLocale();
          this.canChangeLocale = getClientPermissions().changeCurrentLocale;
          // Since Luigi runs outside of Zone.js, changes need
          // to be updated manually
          // Be sure to check for destroyed ChangeDetectorRef,
          // else you get runtime Errors
          if (!this.cdr['destroyed']) {
            this.cdr.detectChanges();
          }
        }
      });

ngOnInit() {
    addInitListener(context => this.onLuigiContext('init', context));
    addContextUpdateListener(context => this.onLuigiContext('update', context));

    addInactiveListener(() => {
      console.debug(
        'inactiveListener: micro frontend is now in the background'
      );
    });
  }

ngOnInit() {
    addCustomMessageListener(
      'luigi.my-custom-message-for-client',
      (customMessage, listenerId) => {
        console.info('Received Custom Message', customMessage, listenerId);
      }
    );
  }

ngOnInit() {
    addInitListener(context => this.onLuigiContext('init', context));
    addContextUpdateListener(context => this.onLuigiContext('update', context));

    addInactiveListener(() => {
      console.debug(
        'inactiveListener: micro frontend is now in the background'
      );
    });
  }