Does new UI Kit version 0.8.0 cause problems with config / ConfigForm?

Forge
1

Due to the update of UI kit I update my sample forge apps.
For those which are using ConfigForm there are some issues.

E.g. Forge World Time
Pls have a look at the code
After npm install @forge/ui@latest
forge deploy echoes the following errors:

[tsl] ERROR in D:\WorldTime\src\WorldClock.tsx(1,70)
TS2614: Module ‘“…/node_modules/@forge/ui/out”’ has no exported member ‘ConfigForm’. Did you mean to use ‘import ConfigForm from “…/node_modules/@forge/ui/out”’ instead?

[tsl] ERROR in D:\WorldTime\src\WorldClock.tsx(45,5)
TS2322: Type ‘{ app: Element; config: Element; defaultConfig: { tz: string; format: string; }; }’ is not assignable to type ‘IntrinsicAttributes & { app: ForgeElement<Record<string, any>>; }’.
Property ‘config’ does not exist on type ‘IntrinsicAttributes & { app: ForgeElement<Record<string, any>>; }’.

Can anyone give me a hint?

2

Hi @FranzBinder,

We introduced a new way to write macro configuration in 0.5.0 and are no longer actively supporting the old way.

See https://developer.atlassian.com/platform/forge/changelog/#6-aug-2020 for the original announcement.

To learn how to switch to the new macro configuration, see https://developer.atlassian.com/platform/forge/switch-to-the-new-macro-config/.

Let me know if you still have some questions after you’ve read those pages!

1 Like
3

Thanks @kchan,
I already had a hunch in this direction.

I managed to change the code that it get deployed :grinning:
But I got the experience that nothing of my configuration data was accepted from the app.

So I tried to create a new simple app - 100% equal to the example from “Add configuration to a macro”

I got again the same experience:

  • The macro is working
  • When it comes to config the config panel is shown
  • I can enter e.g. “Pet name” and “Pet age”
  • Then what to do?
    ** ? Press ENTER ?
    ** ? Click into the main area on the left side ?

No matter what I do:

  • The entered data (Pet’s name and age) are neither stored nor processed.
    They are not visible anymore.
  • The next time I press the config icon the default value appears again.

What I’m doing wrong?
Btw it also a strange behaviour to enter config data and have no ENTER or Submit Button.

MacroConfig-PetExample
MacroConfig-PetExample1451×225 9.44 KB

P.S. Also the Close button at the top of the right config panel has no effect!

1 Like
4

Hi @FranzBinder, you may be experiencing a bug with macro config that was recently deployed and discovered. We are investigating the issue now and will give you an update as soon as possible!

5

Hi @FranzBinder, we have found the cause of the issue and are working on getting a fix out. I will let you know when the fix has been released.

1 Like
6

Hi @FranzBinder, we’re releasing a fix now. Given that UI Kit is still in beta, we’ve decided to release through a slightly accelerated release process, rather than immediately and risk introducing broken or unreliable code to Confluence, or otherwise interfere with unrelated releases. As such, you should be able to expect the fix to reach production in ~15 hours, barring any major blockers in the release pipeline.

I will be back on Monday morning Sydney time to confirm!

1 Like
7

Hi @kchan,
thanks for working on that swiftly!
Did you already deployed the bug fix?
I couldn’t see any change in the behaviour even. Do I need to run forge deploy again?

8

@kchan,

I too am seeing issues with the config form not preserving values. Can you confirm this bug fix is now deployed to production and the steps required to see this fix with deployed apps.

Many thanks,
Tom

9

Hi @FranzBinder @TomNoble,

I’ve just checked the Confluence release pipeline, and it looks like there was an unrelated revert in Confluence over the weekend, which has meant our fix was removed from production for the meantime, in order to fix an issue elsewhere.

The release pipeline is looking stable once more, and the next release with the fix is once again going through the final stages of the release process, which will resume during PST daytime when most of the Confluence team is online. Barring any further Confluence issues, which is highly unlikely, the fix will be in production by 1pm on Monday PST / 8am on Tuesday AEST.

We’re really sorry for the delay.

10

Hi @FranzBinder @TomNoble,

The fix has been included in the latest release to production, so you should be able to use macro configuration in newly created macros again. Thank you for your patience, we’re really sorry for the inconvenience this bug may have caused you.

11

Hi @kchan,

I have just tried running my app again, values in the config are still not persisted.
I tried uninstalling and installing again, no difference.

Code…

const App = () => {
  const config = useConfig() || defaultConfig;

  return (
    <Fragment>
      <Text content={config.title} />
    </Fragment>
  );
};

const Config = () => {
  const [groups] = useState(async () => await fetchGroups());

  return (
    <MacroConfig>
      <TextField label="Title" name="title" />
    </MacroConfig>
  );
};

Any thoughts?

For the sake of completeness I tried the example code here (https://developer.atlassian.com/platform/forge/add-configuration-to-a-macro/) as well on a deployed forge app on a new page, same issue.

12

Thanks @kchan,

I tested it with 2 small macros and it worked after forge depoy usage .
The config parameter is accepted and the macro will be render with the new value after:

  • pressing ENTER inside the config field
    or
  • leaving the config field (e.g. to the next field or to the page body)
1 Like
13

Great to hear @FranzBinder!

@TomNoble, thanks for trying again. I created an app with your code and it seems to work.

I open the edit page, click the pencil button, enter some text into the textfield, click away from the textfield, and the app on the page updates with the text I entered into the textfield.

src/index.jsx

import ForgeUI, {
  render,
  Fragment,
  Macro,
  Text,
  useConfig,
  MacroConfig,
  TextField,
} from "@forge/ui";

const defaultConfig = {
  title: "defaultTitle",
};

const App = () => {
  const config = useConfig() || defaultConfig;

  return (
    <Fragment>
      <Text content={config.title} />
    </Fragment>
  );
};

const Config = () => {
  return (
    <MacroConfig>
      <TextField label="Title" name="title" />
    </MacroConfig>
  );
};

export const run = render(<Macro app={<App />} />);

export const config = render(<Config />);

manifest.yml

modules:
  macro:
    - key: macro-config-broken-1-hello-world
      function: main
      title: macro-config-broken-1
      description: Inserts Hello world!
      config:
        function: config
  function:
    - key: main
      handler: index.run
    - key: config
      handler: index.config
app:
  id: ari:cloud:ecosystem::app/84e72f79-e56b-4251-98b3-4408c53f1c6a
  name: macro-config-broken-1

Do you notice any difference in my code and yours?

Can you try hard refreshing your browser (ctrl + F5 on windows OR cmd + shift + r on mac) before trying again?

Could you also check the @forge/ui version in the package.json?

14

Thanks for getting back to me. Turns out a combination of a hard refresh and a redeploy solved the issue. Config changes now persist :slight_smile: