My idea was to try and create a little "hello world" Repository overview card in typescript using the following repository as an example.
https://bitbucket.org/bitbucket/bitbucket-forge-hello-world/src/main/hello-world-app/src
This is my index.tsx file.
import ForgeUI, { render, Fragment, Text, useProductContext} from "@forge/ui";
const App = () => {
const context = useProductContext();
return (
<Fragment>
<Text> "Hello world!" </Text>
<Text>Workspace ID: {JSON.stringify(context.workspaceId)}</Text>
<Text>ExtensionContext: {JSON.stringify(context.extensionContext.repository)}</Text>
</Fragment>
);
};
export const display = render(<App />);
And this is my manifest file.
modules:
bitbucket:repoCodeOverviewCard:
- key: display-metrics
title: "Test card: Repo metrics"
function: main
function:
- key: main
handler: index.display
app:
id: <id-here>
The problem i run into is in the line in the index file where I call "context.extensionContext.repository". The linter says its fine, but when trying to deploy I get the following error:
TS2339: Property 'repository' does not exist on type 'ExtensionContext'.
I tried updating my script to just use "context.extensionContext" and print that and then I see the following in my test environment:
What am I missing here? Why can I see the "repository" property, but am I not able to access it in my script?
Hi @Stijn ,
Thank you for trying out Forge and for your question. That `productContext.extensionContext` object is actually dynamic and the contents of it depends on the extension point which is why the default typing for it does not include the `repository` property.
Potentially the typing for this `extensionContext` attribute should be updated to be more loose to account for this, but I'll need to reach out to the team who owns this library to double check.
In the meantime you can cast the extension context with a custom type like so:
import { ExtensionContext } from '@forge/ui/out/types';
type BitbucketRepoCodeOverviewCardContext = {
repository: { uuid: string };
} & ExtensionContext;
const extensionContext = useProductContext()?.extensionContext as BitbucketRepoCodeOverviewCardContext;
JSON.stringify(extensionContext.repository)
Kind regards,
Shouhei Yamauchi
Developer - Bitbucket Cloud
Hi @Stijn & all,
Can you try to upgrade the @forge/ui package to the latest and try again without using the workaround?
You'll need version 1.9.9 or higher (https://www.npmjs.com/package/@forge/ui?activeTab=versions) for this to work.
We released a fix for this last week.
Cheers,
Caterina
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.