[version-4-0] chore: PAC-938-packs data initial fetch and component development for…

.eslintrc.js

@@ -1,12 +1,6 @@
 module.exports = {
-  env: {
-    browser: true,
-    es2015: true,
-    node: true,
-  },
-  settings: {
-    "import/resolver": "webpack",
-  },
+  env: { browser: true, es2015: true, node: true },
+  settings: { "import/resolver": "webpack", react: { version: "detect" } },
   extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
   overrides: [
     {

.github/workflows/dependabot.yaml

@@ -16,12 +16,12 @@ env:
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_SECRET_KEY }}
   AWS_DEFAULT_REGION: us-east-1
   APPZI_TOKEN: ${{ secrets.APPZI_TOKEN }}
-  MENDABLE_API_KEY: ${{ secrets.MENDABLE_API_KEY }}
   FULLSTORY_ORGID: ${{ secrets.FULLSTORY_ORGID }}
   ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 jobs:
   dependabot_build:

.github/workflows/nightly-docker-build.yaml

@@ -13,6 +13,7 @@ env:
   ALGOLIA_APP_ID: "123456789"
   ALGOLIA_SEARCH_KEY: "123456789"
   ALGOLIA_INDEX_NAME: "madeup-index"
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 jobs:
   build:

.github/workflows/pull_request.yaml

@@ -20,6 +20,7 @@ env:
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 jobs:
   run-ci:

.github/workflows/release-branch-pr.yaml

@@ -17,6 +17,7 @@ env:
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
   GITHUB_BRANCH: ${{ github.ref_name }} 
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 
 concurrency:

.github/workflows/release-preview.yaml

@@ -11,12 +11,12 @@ env:
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_SECRET_KEY }}
   AWS_DEFAULT_REGION: us-east-1
   APPZI_TOKEN: ${{ secrets.APPZI_TOKEN }}
-  MENDABLE_API_KEY: ${{ secrets.MENDABLE_API_KEY }}
   FULLSTORY_ORGID: ${{ secrets.FULLSTORY_ORGID }}
   ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 
 concurrency:

.github/workflows/release.yaml

@@ -20,12 +20,12 @@ env:
   AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_SECRET_KEY }}
   AWS_DEFAULT_REGION: us-east-1
   APPZI_TOKEN: ${{ secrets.APPZI_TOKEN }}
-  MENDABLE_API_KEY: ${{ secrets.MENDABLE_API_KEY }}
   FULLSTORY_ORGID: ${{ secrets.FULLSTORY_ORGID }}
   ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 
 concurrency:

.github/workflows/screenshot_capture.yaml

@@ -20,6 +20,7 @@ env:
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_KEY: ${{ secrets.ALGOLIA_SEARCH_KEY }}
   ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME }}
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
 
 
 jobs:

.github/workflows/visual-comparison.yaml

@@ -9,7 +9,7 @@ on:
 
 env:
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  MENDABLE_API_KEY: ${{ secrets.MENDABLE_API_KEY }}
+  PALETTE_API_KEY: ${{ secrets.PALETTE_API_KEY }}
   FULLSTORY_ORGID: ${{ secrets.FULLSTORY_ORGID }}
   ALGOLIA_ADMIN_KEY: ${{ secrets.ALGOLIA_ADMIN_KEY }}
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}

.gitignore

@@ -63,6 +63,9 @@ test-results/
 playwright-report/
 artifact.zip
 
+# Netlify
+.netlify/
+
 # Ignore _partials/index.ts
 _partials/index.ts
 
@@ -73,4 +76,4 @@ static/img/packs
 .vale-config/
 vale/styles/spectrocloud/
 vale/styles/spectrocloud-docs-internal/
-vale/styles/config/vocabularies/spectrocloud-vocab
+vale/styles/config/vocabularies/spectrocloud-vocab

.gitleaksignore

@@ -15,6 +15,7 @@ d748cceb3859df5c354b96a0c3d115513f6c123e:docs/docs-content/devx/apps/deploy-app.
 404219eb2cad1fbd5e03d64783b1db285c8e08b3:docs/docs-content/integrations/portworx_operator.md:private-key:613
 504642da118b99f12e838c6ff9a1166cc8fcff61:docs/docs-content/integrations/portworx_operator.md:private-key:309
 86b8971f386ee3b00d2558a7fd6029f312b335cf:docs/docs-content/integrations/portworx.md:private-key:269
+1058de28bdc307a7b9a80ba6f1c26d2165d43414:docs/deprecated/integrations/portworx.md:private-key:263
 feaea7ee07b76653233cf4ff8376953bfb216c8d:docs/docs-content/integrations/ubuntu.md:generic-api-key:65
 261324e61a4dd4a3da73c8c03f45d3fcca826817:packages/docs/content/clusters/cluster-management/cluster-rbac.md:generic-api-key:112
 261324e61a4dd4a3da73c8c03f45d3fcca826817:packages/docs/content/clusters/cluster-management/cluster-rbac.md:generic-api-key:113
@@ -135,3 +136,4 @@ e4040084011d4d7935a589959b96ebc5cfba7a94:docs/docs-content/integrations/kubernet
 969ac609f82bacb36093c429adfc096c5a97e10f:docs/docs-content/tutorials/cluster-deployment/pde/deploy-app.md:generic-api-key:1195
 969ac609f82bacb36093c429adfc096c5a97e10f:docs/docs-content/tutorials/cluster-deployment/pde/deploy-app.md:generic-api-key:1232
 969ac609f82bacb36093c429adfc096c5a97e10f:docs/docs-content/tutorials/edge/deploy-cluster.md:generic-api-key:240
+3596618091e5eea65c8d1d2ac21f2c6552d3705f:docs/docs-content/integrations/kubernetes.md:generic-api-key:1005

.prettierignore

@@ -11,7 +11,7 @@ docs/api-content/**/*.json
 
 # Troublesome files
 tsconfig.json
-src/components/IconMapper/dynamicFontAwesomeImports.js
+src/components/IconMapper/dynamicFontAwesomeImports.*
 docs/docs-content/security-bulletins/cve-reports.md
 
 # Ignore partials

Makefile

@@ -32,12 +32,21 @@ deep-clean: ## Clean all artifacts
 	rm -rf node_modules build public .cache .docusaurus
 	npm run clear && npm run clean-api-docs
 	docker image rm $(IMAGE) || echo "No image exists."
+	rm -rfv static/img/packs
+
+clean-logos: ## Clean logos
+	rm -rf static/img/packs
 
 clean-versions: ## Clean Docusarus content versions
 	@echo "cleaning versions"
 	rm -rf api_versions.json versions.json versioned_docs versioned_sidebars api_versioned_sidebars api_versioned_docs versioned_partials
 	git checkout -- docusaurus.config.js static/robots.txt
 
+
+clean-packs: ## Clean supplemental packs and pack images
+	rm -rf static/img/packs
+	rm -rf .docusaurus/packs-integrations/api_pack_response.json
+
 clean-api: ## Clean API docs
 	@echo "cleaning api docs"
 	npm run clean-api-docs

README.md

@@ -89,8 +89,13 @@ required environment variables. The values are not important for local developme
 ALGOLIA_APP_ID=1234567890
 ALGOLIA_SEARCH_KEY=1234567890
 ALGOLIA_INDEX_NAME=spectrocloud
+PALETTE_API_KEY=""
 ```
 
+> [!IMPORTANT] You need a Palette API key to start the local development server. Refer to the
+> [Create API Key](https://docs.spectrocloud.com/user-management/authentication/api-key/create-api-key/) guide to learn
+> how to create a Palette API key.
+
 ## Documentation Content
 
 Create a branch to keep track of all your changes.
@@ -626,7 +631,8 @@ To add tutorials to an existing category, create a new **.md** file in the respe
 This is a custom component that allows you to create and use Docusaurus'
 [Import Markdown](https://docusaurus.io/docs/markdown-features/react#importing-markdown) functionality.
 
-> [!IMPORTANT]  
+> [!IMPORTANT]
+>
 > Docusaurus does not provide the ability to dynamically configure table of contents. See
 > [this issue](https://github.com/facebook/docusaurus/issues/6201) for more information. This means that you should
 > avoid adding headings to partials that you intend to use with the Partials Component.
@@ -690,6 +696,124 @@ This is a <VersionedLink text="Internal Link" url="/getting-started/additional-c
 The path of the link should be the path of the destination file from the root directory, without any back operators
 `..`. External links can be referenced as usual.
 
+## Packs Component
+
+The packs component is a custom component that displays all packs available in Palette SaaS by querying the Palette API
+at `api.spectrocloud.com`. The component is powered by a [custom plugin](./plugins/packs-integrations.js) that fetches
+the data before a build or a local development server start.
+
+> [!NOTE]
+>
+> The data is stored in the file `.docusarus/packs-integration/api_pack_response.json` once all the packs are fetched.
+> The logos are stored in `static/img/packs/`. If you remove the `.docusarus` folder, the plugin will fetch the packs
+> again. If the pack's data is present, the plugin will skip re-downloading the data. If you want to remove the packs
+> data and trigger a new fetch, you can issue the following command `make clean-packs`.
+
+Pack descriptions are stored in a JSON file maintained by the documentation team. The JSON file is located at
+[`/static/packs-data/packs_information.json`](./static/packs-data/packs_information.json). To add an entry for a new
+pack, add the following JSON object to the file.
+
+```json
+{
+  "name": "insert the name of the pack. DO NOT USE THE DISPLAY NAME",
+  "description": "insert description here"
+}
+```
+
+Some things to keep in mind related to descriptions. If the local development server is active and you make changes to
+the `/static/packs-data/packs_information.json`file, the changes will not be reflected in the pack component. You must
+stop and restart the local development server to observe the changes. The same applies to the build process. Another
+thing to remember is to reference a pack by the name used in the Palette API, not the display name. You can find the
+pack's name in the description component or by looking at the URL of the pack's page.
+
+#### Exluding Packs
+
+You can specify a list of packs to exclude from the packs component. To exclude a pack, add the pack name to the
+[exclude_packs.json](./static/packs-data/exclude_packs.json) file.
+
+<!-- prettier-ignore -->
+```json
+[
+  "palette-upgrader", 
+  "csi-aws-new", 
+  "inser-pack-name-here"
+]
+```
+
+Excluded packs are not displayed in the packs component.
+
+#### README Content
+
+The pack component will display a Pack's README file if it exists. The README content comes from the Palette API.
+Depending on the available content, the packs component will display the README content, the additional details content,
+or a message indicating that no content is available. Refer to the table below for the different scenarios.
+
+| README Available | Additional Details File Available | Content Displayed                                        |
+| ---------------- | --------------------------------- | -------------------------------------------------------- |
+| ✅               | ✅                                | Both README and Additional Details content is displayed. |
+| ✅               | ❌                                | Only the README content is displayed.                    |
+| ❌               | ✅                                | Only the Additional Details content is displayed.        |
+| ❌               | ❌                                | A message indicating that no content is available.       |
+
+#### Additional Details Content
+
+To display the Additional Details content, create a markdown file with the same name as the pack in the the
+[`docs/docs-content/integrations/`](./docs/docs-content/integrations/) content folder. For example, if the pack name is
+`ubuntu-aws`, you would create a markdown file called `ubuntu-aws.md`. The additional details content requires you to
+follow the [Packs layout guide](https://spectrocloud.atlassian.net/wiki/spaces/DE/pages/1802797059/Packs).
+
+If you want to add content specific to a version, include the following heading and tabs component in the markdown file.
+
+<!-- prettier-ignore -->
+```md
+## Versions Supported
+
+<Tabs queryString="parent"> -> Tabs for different versions
+<TabItem label="1.1.x" value="1.1.2">
+ Insert content here as needed. Create more `TabItem` components as needed.
+</TabItem>
+</Tabs>
+```
+
+> [!WARNING]
+>
+> Ensure the`Tabs` component has the `queryString` prop set to `parent`. This is required for the component to work. The
+> `Tabs` component must also have a `## Versions Supported` heading. If you do not follow this format, the content will
+> not be displayed correctly, and as a result, actual tabs will be displayed, and the pack will lose the ability to
+> automatically display the content for the select version the user has specified in the version drop-down.
+
+The packs component will always display the top-level tab content, so if you add content for a new version, ensure the
+new `TabItem` component is the first in the list. If a new pack version does not have a respective tag, the latest
+version content will be displayed automatically.
+
+#### Links
+
+When authoring additional details content, you must use the `<VersionedLink />` component to link to other documentation
+pages. The component is required to ensure that the links are versioned correctly. Refer to the
+[Internal Links](#internal-links) section for more information.
+
+If you want to link to a heading inside the pack component, you must also use the `<VersionedLink />` and include the
+path to the component followed by the heading id. The following is an example of how to link to a heading inside the
+pack component. Take note of the `#` symbol followed by the heading id.
+
+```md
+<VersionedLink text="Change Cluster DNS Service Domain" url="/integrations/packs/?pack=kubernetes-eks#change-cluster-dns-service-domain" />
+```
+
+Omit the `version=xxxx&parent=xxxx` value that is part of the query string. If you include the `version` and `parent`
+values, the link will not work as expected.
+
+### Link to a Pack
+
+You must use the `<VersionedLink />` component to link to a pack. The following is an example of how to link to a pack.
+For more information, refer to the [Internal Links](#internal-links) section.
+
+```md
+<VersionedLink text="Change Cluster DNS Service Domain" url="/integrations/packs/?pack=kubernetes-eks" />
+```
+
+If you do not use the `<VersionedLink />` component, the link will not be versioned correctly, and the build will fail.
+
 ## Netlify Previews
 
 By default Netlify previews are enabled for pull requests. However, some branches do not require Netlify previews. In
@@ -716,15 +840,19 @@ documentation.
 Next, download the required Vale plugins.
 
 ```
+
 make sync-vale
+
 ```
 
 To execute the writing check, issue the command below. The command below will identify files that are modified by
 comparing the current git branch against the `master` branch. Ensure your local `master` branch is up to date for
 accurate results.
 
 ```
+
 make check-writing
+
 ```
 
 You may also use the Vale CLI to directly scan a file and receive feedback.