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

Comparing version 0.4.0-1 to 0.4.0-2

content/server/framework/clientside-extensions/guides/introduction/.DS_Store

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

		---
		title: Creating a Modal - Client-side Extensions
		title: Creating a modal - Client-side Extensions
		platform: server
		@@ -7,3 +7,3 @@ product: clientside-extensions
		subcategory: introduction
		date: '2020-02-28'
		date: '2020-03-06'
		---
		@@ -17,16 +17,14 @@

		Modals can be complicated to create since generally, you will need to use an external library to create them and then
		modify its design to match the design of the product you are targeting.
		Modals can be complicated to create since generally you'll need to use an external library, and then modify its design to match the product you're creating the modals for.

		Client-side Extensions (CSE) provides a type of extension called Modal that will take care of creating a modal dialog that
		works well with the product you're targeting, and let you focus on your feature instead.
		With Client-side Extensions (CSE), you can use an extension type called Modal that lets you create a modal dialog that works well with your product, and you can focus on your feature instead.

		## Modal extension

		To create a modal extension you need to make use of the `ModalExtension` factory. CSE runtime will then make use of your
		`onAction` method to inject a [Modal API](/server/framework/clientside-extensions/reference/api/modal-api/) object when the
		modal is ready for you to render your content in it.
		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 render the content in.

		{{% note %}}
		Remember that the `onAction` method behaves differently for each type of extension. Make sure to check the [extension API reference](/server/framework/clientside-extensions/reference/api/extension-factory/) for more details.
		Remember that the `onAction` method behaves differently for each extension type. For more info, see [extension API reference](/server/framework/clientside-extensions/reference/api/extension-factory/).
		{{% /note %}}
		@@ -38,13 +36,13 @@

		One of the modal specific APIs is `setTitle` which allows you to specify a title in the modal header.
		One of the modal specific APIs is `setTitle` that allows you to specify a title in the modal header.

		### Create a modal extension for the pull request diff toolbar

		You're now going to create a modal extension that opens when a button in the pull request diff toolbar is clicked.
		You're now going to create a modal extension that opens after clicking a button in the pull request `diff` toolbar.

		In the `/src/my-app/extensions/first-extension.js` file:

		1. Use the diff toolbar extension point: `bitbucket.ui.pullrequest.diff.toolbar`.
		1. Use the `diff` toolbar extension point: `bitbucket.ui.pullrequest.diff.toolbar`.
		2. Use the label attribute to add a text to the button that will open your modal.
		3. Import `ModalExtension` from `@atlassian/clientside-extensions` and use its factory to create a modal extension.
		3. Import `ModalExtension` from `@atlassian/clientside-extensions`, and use its factory to create a modal extension.
		4. Use the `onAction` to get a modal API object.
		@@ -89,8 +87,7 @@ 5. Use the modal API to set a title.

		You can also close the modal using `closeModal` in case you can to do so after executing an action.
		You can also close the modal after executing an action by using `closeModal`.

		### Adding action buttons to your modal
		### Add action buttons to your modal

		Modify your modal extension to have a pair of actions. One of them should modify your modal content, and the other one should
		close the modal when clicked.
		Modify your modal extension to have a pair of actions. One of them should modify your modal content, and the other close the modal when clicked.

		@@ -100,4 +97,4 @@ In the `/src/my-app/extensions/first-extension.js` file:
		1. Define two actions for your modal using `setActions`.
		2. One of your actions should keep count of the times it's been clicked, and show it in the modal content.
		3. One of your actions should close the modal dialog when clicked.
		2. The first action should keep count of the times it's been clicked, and show it in the modal content.
		3. The second action should close the modal dialog when clicked.

		@@ -151,10 +148,9 @@ ```js

		## Custom content with React
		## Using custom content with React

		CSE provides an utility to make it easier to use react with modal extensions. Check the reference for [rendering elements as react](/server/framework/clientside-extensions/reference/api/render-element-as-react/)
		to learn how to use it.
		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/).

		## Recap

		Now you've learned:
		You've learned:

		@@ -161,0 +157,0 @@ - How to use a modal created by CSE and render your feature in it.

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

		---
		title: Custom HTML Content - Client-side Extensions
		title: Custom HTML content - Client-side Extensions
		platform: server
		@@ -7,6 +7,6 @@ product: clientside-extensions
		subcategory: introduction
		date: '2020-02-28'
		date: '2020-03-06'
		---

		# Custom HTML Content
		# Custom HTML content

		@@ -23,12 +23,12 @@ {{% note %}}

		So far, your extension has been rendered entirely by the product, and you've only been able to modify some aspects of it via attributes.
		But sometimes your extension might be more than a button or a link, and you would like to render your own content.
		So far, your extension has been rendered entirely by the product, and you've only been able to modify some of its aspects via attributes.
		But, sometimes your extension might be more than a button or a link, and you would like to render your own content.

		For those cases, Client-side Extensions (CSE) provides an extension type called Panel.

		In case of panel extensions, CSE executes the `onAction` method when is 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/panel-api/)
		object that you can use to render your content.

		{{% note %}}
		Remember that the `onAction` method behaves differently for each type of extension. Make sure to check the [extension API reference](/server/framework/clientside-extensions/reference/api/extension-factory/) for more details.
		Remember that the `onAction` method behaves differently for each type of extension. For more info, see [Extension API reference](/server/framework/clientside-extensions/reference/api/extension-factory/).
		{{% /note %}}
		@@ -38,8 +38,7 @@

		Bitbucket only provides an extension point that supports panels in pull request, and it is in the comments of a diff. So
		for this section, you need to add a comment to the diff of your pull request as follows:
		Bitbucket provides an extension points that supports panels only inside a pull request, in the comments section of a `diff`. To continue, you'll need to add a comment to the `diff` of your pull request:

		1. Go to the diff page by clicking the "Diff" tab.
		2. Click the "Add comment to this file" button in the toolbar of the diff editor.
		3. Write a comment and click the "Comment" button to save it.
		1. In your pull request, open the Diff tab.
		2. In the toolbar, click Add comment to this file.
		3. Write a comment and save it.

		@@ -50,5 +49,5 @@ ## onMount

		### Adding a panel extension and rendering your content
		### Add a panel extension and render your content

		After creating a comment in the diff section, change your extension to be a panel and use the `onMount` method as follows.
		After creating a comment in the `diff` section, change your extension to be a panel, and then use the `onMount` method as follows.

		@@ -85,12 +84,12 @@ In the `/src/my-app/extensions/first-extension.js` file:

		Refresh your pull request diff page and you should see your content rendered in the bottom part of the comment.
		After refreshing the `diff` page, you should see the content rendered in the bottom part of the comment.

		## onUnmount

		You can use `onUnmount` to specify clean-up code you want to run when your panel is about to be destroyed or re-rendered.
		You can use `onUnmount` to specify the cleanup code you'd like to run when your panel is about to be destroyed or re-rendered.

		### Unmount when your content is destroyed
		### Unmount after your content is destroyed

		Using the same example with intervals, create an extension that updates its content every 3 seconds and clears the
		interval when you navigate out of the page.
		interval after you navigate away from the page.

		@@ -141,3 +140,3 @@ In the `/src/my-app/extensions/first-extension.js` file:

		Refresh your pull request diff page and check that the content of your panel is updated every 3 seconds. Now, navigate to
		Refresh the `diff` page and check that the content of your panel is updated every 3 seconds. Now, navigate to
		the commits page and check that the interval is cleared and no longer running.
		@@ -147,9 +146,8 @@

		CSE provides an utility to make it easier to use react with panel extensions. Check the reference for [rendering elements as react](/server/framework/clientside-extensions/reference/api/render-element-as-react/)
		to learn how to use it.
		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/).

		## Recap and next steps

		Now you've familiarized with the APIs available to create extensions that render your own content.
		You've learned how to use the APIs available to create extensions that render your content.

		Next, you will learn how to [create modals](/server/framework/clientside-extensions/guides/introduction/creating-a-modal)
		Next, you'll learn how to [create modals](/server/framework/clientside-extensions/guides/introduction/creating-a-modal).

package.json

		{
		"name": "@atlassian/clientside-extensions-docs",
		"version": "0.4.0-1",
		"version": "0.4.0-2",
		"description": "Holds the official documentation for Altassian Server client-side extensions API.",
		@@ -5,0 +5,0 @@ "license": "BSD-3-Clause",

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

Improved metrics

Worsened metrics