Make flags from `import { showFlag } from '@forge/bridge';` dissmissable from within

[C11]

Hello you all,

i am currently trying to allow the user to close a flag shown via import { showFlag } from '@forge/bridge'; on my custom ui atlassian forge app.

When looking into the source code, there is no way to configure it directly

export declare type FlagAppearance = 'info' | 'success' | 'warning' | 'error';
export declare type FlagType = FlagAppearance;
export interface Flag {
    close: () => Promise<boolean | void>;
}
export interface FlagAction {
    text: string;
    onClick: () => void;
}
export interface FlagOptions {
    id: number | string;
    title?: string;
    description?: string;
    type?: FlagType;
    appearance?: FlagAppearance;
    actions?: FlagAction[];
    isAutoDismiss?: boolean;
}
export declare const showFlag: (options: FlagOptions) => Flag;
//# sourceMappingURL=flag.d.ts.map

The only way to close a flag is calling close() of the returned value from showFlag

Is there any way to make it closable, even if it is via a small x on the top-right of the flag

I appreciate any help

[NadyaFelissa]

Hi @C11,

Thanks for bringing this up! When we call showFlag() the Flag component actually includes a close button by default, so it’s always closable even if we don’t explicitly call close(), i.e:

[KevinGagnon]

That is not always true. I just had a simple Flag made like so, and there was no included, implicit, close button.

				showFlag({
					id: "some-id-not-sure-what",
					type: "info",
					appearance: "info",
					title: "Copied!",
					description: "Link copied to clipboard",
					isAutoDismiss: true,
				});

So either there is no button to call onClose action with an info type flag or that isAutoDismiss removes the button by default. In which case, the original question is still valid.

How can we call the Flag object close() method when we need to pass it to the function that returns it.

Edit: I just found out that the closing button disappear because of the theme change from the appearance property. If you completely omit the appearance property, you get what is shown in the screenshot. Also, in the documentation the appearance property says it makes the flag bold but the options are the exact same as type. type property should instead be mandatory and appearance should be something like isBold: boolean. Furthermore, if you set type and appearance to something different, only appearance is considered meaning that having the option to set both is useless.