Merge pull request #7385 from dulithsenanayake/tile-feature

Add new images relevant to the API tile enhancement feature

en/docs/consume/collaboration/interact-with-the-community.md

@@ -21,7 +21,7 @@ To rate an API,
 
 2.  Click on a published API.
 
-    [![Select an API]({{base_path}}/assets/img/consume/community-features/apis-select-devportal.png)]({{base_path}}/assets/img/consume/community-features/apis-select-devportal.png)
+    [![Select an API]({{base_path}}/assets/img/consume/community-features/apis-select-devportal-with-business-info.png)]({{base_path}}/assets/img/consume/community-features/apis-select-devportal-with-business-info.png)
 
      The **Overview** page appears.
 
@@ -45,7 +45,7 @@ Let's see how to add a comment and how to reply to a comment:
 
 2. Click on a published API.
 
-    [![Select an API]({{base_path}}/assets/img/consume/community-features/apis-select-devportal.png)]({{base_path}}/assets/img/consume/community-features/apis-select-devportal.png)
+    [![Select an API]({{base_path}}/assets/img/consume/community-features/apis-select-devportal-with-business-info.png)]({{base_path}}/assets/img/consume/community-features/apis-select-devportal-with-business-info.png)
 
 3.  Click **Comments**.
 

en/docs/consume/generating-sdks/generate-sdks-in-dev-portal.md

@@ -12,7 +12,7 @@ Follow the instructions below to generate and download client-side SDKs via the
 
 2. Click on the API for which you want to generate a client-side SDK (e.g., `PizzaShackAPI`).
 
-      [![API Overview]({{base_path}}/assets/img/consume/select-api-dev-portal.png){: style="width:80%"}]({{base_path}}/assets/img/consume/select-api-dev-portal.png)
+      [![API Overview]({{base_path}}/assets/img/consume/select-api-dev-portal-with-business-info.png){: style="width:80%"}]({{base_path}}/assets/img/consume/select-api-dev-portal-with-business-info.png)
 
 3.  Click **SDKs**. 
 

en/docs/consume/manage-subscription/subscribe-to-an-api.md

@@ -18,7 +18,7 @@ The following are the two methods available in the Developer Portal to subscribe
 
 1.  Sign in to the WSO2 API Developer Portal (`https://<hostname>:<port>/devportal`) and click on the API (e.g., `PizzaShackAPI`) to go to the API overview.
 
-     ![[API overview]({{base_path}}/assets/img/learn/select-api-dev-portal.png)]({{base_path}}/assets/img/learn/select-api-dev-portal.png)
+     ![[API overview]({{base_path}}/assets/img/learn/select-api-dev-portal-with-business-info.png)]({{base_path}}/assets/img/learn/select-api-dev-portal-with-business-info.png)
 
 2.  Click **SUBSCRIPTION & KEY GENERATION WIZARD** to start the key generation wizard.
 
@@ -59,7 +59,7 @@ If you already have an existing application, follow the instructions below to su
 
 1.  Sign in to the Developer Portal (`https://<hostname>:<port>/devportal`) and click on the API (e.g., `PizzaShackAPI`) to go to the API overview.
 
-     [![API overview]({{base_path}}/assets/img/learn/select-api-dev-portal.png)]({{base_path}}/assets/img/learn/select-api-dev-portal.png)
+     [![API overview]({{base_path}}/assets/img/learn/select-api-dev-portal-with-business-info.png)]({{base_path}}/assets/img/learn/select-api-dev-portal-with-business-info.png)
 
 2.  Click **SUBSCRIBE TO AN APPLICATION**.
 
@@ -99,7 +99,7 @@ Follow the instructions below to delete the API subscription:
 
 1.  Sign in to the WSO2 API Developer Portal (`https://<hostname>:<port>/devportal`) and click on the API (e.g., `PizzaShackAPI`) for which you need to delete the application subscription.
 
-    [![API Overview]({{base_path}}/assets/img/learn/select-api-dev-portal.png)]({{base_path}}/assets/img/learn/select-api-dev-portal.png)
+    [![API Overview]({{base_path}}/assets/img/learn/select-api-dev-portal-with-business-info.png)]({{base_path}}/assets/img/learn/select-api-dev-portal-with-business-info.png)
 
 2.  Click **Subscriptions**.
 

en/docs/deploy-and-publish/deploy-on-gateway/deploy-api/deploy-through-multiple-api-gateways.md

@@ -113,7 +113,7 @@ Make sure to start instance 1 first before starting the other two instances.
 
 1.  Sign in to the API Publisher in the **first** WSO2 API-M instance and click to edit an API.
 
-    <a href="{{base_path}}/assets/img/learn/pizzashak-api-publisher.png"><img src="{{base_path}}/assets/img/learn/pizzashak-api-publisher.png" title="Pizza Shack Publisher" width="30%" alt="Pizza Shack Publisher"/></a>
+    <a href="{{base_path}}/assets/img/learn/pizzashack-api-publisher-with-business-info.png"><img src="{{base_path}}/assets/img/learn/pizzashack-api-publisher-with-business-info.png" title="Pizza Shack Publisher" width="30%" alt="Pizza Shack Publisher"/></a>
 
 2.  Click **Deployments** and click **Deploy New Revision**.
 
@@ -129,7 +129,7 @@ Make sure to start instance 1 first before starting the other two instances.
 
 4.  Sign in to the Developer Portal (of the **first** instance) and click on the respective API to open it.
 
-    <a href="{{base_path}}/assets/img/learn/pizzashack-api-devportal.png"><img src="{{base_path}}/assets/img/learn/pizzashack-api-devportal.png" title="Dev Portal Pizza Shack" width="30%" alt="Dev Portal Pizza Shack"/></a>
+    <a href="{{base_path}}/assets/img/learn/pizzashack-api-devportal-with-business-info.png"><img src="{{base_path}}/assets/img/learn/pizzashack-api-devportal-with-business-info.png" title="Dev Portal Pizza Shack" width="30%" alt="Dev Portal Pizza Shack"/></a>
 
     In the **Overview** tab that corresponds to the API, note that it has two sets of URLs for the two Gateway instances:
 

en/docs/deploy-and-publish/publish-on-dev-portal/publish-an-api.md

@@ -12,6 +12,21 @@ Follow the steps below to publish an API using WSO2 API Manager.
 
      <img src="{{base_path}}/assets/img/learn/select-created-api.png" alt="Select API" title="Select API" width="35%" />
 
+    !!! note
+         - Note that enhancing the API's visibility, as illustrated below, allows you to provide additional business-related information and indicate the monetization status on the API tile.
+         - You can set the below pre defined configs to be true in the ```<APIM_HOME>/repository/deployment/server/webapps/publisher/site/public/conf/settings.json``` file for Publisher Portal and ```<APIM_HOME>/repository/deployment/server/webapps/devportal/site/public/theme/settings.json``` file for Developer Portal as below.
+         ```
+         "tileDisplayInfo": {
+             "showMonetizedState": true,
+             "showBusinessDetails": true,
+             "showTechnicalDetails": true
+         }
+         ```
+          <img src="{{base_path}}/assets/img/learn/select-created-api-with-business-info.png" alt="Select API" title="Select API" width="35%" />
+         - If you have added a **Business Owner Email** or **Technical Owner Email**, they will be displayed in the API tile when you hover over the **Business Owner** or **Technical Owner** details.
+         - If you are setting the **showMonetizedState** config to be true, monetization icon will be displayed in the API tile as below once you [enabled the monetization](https://apim.docs.wso2.com/en/latest/design/api-monetization/monetizing-an-api/#step-2-enable-monetization) for the API. In order to enable monetization for the API, you need to publish the API.  
+         <img src="{{base_path}}/assets/img/learn/select-created-api-with-monetization.png" alt="Select API" title="Select API" width="35%" />
+
 3.  Click **Lifecycle**.
 
      [![Lifecycle tab]({{base_path}}/assets/img/learn/lifecycle-tab.png)]({{base_path}}/assets/img/learn/lifecycle-tab.png)

en/docs/deploy-and-publish/publish-on-dev-portal/third-party-api-support.md

@@ -35,7 +35,7 @@ Listed below are the fields available when adding third-party API details to the
 You can see an indicator added to the API thumbnail in the API Publisher Portal to distinguish whether an API is from a third-party, as shown below.
 
 
-<a href="{{base_path}}/assets/img/develop/third-party-tag.png"><img src="{{base_path}}/assets/img/develop/third-party-tag.png" width="20%"></a>
+<a href="{{base_path}}/assets/img/develop/third-party-tag-with-business-info.png"><img src="{{base_path}}/assets/img/develop/third-party-tag-with-business-info.png" width="20%"></a>
 
 You can use the new default property `thirdParty` to search for APIs that are from a third-party.
 

en/docs/design/api-collaborations/comment-on-an-api-via-the-publisher.md

@@ -14,7 +14,7 @@ Follow the instructions below to comment and reply to an API:
 
 2. Click on an API.
 
-    [![Select an API]({{base_path}}/assets/img/learn/select-api.png)]({{base_path}}/assets/img/learn/select-api.png)
+    [![Select an API]({{base_path}}/assets/img/learn/select-api-with-business-info.png)]({{base_path}}/assets/img/learn/select-api-with-business-info.png)
 
 3. Optionally, **Add a comment**.
 

en/docs/design/api-documentation/add-api-documentation.md

@@ -17,7 +17,7 @@ Follow the instructions below to add documentation to an API:
 
 2. Click on the API (e.g., `PizzaShackAPI 1.0.0` ) for which you want to add the documentation.
 
-    [![Select API in API Publisher]({{base_path}}/assets/img/learn/select-api.png){: style="width:30%"}]({{base_path}}/assets/img/learn/select-api.png)
+    [![Select API in API Publisher]({{base_path}}/assets/img/learn/select-api-with-business-info.png){: style="width:30%"}]({{base_path}}/assets/img/learn/select-api-with-business-info.png)
 
 3. Add the specific documentation.
 
@@ -192,7 +192,7 @@ Follow the instructions below to add documentation to an API:
 
      `https://<hostname>:9443/devportal`
 
-     [![API in Developer Portal]({{base_path}}/assets/img/learn/view-docs-devportal.png){: style="width:70%"}]({{base_path}}/assets/img/learn/view-docs-devportal.png)
+     [![API in Developer Portal]({{base_path}}/assets/img/learn/view-docs-devportal-with-business-info.png){: style="width:70%"}]({{base_path}}/assets/img/learn/view-docs-devportal-with-business-info.png)
 
 5. Click **Documents**.
 

en/docs/design/api-documentation/view-generated-documentation.md

@@ -9,7 +9,7 @@ This feature does not support other API types.
 
 2.  Click on the API (e.g., `PizzaShackAPI 1.0.0` ) for which you want to view the documentation.
 
-    [![Select API in API Publisher]({{base_path}}/assets/img/learn/select-api.png){: style="width:30%"}]({{base_path}}/assets/img/learn/select-api.png)
+    [![Select API in API Publisher]({{base_path}}/assets/img/learn/select-api-with-business-info.png){: style="width:30%"}]({{base_path}}/assets/img/learn/select-api-with-business-info.png)
 
 3. View the generated documentation.
 

en/docs/design/lifecycle-management/api-lifecycle.md

@@ -27,7 +27,7 @@ Follow the instructions below to manage the API lifecycle appropriately:
 
 2.  Click on the API for which you need to change its lifecycle state.
 
-     <a href="{{base_path}}/assets/img/learn/select-created-api.png" ><img src="{{base_path}}/assets/img/learn/select-created-api.png" alt="Select API" title="Select API" width="40%" /></a>
+     <a href="{{base_path}}/assets/img/learn/select-created-api-with-business-info.png" ><img src="{{base_path}}/assets/img/learn/select-created-api-with-business-info.png" alt="Select API" title="Select API" width="40%" /></a>
 
 3.  Click **Lifecycle**.
 

en/docs/design/rate-limiting/setting-maximum-backend-throughput-limits.md

@@ -10,7 +10,7 @@ Follow the instructions below to set a maximum backend throughput for a given AP
 
 2.  Click on the API for which you want to set the maximum backend throughput.
 
-    [![Select API]({{base_path}}/assets/img/learn/select-api.png){: style="width:30%"}]({{base_path}}/assets/img/learn/select-api.png)
+    [![Select API]({{base_path}}/assets/img/learn/select-api-with-business-info.png){: style="width:30%"}]({{base_path}}/assets/img/learn/select-api-with-business-info.png)
 
 3.  Navigate to **API Configurations** and click **Runtime**.
 

en/requirements.txt

@@ -10,4 +10,4 @@ mkdocs-material==4.5.1
 markdown-include==0.5.1
 markdown==3.1
 mkdocs-redirects==1.0.0
-mkdocs-exclude==1.0.2
+mkdocs-exclude==1.0.2