How to close the modal dialog of a UI Kit 2 Confluence ContentAction?

Forge
,
1

Dear Community,

I would like to create a Confluence ContentAction with UI Kit 2. The following skeleton gets rendered correctly as a Content Action inside a ModalDialog, and due to the presence of a Form, we already get a Submit button rendered normally, right aligned, next to the default Cancel button.

However, clicking the Submit button (thereby setting isOpen to false), results in only the form (incl. the Submit button) disappearing, the ModalDialog itself, however, stays open.

  1. How is it possible to close it with the Submit button, or for that matter, any custom button or action other than the automatically added Cancel button? (The default Cancel button closes the ModalDialog correctly)

  2. Is it possible to rename the default Cancel button to anything else? (like No, Abort, Exit, Close, etc.)

const ContentActionDialog = () => {
    const [isOpen, setOpen] = useState(true);
    if (!isOpen) {
        return null;
    } else {
        return (
            <>
                <Form
                    onSubmit={data => {
                        console.log("Submit clicked");
                        setOpen(false);
                    }}>
                    <Text>Some text</Text>
                </Form>
            </>
        );
    }
}

ForgeReconciler.render(
    <React.StrictMode>
        <ContentActionDialog/>
    </React.StrictMode>
);

By the way, returning a ModalDialog from the ContentActionDialog function above results in two modal dialogs opening on the top of each other, so I suppose it is correct that I am only returning the contents of the ModalDialog here. I have also tried view.close() (as the view object from @forge/bridge is available in UI Kit 2), but to no avail

2 Likes
3

The reason that the form disappears is that you are returning null when isOpen is false, which renders nothing.

I’m also interested in whether it’s possible to close a UI Kit 2 view programatically. As mentioned above, calling view.close doesn’t work. For example, I created this confluence:contentAction using UI Kit 2:

import React from "react";
import ForgeReconciler, { Form, TextField } from "@forge/react";
import { view } from "@forge/bridge";

const App = () => {
  return (
    <Form
      onSubmit={() => {
        view.close().catch((e) => {
          console.log("error closing", e);
        });
      }}
    >
      <TextField name="username" label="Username" />
    </Form>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

which looks like this:

image
image1240×486 16.2 KB

when submitting the form, the following is logged:

[Log] error closing – Error: this resource's view is not closable. (main.js, line 2)

I’ve also tested a bitbucket:repoCodeOverviewAction which rejects the close promise with the same error.

cc @ddraper @QuocLieu can see that you’ve worked on UI Kit 2 so wondering whether you may know?

1 Like
4

Hi @joshp , the view.close call is primarily used for Custom UI modals . Unfortunately at this point in time, the cancel button is the only way to close the modal. A feature request for this can be logged here

5

Thanks very much for the response @QuocLieu - have opened FRGE-1333.

1 Like