showFlag from @forge/bridge causes app to get stuck on "Loading plugin..."

Forge Forge UI Kit and Custom UI
, ,
1

I’ve been encountering an issue where using the showFlag function from @forge/bridge (as per the documentation) causes the application to be stuck on “Loading plugin…” indefinitely.

Below are some key details:

  • Problem: The app never finishes loading when the flag code runs.
  • Environment:
    • @forge/events: ^0.9.8
    • @forge/api: ^4.3.0
    • @forge/bridge: ^4.4.0
    • @forge/react: ^10.8.0
    • @forge/resolver: ^1.6.5
    • @forge/ui: ^1.11.1
  • Symptoms: After calling showFlag, the application remains in the “Loading plugin…” state and does not proceed.

Has anyone encountered this issue or have insights on whether this is a known bug with the current version of @forge/bridge? Any guidance on debugging this or a potential workaround would be greatly appreciated.

Looking forward to your suggestions!

2

Hi @DavidToman , do you have a code snippet you can share? Which module are you writing your app for?

3

Hi @QuocLieu,
Thanks for reaching out! Of course, here’s the code snippet for Jira module:

import { RecommendedActionModel } from '../../../config/types/models/recommended-action.model';
import { JiraIssueContextResolverRequest } from '../../../config/types/requests/jira-resolver.request';
import { createJiraIssue } from '../../services/jira-issue/jira-issue.service';
import { updateStoredSecurityInsightsIssueKey } from '../../services/jira-security-insights/jira-security-insights.service';
import { showFlag } from '@forge/bridge';

export const addRecommendedActionAsIssueResolver = async ({
  context,
  payload,
}: JiraIssueContextResolverRequest<{
  action: RecommendedActionModel;
}>): Promise<void> => {

  const { action } = payload;
  if (!action) {
    return;
  }

  const { summary, details_markdown } = action;
  if (!summary || !details_markdown) {
    return;
  }

  try {

    const newIssue = await createJiraIssue({
      fields: {
        summary: summary,
        description: details_markdown,
        issuetype: { id: context.extension.issue.typeId },
        project: { id: context.extension.project.id },
      },
    });

    if (!newIssue) {
      return;
    }

    await updateStoredSecurityInsightsIssueKey(context.extension.issue.id, payload.action.id, newIssue.key);
    const flag = showFlag({
      id: 'success-flag',
      title: 'Hello World!',
      type: 'info',
      actions: [
        {
          text: 'Flag action',
          onClick: () => {
            console.log('flag action clicked');
          },
        }
      ],
      isAutoDismiss: true,
    });
    
    flag.close();

  } catch (error) {
    console.error('Error creating new Jira issue:', error);
  }
};
4

It seems you’re invoking showFlag from a resolver. Forge bridge methods should be invoked from the front end instead. I would suggest moving the call over to the frontend side of your application and calling it right after invoking this resolver

2 Likes
5

That’s it! Thanks @QuocLieu

1 Like