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
spectrocloud · Jul 18, 2024 · 2af3356 · 2af3356
1 parent a1fb3da
commit 2af3356
Show file tree

Hide file tree

Showing 28 changed files with 414 additions and 306 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,6 @@
 module.exports = {
   env: { browser: true, es2015: true, node: true },
-  settings: { "import/resolver": "webpack" },
+  settings: { "import/resolver": "webpack", react: { version: "detect" } },
   extends: ["eslint:recommended", "plugin:react/recommended", "prettier"],
   overrides: [
     {

diff --git a/declarations.d.ts b/declarations.d.ts
@@ -5,7 +5,7 @@ declare module "*.module.scss" {
   export default classes;
 }
 
-declare module '*.md' {
+declare module "*.md" {
   const value: string; // markdown is just a string
   export default value;
 }

diff --git a/docs/docs-content/tutorials/cluster-deployment/pcg/deploy-app-pcg.md b/docs/docs-content/tutorials/cluster-deployment/pcg/deploy-app-pcg.md
@@ -358,7 +358,8 @@ complete the core infrastructure stack.
 Next, click on the **Add New Pack** button to include add-on layers to your cluster profile.
 
 Add the **MetalLB (Helm)** pack to your profile. The
-<VersionedLink text="MetalLB" url="/integrations/packs/?pack=lb-metallb-helm"/> pack provides a load-balancer
+
+<VersionedLink text="MetalLB" url="/integrations/packs/?pack=lb-metallb-helm" /> pack provides a load-balancer
 implementation for your Kubernetes cluster, as VMware does not offer a load balancer solution natively. The load
 balancer is required to help the _LoadBalancer_ service specified in the Hello Universe application manifest obtain an
 IP address, so that you can access the application from your browser.

diff --git a/docs/docs-content/vm-management/vm-packs-profiles/create-vmo-profile.md b/docs/docs-content/vm-management/vm-packs-profiles/create-vmo-profile.md
@@ -109,7 +109,8 @@ components, refer to [Virtual Machine Orchestrator Pack](../vm-packs-profiles/vm
 
 9.  If your cluster profile does include a load balancer such as MetalLB, no changes are required and you can skip this
     step. For more information about MetalLB, refer to
-    <VersionedLink text="MetalLB pack documentation" url="/integrations/packs/?pack=lb-metallb-helm"/>.
+
+    <VersionedLink text="MetalLB pack documentation" url="/integrations/packs/?pack=lb-metallb-helm" />.
 
     If your cluster profile does not include a load balancer, update the services
     `charts.virtual-machine-orchestrator.kubevirt` and `charts.virtual-machine-orchestrator.cdi` to type ClusterIP in

diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "fuse.js": "^6.6.2",
     "markdown-to-jsx": "^7.0.0",
     "node-fetch": "^3.1.0",
-    "p-ratelimit":"^1.0.1",
+    "p-ratelimit": "^1.0.1",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/plugins/packs-integrations.js b/plugins/packs-integrations.js
@@ -166,7 +166,7 @@ function sortVersions(tags) {
   return sortedVersions;
 }
 
-function getAggregatedVersions(registries, repositories, packUidMap, packName) {
+function getAggregatedVersions(registries, repositories, packUidMap) {
   const prefferedRegistryUid = repositories?.[0]?.uid;
   //if a pack has multiple registries, then the versions of the pack are aggregated based on the selected registries
   //if a same version in multiple registries, the preferred registry is the higher precendence.
@@ -334,7 +334,7 @@ async function write(res, packName, logoUrlMap) {
         logoUrlMap[packName] = `${packName}.${mime.extension(type)}`;
       });
     } else {
-      reject("Invalid Mime type for the logo");
+      reject(`Invalid MIME type received for the logo ${packName}`);
     }
   });
 }
@@ -360,7 +360,11 @@ async function getLogoUrl(packsAllData, logoUrlMap) {
             await setTimeout(1000);
           }
         }
-      } catch (e) {}
+      } catch (e) {
+        // Intentionally ignoring errors here to continue processing other logos
+        // Enable the below line to log the error, if needed, for debugging.
+        // logger.error(e);
+      }
     }
   }
 }

diff --git a/src/components/IconMapper/IconMapper.tsx b/src/components/IconMapper/IconMapper.tsx
@@ -18,21 +18,21 @@ import RolesIcon from "@site/static/assets/icons/roles.svg";
 import TeamsIcon from "@site/static/assets/icons/teams.svg";
 import WorkspacesIcon from "@site/static/assets/icons/workspaces.svg";
 import TerraformIcon from "@site/static/assets/icons/terraform.svg";
-import K8sIcon from '@site/static/assets/packs/k8s_layer.svg';
-import CniIcon from '@site/static/assets/packs/cni_layer.svg';
-import OsIcon from '@site/static/assets/packs/os_layer.svg';
-import ServiceMeshIcon from '@site/static/assets/packs/service_mesh_layer.svg';
-import MonitoringIcon from '@site/static/assets/packs/monitoring_layer.svg';
-import CsiIcon from '@site/static/assets/packs/csi_layer.svg';
-import LoggingIcon from '@site/static/assets/packs/logging_layer.svg';
-import LoadBalancerIcon from '@site/static/assets/packs/load_balancer_layer.svg';
-import IngressIcon from '@site/static/assets/packs/ingress_layer.svg';
-import AuthenticationIcon from '@site/static/assets/packs/authentication_layer.svg';
-import RegistryIcon from '@site/static/assets/packs/registry_layer.svg';
-import SystemAppIcon from '@site/static/assets/packs/system_app_layer.svg';
-import SecurityIcon from '@site/static/assets/packs/security_layer.svg';
-import AppServicesIcon from '@site/static/assets/packs/system_app_layer.svg';
-import MiscIcon from '@site/static/assets/packs/misc_layer.svg';
+import K8sIcon from "@site/static/assets/packs/k8s_layer.svg";
+import CniIcon from "@site/static/assets/packs/cni_layer.svg";
+import OsIcon from "@site/static/assets/packs/os_layer.svg";
+import ServiceMeshIcon from "@site/static/assets/packs/service_mesh_layer.svg";
+import MonitoringIcon from "@site/static/assets/packs/monitoring_layer.svg";
+import CsiIcon from "@site/static/assets/packs/csi_layer.svg";
+import LoggingIcon from "@site/static/assets/packs/logging_layer.svg";
+import LoadBalancerIcon from "@site/static/assets/packs/load_balancer_layer.svg";
+import IngressIcon from "@site/static/assets/packs/ingress_layer.svg";
+import AuthenticationIcon from "@site/static/assets/packs/authentication_layer.svg";
+import RegistryIcon from "@site/static/assets/packs/registry_layer.svg";
+import SystemAppIcon from "@site/static/assets/packs/system_app_layer.svg";
+import SecurityIcon from "@site/static/assets/packs/security_layer.svg";
+import AppServicesIcon from "@site/static/assets/packs/system_app_layer.svg";
+import MiscIcon from "@site/static/assets/packs/misc_layer.svg";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { fontAwesomeIcons } from "./dynamicFontAwesomeImports";
 
@@ -66,15 +66,15 @@ export const icons: IconsMap = {
   monitoring: <MonitoringIcon />,
   csi: <CsiIcon />,
   logging: <LoggingIcon />,
-  'load balancer': <LoadBalancerIcon />,
+  "load balancer": <LoadBalancerIcon />,
   ingress: <IngressIcon />,
   authentication: <AuthenticationIcon />,
   registry: <RegistryIcon />,
-  'system app': <SystemAppIcon />,
+  "system app": <SystemAppIcon />,
   spectro: <MiscIcon />,
   security: <SecurityIcon />,
   serverless: <MiscIcon />,
-  'app services': <AppServicesIcon />,
+  "app services": <AppServicesIcon />,
 };
 
 function IconMapper({ type }: { type: string }): React.ReactElement {

diff --git a/src/components/Integrations/Packs/Packs.tsx b/src/components/Integrations/Packs/Packs.tsx
@@ -5,5 +5,5 @@ import PacksIntegrationsPluginData from "../IntegrationTypes";
 
 export default function Packs() {
   const { packs, repositories } = usePluginData("plugin-packs-integrations") as PacksIntegrationsPluginData;
-  return <Integrations data={packs} repositories={repositories}/>;
+  return <Integrations data={packs} repositories={repositories} />;
 }
diff --git a/src/components/PacksInformation/PacksInformation.tsx b/src/components/PacksInformation/PacksInformation.tsx
@@ -1,17 +1,31 @@
 import React from "react";
 import PacksReadme from "@site/src/components/PacksReadme/PacksReadme";
-import { Switch, Redirect } from 'react-router-dom'
+import { Switch, Redirect } from "react-router-dom";
 
-export default function Packs(props: any) {
+interface Packs {
+  route: PacksData;
+}
+
+interface PacksData {
+  data: {
+    name: string;
+    version: string;
+    parent: string;
+  };
+}
+
+export default function Packs(props: Packs) {
   return (
     <>
-      {props?.route?.data ?
-        (<Switch>
-          <Redirect to={`/integrations/packs?pack=${props.route.data.name}&version=${props.route.data.version}&parent=${props.route.data.parent}`} />
-        </Switch>) : (
-          <PacksReadme />
-        )
-      }
+      {props?.route?.data ? (
+        <Switch>
+          <Redirect
+            to={`/integrations/packs?pack=${props.route.data.name}&version=${props.route.data.version}&parent=${props.route.data.parent}`}
+          />
+        </Switch>
+      ) : (
+        <PacksReadme />
+      )}
     </>
   );
 }
diff --git a/src/components/PacksReadme/PacksReadme.antd.css b/src/components/PacksReadme/PacksReadme.antd.css
@@ -6,7 +6,7 @@
 p {
   font-size: 16px;
 }
-[data-theme = "dark"] .ant-select-tree-list-holder-inner {
+[data-theme="dark"] .ant-select-tree-list-holder-inner {
   background-color: #1f1f1f;
   color: whitesmoke;
 }