New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@atlassian/clientside-extensions-docs

Package Overview
Dependencies
Maintainers
28
Versions
167
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlassian/clientside-extensions-docs - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0-docs-1

content/server/framework/clientside-extensions/guides/extension-points/creating-an-extension-point.md
content/server/framework/clientside-extensions/guides/extension-points/extension-point-documentation.md
content/server/framework/clientside-extensions/guides/extension-points/index.md
content/server/framework/clientside-extensions/guides/extension-points/providing-context.md
content/server/framework/clientside-extensions/guides/extension-points/rendering-extensions.md
content/server/framework/clientside-extensions/guides/how-to/setup-schema-loader.md
content/server/framework/clientside-extensions/images/discovery-icon.png
content/server/framework/clientside-extensions/images/extension-point-information.png
content/server/framework/clientside-extensions/reference/api/extension-api/async-panel-api.md
content/server/framework/clientside-extensions/reference/api/extension-api/index.md
content/server/framework/clientside-extensions/reference/api/extension-api/modal-api.md
content/server/framework/clientside-extensions/reference/api/extension-api/panel-api.md
content/server/framework/clientside-extensions/reference/api/extension-api/render-element-as-react.md
content/server/framework/clientside-extensions/reference/api/extension-factories/index.md
content/server/framework/clientside-extensions/reference/api/extension-points-v1-deprecated.md
content/server/framework/clientside-extensions/reference/api/extension-points/extension-handlers.md
content/server/framework/clientside-extensions/reference/api/extension-points/hooks-and-components.md
content/server/framework/clientside-extensions/reference/api/extension-points/index.md
content/server/framework/clientside-extensions/reference/api/extension-points/schemas.md

2

content/server/framework/clientside-extensions/get-help.md

@@ -7,3 +7,3 @@ ---

subcategory: get-help
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

47

content/server/framework/clientside-extensions/guides/how-to/setup-page-bootstrapper.md

@@ -7,3 +7,3 @@ ---

subcategory: how-to
date: '2020-09-04'
date: '2021-02-18'
---

@@ -39,2 +39,7 @@

<project>
<!-- add a property with the version of CSE. Example: 1.2.0 -->
<properties>
<cse.version>1.2.0</cse.version>
</properties>
<dependencies>

@@ -45,3 +50,3 @@ <!-- CSE page bootstrapper -->

<artifactId>atlassian-clientside-extensions-page-bootstrapper</artifactId>
<version>${cse.version}</version> <!-- >= 1.2.0 -->
<version>${cse.version}</version>
</dependency>

@@ -66,8 +71,16 @@

## 2. Import `clientsideextensions` package and pluginArtifact
## 2. Import `clientsideextensions` package as a plugin dependency
Since the page bootstrapper is a stand-alone solution, it might not be provided by some versions of products.
This step is needed in order to bundle the page bootstrapper Atlassian plugin as a dependency in an OBR, and to
include the dependency when starting the project with AMPS.
If you want to learn more about this practice, read
[bundling extra dependencies in a OBR](https://developer.atlassian.com/server/framework/atlassian-sdk/bundling-extra-dependencies-in-an-obr/)
In your `pom.xml` file, find your declaration of the Maven plugin for the product you're targeting (e.g: `bitbucket-maven-plugin`), and:
- Import the `com.atlassian.plugin.clientsideextensions` package.
- Include the `atlassian-clientside-extensions-page-bootstrapper` plugin artifact.
- Include the `atlassian-clientside-extensions-page-bootstrapper` as a plugin dependency.
- Include the `atlassian-clientside-extensions-page-bootstrapper` as a plugin artifact for AMPS.

@@ -86,8 +99,14 @@ ```xml

<Import-Package>
com.atlassian.plugin.clientsideextensions, <!-- import the package -->
com.atlassian.plugin.clientsideextensions;version="${cse.version}", <!-- import the package -->
*
</Import-Package>
</instructions>
<pluginDependencies>
<pluginDependency> <!-- include as a pluginDependency -->
<groupId>com.atlassian.plugins</groupId>
<artifactId>atlassian-clientside-extensions-page-bootstrapper</artifactId>
</pluginDependency>
</pluginDependencies>
<pluginArtifacts>
<pluginArtifact> <!-- include the pluginArtifacts -->
<pluginArtifact> <!-- include as a pluginArtifact -->
<groupId>com.atlassian.plugins</groupId>

@@ -151,2 +170,7 @@ <artifactId>atlassian-clientside-extensions-page-bootstrapper</artifactId>

<!-- add a property with the version of CSE. Example: 1.2.0 -->
<properties>
<cse.version>1.2.0</cse.version>
</properties>
<dependencies>

@@ -187,3 +211,3 @@ <!-- CSE page bootstrapper -->

<Import-Package>
com.atlassian.plugin.clientsideextensions, <!-- import the package -->
com.atlassian.plugin.clientsideextensions;version="${cse.version}", <!-- import the package -->
*

@@ -193,9 +217,8 @@ </Import-Package>

</instructions>
<pluginArtifacts>
<pluginArtifact> <!-- include the pluginArtifacts -->
<pluginDependencies>
<pluginDependency> <!-- include as a pluginDependency -->
<groupId>com.atlassian.plugins</groupId>
<artifactId>atlassian-clientside-extensions-page-bootstrapper</artifactId>
<version>${cse.version}</version>
</pluginArtifact>
</pluginArtifacts>
</pluginDependency>
</pluginDependencies>
</configuration>

@@ -202,0 +225,0 @@ </plugin>

2

content/server/framework/clientside-extensions/guides/how-to/setup-webpack-plugin.md

@@ -7,3 +7,3 @@ ---

subcategory: how-to
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

8

content/server/framework/clientside-extensions/guides/introduction/creating-a-modal.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -24,3 +24,3 @@

To create the modal extension, you need to use the `ModalExtension` factory. The CSE runtime will then use the `onAction` method
to inject a [Modal API](/server/framework/clientside-extensions/reference/api/modal-api/) object when the modal is ready for you
to inject a [Modal API](/server/framework/clientside-extensions/reference/api/extension-api/modal-api/) object when the modal is ready for you
to render the content in.

@@ -147,3 +147,3 @@

Client-side Extensions (CSE) provides a utility that makes it easier to use React with the **Modal** extension. For more info, see [Rendering elements as React](/server/framework/clientside-extensions/reference/api/render-element-as-react/).
Client-side Extensions (CSE) provides a utility that makes it easier to use React with the **Modal** extension. For more info, see [Rendering elements as React](/server/framework/clientside-extensions/reference/api/extension-api/render-element-as-react/).

@@ -159,3 +159,3 @@ ## Recap

{{% tip %}}
Make sure to check the [modal API reference](/server/framework/clientside-extensions/reference/api/modal-api/) to explore more things you can do with modals.
Make sure to check the [modal API reference](/server/framework/clientside-extensions/reference/api/extension-api/modal-api/) to explore more things you can do with modals.
{{% /tip %}}

2

content/server/framework/clientside-extensions/guides/introduction/creating-a-page.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

6

content/server/framework/clientside-extensions/guides/introduction/creating-an-extension.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -66,3 +66,3 @@

label: 'Extensions are awesome!',
url: 'http://go.atlassian.com/clientside-extensions',
url: 'https://go.atlassian.com/clientside-extensions',
};

@@ -112,3 +112,3 @@ });

label: 'Extensions are awesome!',
url: 'http://go.atlassian.com/clientside-extensions',
url: 'https://go.atlassian.com/clientside-extensions',
};

@@ -115,0 +115,0 @@ });

8

content/server/framework/clientside-extensions/guides/introduction/custom-HTML-content.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -28,3 +28,3 @@

For panel extensions, CSE executes the `onAction` method when it's ready to receive your content, and provides a [Panel API](/server/framework/clientside-extensions/reference/api/panel-api/)
For panel extensions, CSE executes the `onAction` method when it's ready to receive your content, and provides a [Panel API](/server/framework/clientside-extensions/reference/api/extension-api/panel-api/)
object that you can use to render your content.

@@ -57,3 +57,3 @@

3. Change your extension to use the `PanelExtension` factory.
4. Use `onAction` to receive the `PanelAPI` object.
4. Use `onAction` to receive the `PanelApi` object.
5. Use `onMount` to get a container and render your content in it.

@@ -143,3 +143,3 @@

Client-side Extensions (CSE) provides a utility that makes it easier to use React with the **Modal** extension. For more info, see [Rendering elements as React](/server/framework/clientside-extensions/reference/api/render-element-as-react/).
Client-side Extensions (CSE) provides a utility that makes it easier to use React with the **Modal** extension. For more info, see [Rendering elements as React](/server/framework/clientside-extensions/reference/api/extension-api/render-element-as-react/).

@@ -146,0 +146,0 @@ ## Recap and next steps

2

content/server/framework/clientside-extensions/guides/introduction/discovering-extension-points.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

10

content/server/framework/clientside-extensions/guides/introduction/index.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -24,2 +24,8 @@

{{% note %}}
If you have an existing project, you can follow our guides on how to [setup CSE webpack plugin](/server/framework/clientside-extensions/guides/how-to/setup-webpack-plugin/)
and browse our [API Reference](/server/framework/clientside-extensions/reference/api/extension-factories) for a quick
look at all you can do with CSE.
{{% /note %}}
## Installing the requirements

@@ -29,3 +35,3 @@

- Node 12.13+
- Node 12.19+
- Maven 3.6.3

@@ -32,0 +38,0 @@ - Java JDK 1.8

2

content/server/framework/clientside-extensions/guides/introduction/using-extension-api.md

@@ -7,3 +7,3 @@ ---

subcategory: introduction
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

24

content/server/framework/clientside-extensions/index.md

@@ -7,3 +7,3 @@ ---

subcategory: index
date: '2020-09-04'
date: '2021-02-18'
---

@@ -17,3 +17,3 @@

{{% note %}}
Client-side Extensions is a recent addition to Server Platform, so availability is still limited to the following products:
Client-side Extensions is a recent addition to Server Platform, so the availability of new extension points is still limited to the following products:

@@ -25,3 +25,3 @@ - Bitbucket Server 7.0 - Pull Request experience

## Getting started
## Creating extensions

@@ -33,3 +33,3 @@ If you're new to CSE, we recommend going through our [introduction guides](/server/framework/clientside-extensions/guides/introduction/).

## Setup
### Setup

@@ -40,5 +40,17 @@ In case you have an existing project, you can follow our guides on how to [setup CSE webpack plugin](/server/framework/clientside-extensions/guides/how-to/setup-webpack-plugin/)

## Not using webpack
### Not using webpack
If you're not using webpack, you can still make use of CSE in Bitbucket Server 7.0.
If you're not using webpack, you can still make use of CSE in any product that supports it.
For examples on how to do so, explore [our demos](https://bitbucket.org/atlassian/atlassian-clientside-extensions/src/master/environments/refapp/src/main/resources/).
## Creating extension points
Client-side Extensions (CSE) also provides a set of components and APIs that you can use to create your own extension points,
and make your UI extendable by others using the same APIs that they use to extend Atlassian products.
Refer to the [creating extension points](/server/framework/clientside-extensions/guides/extension-points/) guides to learn how to use them in your project.
### Setup
If you want to create extension points on your own project, follow the guide on
[how to setup CSE schema-loader](/server/framework/clientside-extensions/guides/how-to/setup-schema-loader/) before you get started.

79

content/server/framework/clientside-extensions/reference/api/extension-factories/async-panel.md

@@ -7,3 +7,3 @@ ---

subcategory: api
date: '2020-09-04'
date: '2021-02-18'
---

@@ -33,8 +33,11 @@

<tr>
<td><code>label*</code></td>
<td><code>string</code></td>
<td>Optionally rendered by the product to describe the panel content. e.g. it may be the label of a tab in a list of tabs, or the text for a header above the panel HTML.</td>
<td><code>weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>onAction*</code></td>
<td><code>onAction</code> <strong>*</strong></td>
<td><code>function</code></td>

@@ -46,3 +49,3 @@ <td>

The plugin system will provide an API with lifecycles to render/clean up any current content into a provided container.</p>
<p>Refer to <a href="/server/framework/clientside-extensions/reference/api/async-panel-api">AsyncPanel API</a> documentation for more info.</p>
<p>Refer to <a href="/server/framework/clientside-extensions/reference/api/extension-api/async-panel-api">AsyncPanel API</a> documentation for more info.</p>
</td>

@@ -78,3 +81,3 @@ </tr>

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -84,3 +87,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -90,7 +93,2 @@ <td>Defines the location where the extension will be rendered.</td>

<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td>Defines a label that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@weight</code></td>

@@ -136,3 +134,2 @@ <td><code>number</code></td>

return {
label: 'JS Panel',
onAction: panelModuleLoader,

@@ -158,1 +155,55 @@ };

```
### With context definition
### `types.ts`
```ts
export interface ExampleContext {
issueId: string;
title: string;
}
```
#### `my-extension.ts`
```ts
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { ExampleContext } from './types';
// Dynamic module loader
const panelModuleLoader = () => {
return import('./panel-module.ts');
};
/**
* @clientside-extension
* @extension-point reff.plugins-example-location
*/
export default AsyncPanelExtension.factory<ExampleContext>((extensionAPI, context) => {
return {
onAction: panelModuleLoader,
};
});
```
#### `panel-module.ts`
<!-- prettier-ignore-start -->
```ts
import { AsyncPanelExtension } from '@atlassian/clientside-extensions';
import { ExampleContext } from './types';
export default function initAsyncPanel(
asyncPanelApi: AsyncPanelExtension.Api,
context: ExampleContext
) {
panelApi.onMount(container => {
container.innerHTML = `
<h1>${context.title}</h1>
<p>Jira issue id: ${context.issueId}</p>
`;
});
}
```
<!-- prettier-ignore-end -->

54

content/server/framework/clientside-extensions/reference/api/extension-factories/button.md

@@ -7,3 +7,3 @@ ---

subcategory: api
date: '2020-09-04'
date: '2021-02-18'
---

@@ -27,3 +27,3 @@

<tr>
<td><code>label*</code></td>
<td><code>label</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -33,3 +33,11 @@ <td>Text to be used as the label of the button.</td>

<tr>
<td><code>onAction*</code></td>
<td><code>weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>onAction</code> <strong>*</strong></td>
<td><code>function</code></td>

@@ -69,3 +77,3 @@ <td>

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -75,3 +83,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -81,15 +89,2 @@ <td>Defines the location where the extension will be rendered.</td>

<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td>Defines a label that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>@condition</code></td>

@@ -128,1 +123,24 @@ <td><code>string | Conditions</code></td>

```
### With context definition
```ts
import { ButtonExtension } from '@atlassian/clientside-extensions';
interface ExampleContext {
issueId: string;
}
/**
* @clientside-extension
* @extension-point reff.plugins-example-location
*/
export default ButtonExtension.factory<ExampleContext>((extensionAPI, context) => {
return {
label: 'My Button',
onAction: () => {
console.log('Jira issue id', context.issueId);
},
};
});
```

59

content/server/framework/clientside-extensions/reference/api/extension-factories/link.md

@@ -7,3 +7,3 @@ ---

subcategory: api
date: '2020-09-04'
date: '2021-02-18'
---

@@ -27,6 +27,19 @@

<tr>
<td><code>label*</code></td>
<td><code>label</code> <strong>*</strong></td>
<td><code>string</code></td>
<td>Text to be used as the label of the link.</td>
</tr>
<tr>
<td><code>weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>url</code> <strong>*</strong></td>
<td><code>string</code></td>
<td>Defines a URL that's going to be used for the link.</td>
</tr>
</tbody>

@@ -60,3 +73,3 @@ </table>

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -66,3 +79,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -72,20 +85,2 @@ <td>Defines the location where the extension will be rendered.</td>

<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td>Defines a label that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@link</code></td>
<td><code>string</code></td>
<td>Defines a URL that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>@condition</code></td>

@@ -119,1 +114,21 @@ <td><code>string | Conditions</code></td>

```
### With context definition
```ts
import { LinkExtension } from '@atlassian/clientside-extensions';
interface ExampleContext {
title: string;
url: string;
}
/**
* @clientside-extension
* @extension-point reff.plugins-example-location
*/
export default LinkExtension.factory<ExampleContext>((extensionAPI, context) => ({
label: `Go to ${context.title}`,
url: context.url,
}));
```

62

content/server/framework/clientside-extensions/reference/api/extension-factories/modal.md

@@ -7,3 +7,3 @@ ---

subcategory: api
date: '2020-09-04'
date: '2021-02-18'
---

@@ -28,3 +28,3 @@

<tr>
<td><code>label*</code></td>
<td><code>label</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -34,3 +34,11 @@ <td>Text to be used as the label of the link.</td>

<tr>
<td><code>onAction*</code></td>
<td><code>weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>onAction</code> <strong>*</strong></td>
<td><code>function</code></td>

@@ -41,3 +49,3 @@ <td>

to modify the title, content and actions of the modal.</p>
<p>Refer to <a href="/server/framework/clientside-extensions/reference/api/modal-api">Modal API</a> documentation for more info.</p>
<p>Refer to <a href="/server/framework/clientside-extensions/reference/api/extension-api/modal-api">Modal API</a> documentation for more info.</p>
</td>

@@ -73,3 +81,3 @@ </tr>

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -79,3 +87,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -85,15 +93,2 @@ <td>Defines the location where the extension will be rendered.</td>

<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td>Defines a label that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>@condition</code></td>

@@ -140,1 +135,30 @@ <td><code>string | Conditions</code></td>

```
### With context definition
```ts
import { ModalExtension } from '@atlassian/clientside-extensions';
interface ExampleContext {
issueId: string;
title: string;
}
/**
* @clientside-extension
* @extension-point reff.plugins-example-location
*/
export default ModalExtension.factory<ExampleContext>((extensionAPI, context) => {
return {
label: 'Open Modal',
onAction(modalAPI) {
modalAPI.onMount(container => {
container.innerHTML = `
<h1>${context.title}</h1>
<p>Jira issue id: ${context.issueId}</p>
`;
});
},
};
});
```

14

content/server/framework/clientside-extensions/reference/api/extension-factories/page.md

@@ -7,3 +7,3 @@ ---

subcategory: api
date: '2020-09-04'
date: '2021-02-18'
---

@@ -49,3 +49,3 @@

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -55,3 +55,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -61,3 +61,3 @@ <td>Defines the location where the page navigation link will be rendered.</td>

<tr>
<td><code>@label*</code></td>
<td><code>@label</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -67,3 +67,3 @@ <td>Defines a label that's going to be used when rendering navigation link. The value can be either a raw string or a property key than will be translated.</td>

<tr>
<td><code>@page-url*</code></td>
<td><code>@page-url</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -76,3 +76,3 @@ <td>

<tr>
<td><code>@page-title*</code></td>
<td><code>@page-title</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -247,5 +247,5 @@ <td>Defines a title of the web page. The value can be either a raw string or a property key than will be translated.</td>

*/
export default PageExtension.factory((container, data: DataPayload) => {
export default PageExtension.factory<DataPayload>((container, data) => {
container.innerHTML = `<p>${data}</p>`; // Outputs <p>Hello World!</p>
});
```

61

content/server/framework/clientside-extensions/reference/api/extension-factories/panel.md

@@ -7,3 +7,3 @@ ---

subcategory: api
date: '2020-09-04'
date: '2021-02-18'
---

@@ -27,8 +27,11 @@

<tr>
<td><code>label*</code></td>
<td><code>string</code></td>
<td>Optionally rendered by the product to describe the panel content. e.g. it may be the label of a tab in a list of tabs, or the text for a header above the panel HTML.</td>
<td><code>weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>onAction*</code></td>
<td><code>onAction</code> <strong>*</strong></td>
<td><code>function</code></td>

@@ -38,3 +41,3 @@ <td>

<p>Method to be called when the product is ready to render the panel. The plugin system will provide an API with lifecycles to render/clean up any current content into a provided container.</p>
<p>Refer to <a href="/server/framework/clientside-extensions/reference/api/panel-api">Panel API</a> documentation for more info.</p>
<p>Refer to <a href="/server/framework/clientside-extensions/reference/api/extension-api/panel-api">Panel API</a> documentation for more info.</p>
</td>

@@ -70,3 +73,3 @@ </tr>

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -76,3 +79,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -82,15 +85,2 @@ <td>Defines the location where the extension will be rendered.</td>

<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td>Defines a label that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@weight</code></td>
<td><code>number</code></td>
<td>
<p>Determines the order in which this extension appears respect to others in the same location.</p>
<p>Extensions are displayed top to bottom or left to right in order of ascending weight.</p>
</td>
</tr>
<tr>
<td><code>@condition</code></td>

@@ -121,3 +111,2 @@ <td><code>string | Conditions</code></td>

return {
label: 'JS Panel',
onAction: panelApi => {

@@ -135,1 +124,29 @@ panelApi

```
### With context definition
```ts
import { PanelExtension } from '@atlassian/clientside-extensions';
interface ExampleContext {
issueId: string;
title: string;
}
/**
* @clientside-extension
* @extension-point reff.plugins-example-location
*/
export default PanelExtension.factory<ExampleContext>((extensionAPI, context) => {
return {
onAction(panelApi) {
panelApi.onMount(container => {
container.innerHTML = `
<h1>${context.title}</h1>
<p>Jira issue id: ${context.issueId}</p>
`;
});
},
};
});
```

2

content/server/framework/clientside-extensions/reference/glossary/index.md

@@ -7,3 +7,3 @@ ---

subcategory: glossary
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

116

content/server/framework/clientside-extensions/reference/webpack-plugin/annotations.md

@@ -7,3 +7,3 @@ ---

subcategory: webpack
date: '2020-09-04'
date: '2021-02-18'
---

@@ -32,3 +32,3 @@

<tr>
<td><code>@clientside-extension*</code></td>
<td><code>@clientside-extension</code> <strong>*</strong></td>
<td><code>-</code></td>

@@ -38,3 +38,3 @@ <td>Indicates that the next function is an extension factory to be consumed by the webpack plugin.</td>

<tr>
<td><code>@extension-point*</code></td>
<td><code>@extension-point</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -44,15 +44,2 @@ <td>Defines the location where the extension will be rendered.</td>

<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td>Defines a label that's going to be used in the XML declaration of an extension.</td>
</tr>
<tr>
<td><code>@link</code></td>
<td><code>string</code></td>
<td>
<p>Defines a URL that's going to be used in the XML declaration of an extension.</p>
<p>Setting a custom link will overwrite the one generated from the <code>@page-url</code> annotation value.</p>
</td>
</tr>
<tr>
<td><code>@weight</code></td>

@@ -80,2 +67,55 @@ <td><code>number</code></td>

## Deprecated annotations
The following annotations should no longer be used
<table>
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="25%" />
</colgroup>
<thead>
<tr class="header">
<th>Name</th>
<th>Type</th>
<th>Deprecated since</th>
<th>Planned removal</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@label</code></td>
<td><code>string</code></td>
<td align="right">2.0</td>
<td align="right">3.0</td>
</tr>
<tr>
<td><code>@link</code></td>
<td><code>string</code></td>
<td align="right">2.0</td>
<td align="right">3.0</td>
</tr>
</tbody>
</table>
Instead of specifying the following as annotations it is recommended to provide these as attributes at runtime:
```ts
import { LinkExtension } from '@atlassian/clientside-extensions';
/**
* @clientside-extension
* @extension-point example.extension.point
* @weight 100
*/
export default LinkExtension.factory(api => {
return {
label: 'My Link-Extension',
url: '/my-link-extension',
};
});
```
### Supported <code>PageExtension</code> annotations

@@ -100,3 +140,3 @@

<tr>
<td><code>@page-url*</code></td>
<td><code>@page-url</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -109,3 +149,3 @@ <td>

<tr>
<td><code>@page-title*</code></td>
<td><code>@page-title</code> <strong>*</strong></td>
<td><code>string</code></td>

@@ -190,21 +230,4 @@ <td>Defines a title of the web page. The value can be either a raw string or a property key than will be translated.</td>

### 3. Specify a label and link
### 3. Using the `page-*` annotations
Both `@label` and `@link` annotations are particularly useful in scenarios where you need that information to be available for
server-side rendered. These annotations will also be converted into attributes when the extension gets rendered on the client.
```ts
import { PanelExtension } from '@atlassian/clientside-extensions';
/**
* @clientside-extension
* @extension-point example.extension.point
* @label "My custom link"
* @link "http://go.atlassian.com/clientside-extensions"
*/
export default PanelExtension.factory(/*...*/);
```
### 4. Using the `page-*` annotations
The `page-*` annotations can be used to create a custom web and render a navigation link in the product UI.

@@ -216,3 +239,2 @@

* @extension-point example.extension.point
* @label "My admin page"
* @page-url /my-admin-page

@@ -230,3 +252,3 @@ * @page-title "My admin page"

<!-- prettier-ignore-start -->
### 5. Using $key keyword
### 4. Using $key keyword
<!-- prettier-ignore-end -->

@@ -238,3 +260,3 @@

```ts
import { PanelExtension } from '@atlassian/clientside-extensions';
import { PageExtension } from '@atlassian/clientside-extensions';

@@ -244,12 +266,14 @@ /**

* @extension-point example.extension.point
* @label "My extension"
* @link "/custom-route?extension=$key"
* @page-url /my-admin-page?q=$key
* @page-title "My admin page"
*/
export default PanelExtension.factory(/*...*/);
export default PageExtension.factory(container => {
container.innerHTML = '<div>Very secure page!</div>';
});
```
### 6. Define a condition
### 5. Define a condition
The `@condition` annotation allows you to define one or multiple conditions that must be satisfied for the extension to be displayed.
These conditions are a web-fragment conditions evaluated in the server, and created with Java.
These conditions are a web-resource conditions evaluated in the server, and created with Java.

@@ -269,3 +293,3 @@ For more information about the condition's usage please refer to the [examples of Web items documentation](https://developer.atlassian.com/server/framework/atlassian-sdk/web-section-plugin-module/#condition-and-conditions-elements) and check the [documentation of `conditionMap` option from `atlassian-webresource-webpack-plugin`](https://www.npmjs.com/package/atlassian-webresource-webpack-plugin#conditionmap-optional).

### 7. Define a condition with parameters
### 6. Define a condition with parameters

@@ -313,3 +337,3 @@ To add parameters to the conditions you can use multiple `@condition` annotations. These parameters will be passed in to the condition's `init()` method as a map of string key/value pairs.

### 8. Defining multiple conditions
### 7. Defining multiple conditions

@@ -316,0 +340,0 @@ You can make use of AND / OR keywords to combine multiple conditions for your extension as follows:

2

content/server/framework/clientside-extensions/reference/webpack-plugin/webpack-plugin.md

@@ -7,3 +7,3 @@ ---

subcategory: webpack
date: '2020-09-04'
date: '2021-02-18'
---

@@ -10,0 +10,0 @@

101

data/clientside-extensions.json

@@ -49,2 +49,29 @@ {

{
"title": "Extension Points",
"name": "extension-points",
"expandAlways": true,
"items": [
{
"title": "Getting started",
"url": "/server/framework/clientside-extensions/guides/extension-points/"
},
{
"title": "1. Creating an extension point",
"url": "/server/framework/clientside-extensions/guides/extension-points/creating-an-extension-point"
},
{
"title": "2. Rendering extensions",
"url": "/server/framework/clientside-extensions/guides/extension-points/rendering-extensions"
},
{
"title": "3. Providing context",
"url": "/server/framework/clientside-extensions/guides/extension-points/providing-context"
},
{
"title": "4. Extension point documentation",
"url": "/server/framework/clientside-extensions/guides/extension-points/extension-point-documentation"
}
]
},
{
"title": "How to",

@@ -61,2 +88,6 @@ "name": "how-to",

"url": "/server/framework/clientside-extensions/guides/how-to/setup-page-bootstrapper"
},
{
"title": "Setup CSE schema-loader",
"url": "/server/framework/clientside-extensions/guides/how-to/setup-schema-loader"
}

@@ -80,3 +111,3 @@ ]

"isGroup": true,
"url": "/server/framework/clientside-extensions/reference/api/extension-factories",
"url": "/server/framework/clientside-extensions/reference/api/extension-factories/",
"groupItems": [

@@ -116,19 +147,45 @@ {

"title": "Extension API",
"url": "/server/framework/clientside-extensions/reference/api/extension-api"
"isGroup": true,
"url": "/server/framework/clientside-extensions/reference/api/extension-api/",
"groupItems": [
{
"title": "Panel API",
"url": "/server/framework/clientside-extensions/reference/api/extension-api/panel-api"
},
{
"title": "AsyncPanel API",
"url": "/server/framework/clientside-extensions/reference/api/extension-api/async-panel-api"
},
{
"title": "Modal API",
"url": "/server/framework/clientside-extensions/reference/api/extension-api/modal-api"
},
{
"title": "Render element as React",
"url": "/server/framework/clientside-extensions/reference/api/extension-api/render-element-as-react"
}
]
},
{
"title": "Panel API",
"url": "/server/framework/clientside-extensions/reference/api/panel-api"
"title": "Extension Points",
"isGroup": true,
"url": "/server/framework/clientside-extensions/reference/api/extension-points/",
"groupItems": [
{
"title": "Schemas",
"url": "/server/framework/clientside-extensions/reference/api/extension-points/schemas"
},
{
"title": "Hooks and Components",
"url": "/server/framework/clientside-extensions/reference/api/extension-points/hooks-and-components"
},
{
"title": "Extension Handlers",
"url": "/server/framework/clientside-extensions/reference/api/extension-points/extension-handlers"
}
]
},
{
"title": "AsyncPanel API",
"url": "/server/framework/clientside-extensions/reference/api/async-panel-api"
},
{
"title": "Modal API",
"url": "/server/framework/clientside-extensions/reference/api/modal-api"
},
{
"title": "Render element as React",
"url": "/server/framework/clientside-extensions/reference/api/render-element-as-react"
"title": "Extension Points v1 (deprecated)",
"url": "/server/framework/clientside-extensions/reference/api/extension-points-v1-deprecated"
}

@@ -177,4 +234,20 @@ ]

"to": "/reference/api/extension-factories/"
},
{
"from": "/reference/api/panel-api/",
"to": "/reference/api/extension-api/panel-api/"
},
{
"from": "/reference/api/async-panel-api/",
"to": "/reference/api/extension-api/async-panel-api/"
},
{
"from": "/reference/api/modal-api/",
"to": "/reference/api/extension-api/modal-api/"
},
{
"from": "/reference/api/render-element-as-react/",
"to": "/reference/api/extension-api/render-element-as-react/"
}
]
}

7

package.json
{
"name": "@atlassian/clientside-extensions-docs",
"version": "1.2.1",
"version": "2.0.0-docs-1",
"description": "Holds the official documentation for Altassian Server client-side extensions API.",

@@ -81,5 +81,4 @@ "license": "BSD-3-Clause",

"optionalDependencies": {
"@atlassian/doc-scripts": "^2.4.0"
},
"gitHead": "4bbfd436c5a3323b602e057796cdbba5a1a9d699"
"@atlassian/doc-scripts": "^2.6.0"
}
}

4

README.md

@@ -7,3 +7,3 @@ # Client-side Extensions Docs

[https://developer.atlassian.com/server/framework/clientside-extensions]()
[https://developer.atlassian.com/server/framework/clientside-extensions](https://developer.atlassian.com/server/framework/clientside-extensions])

@@ -16,3 +16,3 @@ ## Preview

[http://localhost:8080/server/framework/clientside-extensions]()
[http://localhost:8080/server/framework/clientside-extensions](http://localhost:8080/server/framework/clientside-extensions)

@@ -19,0 +19,0 @@ ## Validation

content/server/framework/clientside-extensions/reference/api/async-panel-api.md
content/server/framework/clientside-extensions/reference/api/extension-api.md
content/server/framework/clientside-extensions/reference/api/extension-factories.md
content/server/framework/clientside-extensions/reference/api/modal-api.md
content/server/framework/clientside-extensions/reference/api/panel-api.md
content/server/framework/clientside-extensions/reference/api/render-element-as-react.md
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc