UI Kit 1 MacroConfig to UI Kit migration - Multiple Macros - Multiple Configs

Forge Forge UI Kit and Custom UI
1

Hi,

I am trying to migrate my UI Kit 1 Macro Config for my app that has three macros to the new UI Kit approach.
See:

But how can I use different Configs for my macros? Currently they all run the same bundled Custom UI frontend. And currently in the UI Kit 1 world I define the config in the manifest.yml like so:

modules:
  macro:
    - key: macroone
      icon: resource:icons;app-logo.svg
      resource: customui
      resolver:
        function: resolver
      title: macroone
      description: macroone
      config:
        function: macroOneConfig
      export:
        function: macroOneExport
    - key: macrotwo
      icon: resource:icons;app-logo.svg
      resource: customui
      resolver:
        function: resolver
      title: macrotwo
      description: macrotwo
      config:
        function: macrotwoConfig
      export:
        function: macrotwoExport

And I can do in single config.js backend file something like this:

...

export const renderMacroConfigOne = render(<MacroOneConfig />);

export const renderMacroConfigTwo = render(<MacroTwoConfig />);

And now with UI Kit I have to use:

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

ForgeReconciler.addConfig(<Config />);

And how do I apply different configs here? Is it possible to use conditionals here?

How can I achieve the same thing with UI Kit?

thanks,

Bernhard

Who decided to merge the config together with the frontend? Why not keep it separate like the Word ADF export still is? …

2

I’m not sure what your Config code looks like (if there’s overlap), but it’s definitely possible to use conditionals. You can use the view.getContext method and implement different logic based on the resulting moduleKey (which matches what you find in your manifest).

There might be a better way in general, but that should work.

2 Likes
3

That’s my final setup, working like a charm :rocket:

index.tsx

...
view.getContext().then((ctx) => {
  if (ctx && ctx.moduleKey === "moduleKeyOne) {
    ForgeReconciler.addConfig(<ModuleOneConfig />);
  }
  if (ctx && ctx.moduleKey === "moduleKeyTwo") {
    ForgeReconciler.addConfig(<ModuleTwoConfig />);
  }
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
2 Likes
4

Here’s a bunch of bugs, suggestions and blockers I got them to create when I tried to migrate:

  • ECO-483 - Forge UI Kit 2 re-renders macro config after field updates
  • ECO-484 - Manifest flag to automatically open the config sidebar
  • ECO-487 - Have onChange/onBlur/onFocus events for macro config fields
  • ECO-486 - Have a mutation option for useConfig hook so developers can programmatically save the config
  • ECO-485 - useContentProperty hook should automatically work for both pages and blogposts
1 Like
5

Nice summary. My blockers are mostly missing Boolean form controls. (See post below)

But how in the world does Atlassian want us to migrate and then the stuff does not work :man_facepalming: In the CHANGELOG-1932 is stated that within 6 months UI Kit 1 will no longer work!

1 Like
6

Yeah I can’t migrate until that re-render one is fixed.

It’s likely they’ll extend the deprecation date. But they do need to be more cautious with deprecating Forge packages. I wish it was made clear years ago that UI Kit was a server-side runtime that would be shutdown in the future, and not just a UI component library like Atlaskit.

Your best bet is to contact developer support and insist they create tickets for each of the issues you’ve found.

1 Like
7

Good idea. I have opened ECOHELP-50788 and asked them to open ECO-X tickets.
Let’s see if they actually do this and/or if they stay forever in some backlog :smiley: