chore: PAC-938-packs data initial fetch and component development for…

… readme (#3178) * chore: PAC-938-packs data initial fetch and component development for readme (#3178) * PAC-938-packs data initial fetch and component development for readme * PAC-1893-integrate custom readme versions with dropdown versions (#3181) * PAC-1893-integrate custom readme versions with dropdown versions * missed these files to commit * addressed the comments * removed unnecessary code * fix for netlify redirection with question mark * issue in displaying treeselect in responsive page (#3244) * issue in displaying treeselect in responsive page * responsive issue fixed by adding media in css --------- Co-authored-by: Karl Cardenas <karl@spectrocloud.com> * chore: DOC-1285 * ci: fixed missing CI ENV * chore: DOC-1282 add logger * chore: fixed component labels * chore: DOC-1288 * chore: removed Edge Native term * docs: deprecate custom content pack pages * docs: fix portworx gitleaks issue in the deprecated folder * docs: update pack descriptions and custom content pages * docs: DOC-1281 Packs component eslint (#3394) * chore: fixed eslint errors * chore: more fixes * chore: eslint behavior fixes * chore: fixes MIME error output * chore: comments * chore: more interfaces * save * chore: fixed tech component * chore: updated eslint * chore: fixed eslint * chore: add version in warning message * chore: fix table timer * chore: save * chore: fix prettier * chore: fixed known-issues page * chore: fixed indentation * chore: DOC-1316 (#3458) * chore: fix iconmapper failures * Pack Descriptions [Component] (#3431) * docs: DOC-1279 * chore: updated antrea * chore: fixed test issue * docs: updated EFS * docs: updated Calico * chore: more updates * docs: updated more descriptions * docs: more READMEs * docs: added terraform for azure-cni * docs: added public repo registry * chore: added more definitions * docs: more content * chore: partials * docs: added more partials * chore: more updates * docs: fixed proxy URLs * chore: prep redirect * chore: more updates * chore: more packs * chore: fixed versions dropdown ordering * docs: updated descriptions * chore: fix prettier * Refactor Packs descriptions and custom content pages (#3432) * docs: add packs descriptions and refactor custom content pages * docs: fix 17 broken links * docs: add public repo to the list of repos, add more pack descriptions and custom content page refactorings * docs: fix broken link * docs: add more 17 pack descriptions/custom content page refactoring * docs: update grafana and spectro cloud metrics pack references and custom content pages * docs: add more packs * docs: add last packs * docs: fix packs references * docs: fix prettier issues * docs: fix broken link * chore: added redirects * chore: redirects * docs: DOC-1283 document Pack's Component (#3482) * docs: DOC-1283 * docs: updated README instructions * docs: styling update * docs: more updates * docs: more updates * docs: feedback * docs: added excluded packs docs --------- Co-authored-by: Nageswari Raghunathan <88926279+nage1234@users.noreply.github.com> Co-authored-by: Carolina Delwing Rosa <carolina.delwing@spectrocloud.com>
spectrocloud · Aug 2, 2024 · b02a20e · b02a20e
1 parent 42f3469
commit b02a20e
Show file tree

Hide file tree

Showing 269 changed files with 23,029 additions and 8,949 deletions.
diff --git a/.eslintrc.js b/.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: [
     {

diff --git a/.github/workflows/dependabot.yaml b/.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:

diff --git a/.github/workflows/nightly-docker-build.yaml b/.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:

diff --git a/.github/workflows/pull_request.yaml b/.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:

diff --git a/.github/workflows/release-branch-pr.yaml b/.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:

diff --git a/.github/workflows/release-preview.yaml b/.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:

diff --git a/.github/workflows/release.yaml b/.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:

diff --git a/.github/workflows/screenshot_capture.yaml b/.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:

diff --git a/.github/workflows/visual-comparison.yaml b/.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 }}

diff --git a/.gitignore b/.gitignore
@@ -64,6 +64,8 @@ test-results/
 playwright-report/
 artifact.zip
 
+# Netlify
+.netlify/
 # Ignore _partials/index.ts
 _partials/index.ts
 
@@ -74,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
diff --git a/.gitleaksignore b/.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

diff --git a/.prettierignore b/.prettierignore
@@ -10,7 +10,7 @@ vale/
 
 # Troublesome files
 tsconfig.json
-src/components/IconMapper/dynamicFontAwesomeImports.js
+src/components/IconMapper/dynamicFontAwesomeImports.*
 docs/docs-content/security-bulletins/cve-reports.md
 
 # Ignore partials

diff --git a/Makefile b/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

diff --git a/README.md b/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
@@ -715,15 +839,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.