Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: edit extensions documentation to include outbound/internal calls #1878

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 103 additions & 25 deletions docs/console/company-configuration/extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ title: Manage Extensions
sidebar_label: Manage Extensions
---

Extensions allow expanding Console capabilities by adding custom pages to the sidebar navigation. This allows you to provide users with new pages tailored to your Company's needs or integrate external tools with a seamless experience within the product.
Extensions allow expanding Console capabilities by adding custom pages to the sidebar navigation.
This allows you to provide users with new pages tailored to your Company's needs or integrate external tools with a seamless experience within the product.

## Extension Manager

Expand All @@ -19,38 +20,40 @@ Moreover, extensions are **only accessible within the Company** they are registe

There are different extension types supported:

- iframe: allows you to embed web pages in Console using an `<iframe>` tag
- External link: these extensions will be shown as menu items in the sidebar but opened in a new window on click
- Composer page: allows you to compose a web page by means of a [`micro-lc`](https://micro-lc.io/) configuration
- _iframe_: allows you to embed web pages in Console using an `<iframe>` tag
- _External link_: these extensions will be shown as menu items in the sidebar but opened in a new window on click
- _Create with Composer_: allows you to compose a web page by means of a [`micro-lc`](https://micro-lc.io/) configuration

:::tip
Embedding a web app as an *iframe* extension may require additional configurations,
Embedding a web app as an _iframe_ extension may require additional configurations,
such as making sure `x-frame-options` header or the `frame-ancestors` Content Security Policy are properly configured
:::

## Add new Extension

You can add a new extension to your Company at any moment; creating an extension requires the following configurations to be set:

- **Extension name** (*required*): the name for your extension
- **Destination Area** (*required*): the area in Console where your extension menu item will be placed
- **Category** (*required*): the menu category that will contain the extension menu item
- **Extension name** (_required_): the name for your extension
- **Destination Area** (_required_): the area in Console where your extension menu item will be placed
- **Category** (_required_): the menu category that will contain the extension menu item

:::info
The available **Category** options depend on the selected **Destination Area**.
:::
- **Entry URL** (*required for iframe and External link extensions*): the URL of the web page that will be displayed when accessing your extension (This will be embedded inside an iframe or opened in a new window depending on the extension type)
- **Template**: A `micro-lc` configuration you might want to initialize your extension with. Available only for Composer page extensions.

- **Entry URL** (_required for iframe and External link extensions only_): the URL of the web page that will be displayed when accessing your extension (This will be embedded inside an iframe or opened in a new window depending on the extension type)
- **Template** (_required for Composer extensions only_): A `micro-lc` configuration you might want to initialize your extension with.
- **Visibility**: You might want to make your extension visible on the whole Company, or maybe just on a few Projects. This field lets you set the contexts in which you want to make your extension visible. If nothing is checked, the extension will be inactive.

:::info
When the *Company Overview* destination area is selected, the only available **Visibility** option will be the *Whole Company*.
When the _Company Overview_ destination area is selected, the only available **Visibility** option will be the _Whole Company_.
:::

![create extension modal](./img/extensions/create-extension-modal.png)
![visibility creating extension](./img/extensions/visibility-creating-extension.png)

After creating the extension as shown in the example above, you can refresh the page and verify that the extension has been added to the sidebar and is accessible.
After clicking on _Add extension_, the extension will be automatically created and activated and it can be accessible right away:
if it has been configured to be visible on the Company page, it will be automatically shown in the sidebar. A click on the link will open the extension page.

![new extension preview](./img/extensions/new-extension-preview.png)

Expand All @@ -68,35 +71,110 @@ On this page, you can:

## Extension Detail
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it is ok to remove the sections Extension Info, Extension Location and Extension Visibility, given the little amount of information included in these paragraphs, and group them in just one section.

The UI however includes a link to each of the three cards related to the aforementioned sections of the documentation. These card are in the same page.

I wonder if it is better to maintain the previous approach (multiple paragraph) in order to have a more consistent UI, or to keep going with the approach suggested in this PR.


The extension detail page allows you to view the main information that characterizes the registered extension, which can also be modified through the corresponding *Edit* buttons.
The extension detail page allows you to view the main information that characterizes the registered extension, which can also be modified through the corresponding _Edit_ buttons.

![extension detail](./img/extensions/extension-detail.png)

### Extension Info
It includes several cards to provide information about the extension, such as:

- **Extension Info**: contains the identifying information for the extension, such as name and entry URL
- **Extension Location**: contains the information related to the positioning of the extension menu item within the Console;
- **Extension Visibility**: contains the information related to the visibility of the extension menu item within the Console;

The *Extension Info* card contains the identifying information for the extension, where only the name and entry URL can be edited.
In each card, you can also find the _Edit_ button, which allows you to modify the information contained in the card.

![edit extension info](./img/extensions/edit-extension-info.png)
:::info
Just as during creation, Visibility is tied to the Destination Area set for the extension.
For example, if the Destination Area is set to _Company Overview_, the only available visibility option will be _Whole Company_.
:::

### Extension Configuration

If the current extension is of type Composer page, the badge will display the *Edit page with MFE Composer* button which brings the user to a page where it can edit the extension's `micro-lc` configuration.
If the current extension is of type Composer page, the badge will display the _Edit page with Composer_ button which brings the user to a page where it can edit the extension's `micro-lc` configuration.

![edit extension configuration](./img/extensions/edit-extension-configuration.png)

### Extension Location
## Extension Communication with APIs

The *Extension Location* card contains the information related to the positioning of the extension menu item within the Console; these details are fully editable.
:::info
This section is only available for extensions of type _Composer_.
:::

![edit extension destination](./img/extensions/edit-extension-destination.png)
It is also possible to configure the extension to communicate with other external APIs, as well with the Mia-Platform supported APIs.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wish to add a link to a comprehensible list of APIs here. I don't know if there's one yet, any suggestion on how better rephrase this to emphasize the concept of internal APIs would be greatly appreciated.

This could be useful for use cases such as retrieving data from an external backend to be shown in a UI created with the Composer.

### Extension Visibility
This configuration is possible in the detail page of the extension that, for _Composer_ extensions only, will include two tabs over the _General_ tab:
the _Outbound calls_ tab and the _Internal calls_ tab.

The *Extension Visibility* card shows in which contexts the extension is active and visible.
### Outbound calls

![edit extension visibility](./img/extensions/edit-extension-visibility.png)
This tab allows you to configure the extension to communicate with other external APIs, by allowing to define a base URL to be called.
It is also possible to define how to authenticate to the URL by including endpoint and the needed information for authentication.

:::info
Just as during creation, Visibility is tied to the Destination Area set for the extension.
For example, if the Destination Area is set to *Company Overview*, the only available visibility option will be *Whole Company*.
While it is possible to call multiple endpoints with the same base URL, it is possible to configure one outbound call for each extension.
ThisIsDemetrio marked this conversation as resolved.
Show resolved Hide resolved

If you need to call multiple endpoints with different urls, you can create multiple extensions.
ThisIsDemetrio marked this conversation as resolved.
Show resolved Hide resolved
:::

When accessing to the _Outbound calls_ tab, if it has not been configured yet, an empty page with the button _Setup outbound calls_ will be shown.
Clicking this button will open a modal where you can configure the outbound call.

![Create a new outbound call](./img/extensions/extension-outbound-calls-create.png)

The _Destination URL_ field is required and it is the base URL to be called.
ThisIsDemetrio marked this conversation as resolved.
Show resolved Hide resolved
If you need to authenticate to this URL, keep the _Authentication required_ switch activated, then fill the _Authentication endpoint_ field with the endpoint to be called for authentication.

The _Authentication type_ field will allow to select the type of authentication to be used. Currently supported are:

- _Client credentials_ with Client ID and Client Secret
- _Basic_ with Username and Password

Once one of the available options is selected, below there will be the fields to fill in order to complete the authentication configuration, before to finally save with the _Save Changes_ button.
ThisIsDemetrio marked this conversation as resolved.
Show resolved Hide resolved

![Details of a configured outbound call](./img/extensions/extension-outbound-calls-detail.png)

After the creation, the outbound call configured will be shown in the page.
Details will include the name of the URL to call and the authentication type used with some useful information.
On the right side of the page there are menus to either update or delete the base URL, and change the credentials of the authentication.

In the configuration page there will also be an URL next to the _Base URL to contact your APIs_ label. This URL is the one to be used to access the APIs from your endpoint.
In fact, for security reasons, the URL to be called is not the destination URL itself, but a different one that is the one that will be used to access the APIs
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How can I rephrase this to better explain the security reasons behind the choice to use a Proxy instead of using the Destination URL itself?

through the Mia-Platform [HTTP Proxy Manager](/runtime_suite/http-proxy-manager/10_overview.md) that is already configured to handle the communication with the APIs.

### Internal calls

The _Internal calls_ tab allows you to configure the extension to communicate with the Mia-Platform APIs,
using [Service Accounts](/development_suite/identity-and-access-management/manage-service-accounts.md) to leverage machine-to-machine communication.

:::info
Similarly to the Outbound calls, it is possible to configure only one service account for each extension.
:::

You can create the Service Account associated to this extension in the _Internal calls_ tab of the extension detail page, clicking the _Create service account_.

![Create a new service account](./img/extensions/extension-internal-calls-create.png)

The _Service account name_ field is required and it is the name of the service account to be created. It is used to identify the service account in the page,
as well in the [Service Account page](/development_suite/identity-and-access-management/manage-service-accounts.md#managing-company-service-accounts)
and the [Identities (IAM) page](/development_suite/identity-and-access-management/manage-identities.md#managing-company-identities).

The _Authentication method_ field is required and could be either:

- via _Client Secret_, by including Client ID and Client Secret in the Authorization header of the request
- via _JWT_, by including the JWT token in the authentication request

:::info
You can read more about authentication methods of Service Accounts in the [dedicated page](/development_suite/identity-and-access-management/manage-service-accounts.md#service-account-authentication)
:::

As usual when creating a Service Account, the Client ID and the Client Secret will be shown in the modal as a feedback of successful creation.
You will need to store them in a secure place, as they will be needed to authenticate the requests to the APIs.

When the Service Account is created, it will be shown in the _Internal calls_ tab of the extension detail page.
A menu on the right side of the page will allow to remove the link between the Service Account and the extension, in case communication with the APIS is not needed anymore.

:::info
When removing the Service Account from the extension page, you can also delete the Service Account itself, in case it is not needed anymore,
by ensuring that the _Also delete the service account_ flag is activated.
:::
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading