DOP-3079: de-hardcode DeprecatedVersionSelector (#852)

Author: mmeigs

package-lock.json

@@ -110,6 +110,8 @@
     "https-browserify": "^1.0.0",
     "immer": "^9.0.6",
     "json-schema": "^0.4.0",
+    "lodash.isempty": "^4.4.0",
+    "lodash.keyby": "^4.6.0",
     "minimist": "^1.2.6",
     "mobx": "^6.1.5",
     "mongodb-stitch-browser-sdk": "^4.8.0",

package.json

@@ -1,11 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import queryString from 'query-string';
+import keyBy from 'lodash.keyby';
+import isEmpty from 'lodash.isempty';
 import Button from '@leafygreen-ui/button';
 import { css, cx } from '@leafygreen-ui/emotion';
-import { getSiteUrl } from '../utils/get-site-url';
 import { isBrowser } from '../utils/is-browser';
 import { theme } from '../theme/docsTheme';
+import { fetchDocuments } from '../utils/realm';
+import { useSiteMetadata } from '../hooks/use-site-metadata';
+import { BRANCHES_COLLECTION } from '../build-constants';
 import Select from './Select';
 
 const SELECT_WIDTH = '336px';
@@ -19,30 +23,6 @@ const selectStyle = css`
   }
 `;
 
-const PROPERTY_NAME_MAPPING = {
-  'atlas-open-service-broker': 'MongoDB Atlas Open Service Broker on Kubernetes',
-  'atlas-cli': 'MongoDB Atlas CLI',
-  'bi-connector': 'MongoDB Connector for BI',
-  charts: 'MongoDB Charts',
-  cloud: 'MongoDB Atlas',
-  compass: 'MongoDB Compass',
-  docs: 'MongoDB Server',
-  drivers: 'MongoDB Drivers',
-  'kafka-connector': 'MongoDB Kafka Connector',
-  'kubernetes-operator': 'MongoDB Enterprise Kubernetes Operator',
-  mongocli: 'MongoDB CLI',
-  mongoid: 'Mongoid',
-  mms: 'MongoDB Ops Manager',
-  'ruby-driver': 'MongoDB Ruby Driver',
-  'spark-connector': 'MongoDB Connector for Spark',
-};
-
-const fullProductName = (property) => {
-  if (!property) return null;
-  // Display full product name on product dropdown
-  return PROPERTY_NAME_MAPPING[property.replace('_', '-')] || property;
-};
-
 const isPrimaryBranch = (version) => {
   return version === 'main' || version === 'master';
 };
@@ -64,16 +44,52 @@ const isVersioned = (versionOptions) => {
   return !(versionOptions.length === 1 && isPrimaryBranch(versionOptions[0]));
 };
 
+// Validation for necessary url fields to bypass errors
+const hasValidHostName = (repoDocument) => {
+  if (!repoDocument?.url?.dotcomprd || !repoDocument?.prefix?.dotcomprd) return false;
+  return true;
+};
+
+// Add mms-docs to reposMap. It does not have a document in repos_branches collection.
+// TODO: Remove when mms-docs is added to repos_branches
+const addOldGenToReposMap = (reposMap) => {
+  const oldGenRepos = {
+    mms: {
+      displayName: 'MongoDB Ops Manager',
+      url: { dotcomprd: 'http://mongodb.com/' },
+      prefix: { dotcomprd: 'docs/ops-manager' },
+    },
+  };
+  return {
+    ...oldGenRepos,
+    ...reposMap,
+  };
+};
+
 const DeprecatedVersionSelector = ({ metadata: { deprecated_versions: deprecatedVersions } }) => {
+  const { reposDatabase } = useSiteMetadata();
   const [product, setProduct] = useState('');
   const [version, setVersion] = useState('');
+  const [reposMap, setReposMap] = useState({});
+
   const updateProduct = useCallback(({ value }) => {
     setProduct(value);
     setVersion('');
   }, []);
   const updateVersion = useCallback(({ value }) => setVersion(value), []);
   const buttonDisabled = !(product && version);
 
+  // Fetch repos_branches for `displayName` and url
+  useEffect(() => {
+    if (reposDatabase) {
+      fetchDocuments(reposDatabase, BRANCHES_COLLECTION).then((resp) => {
+        const reposBranchesMap = keyBy(resp, 'project');
+        const reposBranchesMapWithOldGen = addOldGenToReposMap(reposBranchesMap);
+        setReposMap(reposBranchesMapWithOldGen);
+      });
+    }
+  }, [reposDatabase]);
+
   useEffect(() => {
     if (isBrowser) {
       // Extract the value of 'site' query string from the page url to pre-select product
@@ -87,23 +103,25 @@ const DeprecatedVersionSelector = ({ metadata: { deprecated_versions: deprecated
   const generateUrl = () => {
     // Our current LG button version has a bug where a disabled button with an href allows the disabled
     // button to be clickable. This logic can be removed when LG button is version >= 12.0.4.
-    if (buttonDisabled) {
+    if (buttonDisabled || isEmpty(reposMap) || !hasValidHostName(reposMap[product])) {
       return null;
     }
 
+    // Utilizing hardcoded env because legacy sites are not available on dev/stage
+    const hostName = reposMap[product].url.dotcomprd + reposMap[product].prefix.dotcomprd;
     const versionOptions = deprecatedVersions[product];
-    const hostName = getSiteUrl(product);
     const versionName = isVersioned(versionOptions) ? version : '';
-    return ['docs', 'mms', 'cloud-docs', 'atlas-cli'].includes(product)
-      ? `${hostName}/${versionName}`
-      : `${hostName}/${product}/${versionName}`;
+    return `${hostName}/${versionName}`;
   };
 
   const productChoices = deprecatedVersions
-    ? Object.keys(deprecatedVersions).map((product) => ({
-        text: fullProductName(product),
-        value: product,
-      }))
+    ? Object.keys(deprecatedVersions)
+        .map((product) => ({
+          text: reposMap[product]?.displayName,
+          value: product,
+        }))
+        // Ensure invalid entries do not break selector
+        .filter(({ text }) => !!text)
     : [];
 
   const versionChoices = deprecatedVersions[product]