DOP-5089: disable version selector (#1298)

plugins/gatsby-source-snooty-prod/gatsby-node.js

@@ -195,16 +195,16 @@ exports.sourceNodes = async ({ actions, createContentDigest, createNodeId, getNo
 
   await createBreadcrumbNodes({ db, createNode, createNodeId, createContentDigest });
 
-  const umbrellaProduct = await db.realmInterface.getMetadata(
-    {
-      'associated_products.name': siteMetadata.project,
-    },
-    { associated_products: 1 }
-  );
-
-  await createAssociatedProductNodes({ createNode, createNodeId, createContentDigest }, umbrellaProduct);
-
-  await createRemoteMetadataNode({ createNode, createNodeId, createContentDigest }, umbrellaProduct);
+  if (process.env['OFFLINE_DOCS'] !== 'true') {
+    const umbrellaProduct = await db.realmInterface.getMetadata(
+      {
+        'associated_products.name': siteMetadata.project,
+      },
+      { associated_products: 1 }
+    );
+    await createAssociatedProductNodes({ createNode, createNodeId, createContentDigest }, umbrellaProduct);
+    await createRemoteMetadataNode({ createNode, createNodeId, createContentDigest }, umbrellaProduct);
+  }
 
   if (siteMetadata.project === 'cloud-docs' && hasOpenAPIChangelog)
     await createOpenAPIChangelogNode({ createNode, createNodeId, createContentDigest, siteMetadata });

src/components/Sidenav/VersionSelector.js

@@ -3,6 +3,7 @@ import { cx, css } from '@leafygreen-ui/emotion';
 import Select from '../Select';
 import { VersionContext } from '../../context/version-context';
 import { theme } from '../../theme/docsTheme';
+import { isOfflineDocsBuild } from '../../utils/is-offline-docs-build';
 
 const buildChoice = (branch) => {
   return {
@@ -85,6 +86,7 @@ const VersionSelector = ({ versionedProject = '', tocVersionNames = [] }) => {
         popoverZIndex={2}
         allowDeselect={false}
         choices={options}
+        disabled={isOfflineDocsBuild}
       ></Select>
     </div>
   );

src/components/VersionDropdown/index.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import { cx, css as LeafyCSS } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { Option, OptionGroup, Select } from '@leafygreen-ui/select';
@@ -9,8 +8,9 @@ import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import { theme } from '../../theme/docsTheme';
 import { useCurrentUrlSlug, getBranchSlug } from '../../hooks/use-current-url-slug';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
+import { isOfflineDocsBuild } from '../../utils/is-offline-docs-build';
 
-const StyledSelect = styled(Select)`
+const selectStyling = LeafyCSS`
   margin: ${theme.size.small} ${theme.size.medium} ${theme.size.small} ${theme.size.medium};
 
   ${'' /* Render version dropdown text in front of the Sidebar text */}
@@ -152,18 +152,18 @@ const VersionDropdown = ({ eol }) => {
   // OR have the OptionGroup not take up space when a label is empty-string. For now,
   // ungrouped branches are handled in a separate array.
   return (
-    <StyledSelect
+    <Select
       role="button"
       allowDeselect={false}
-      className={cx(eol ? eolVersionFlipperStyle : '')}
+      className={cx(selectStyling, eol ? eolVersionFlipperStyle : '')}
       aria-labelledby="View a different version of documentation."
       defaultValue="master"
       onChange={onSelectChange}
       placeholder={'Select a version'}
       popoverZIndex={3}
       value={activeVersions[project]}
       usePortal={false}
-      disabled={eol}
+      disabled={isOfflineDocsBuild || eol}
     >
       {activeUngroupedBranches?.map((b) => createOption(b))}
       {groups?.map((group) => {
@@ -183,7 +183,7 @@ const VersionDropdown = ({ eol }) => {
         );
       })}
       {showEol && <Option value="legacy">Legacy Docs</Option>}
-    </StyledSelect>
+    </Select>
   );
 };
 

src/hooks/use-remote-metadata.js

@@ -13,5 +13,5 @@ export const useRemoteMetadata = () => {
       }
     `
   );
-  return data.allRemoteMetadata.nodes[0].remoteMetadata;
+  return data.allRemoteMetadata.nodes[0]?.remoteMetadata ?? {};
 };

tests/unit/__snapshots__/VersionDropdown.test.js.snap

@@ -10,42 +10,39 @@ exports[`VersionDropdown Component renders correctly 1`] = `
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
+  margin: 8px 24px 8px 24px;
 }
 
 .emotion-0>label+button,
 .emotion-0>p+button {
   margin-top: 3px;
 }
 
-.emotion-1 {
-  margin: 8px 24px 8px 24px;
-}
-
-.emotion-1 button {
+.emotion-0 button {
   z-index: 2;
   background-color: var(--select-button-bg-color);
   color: var(--select-button-color);
 }
 
-.emotion-1 button div:last-child svg {
+.emotion-0 button div:last-child svg {
   color: var(--select-button-carot);
 }
 
-.dark-theme .emotion-1 button:hover {
+.dark-theme .emotion-0 button:hover {
   background-color: var(--gray-dark4);
   color: var(--gray-light3);
   border-color: var(--gray-base);
   box-shadow: var(--gray-dark2) 0px 0px 0px 3px;
 }
 
 @media only screen and (max-width: 1024px) {
-  .emotion-1 div,
-  .emotion-1 span {
+  .emotion-0 div,
+  .emotion-0 span {
     font-size: 13px;
   }
 }
 
-.emotion-3 {
+.emotion-1 {
   -webkit-appearance: none;
   -moz-appearance: none;
   -ms-appearance: none;
@@ -84,69 +81,69 @@ exports[`VersionDropdown Component renders correctly 1`] = `
   font-size: 13px;
 }
 
-.emotion-3:focus {
+.emotion-1:focus {
   outline: none;
 }
 
-.emotion-3[disabled],
-.emotion-3:disabled {
+.emotion-1[disabled],
+.emotion-1:disabled {
   pointer-events: none;
 }
 
-.emotion-3:active,
-.emotion-3:focus,
-.emotion-3:hover {
+.emotion-1:active,
+.emotion-1:focus,
+.emotion-1:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.emotion-3:hover,
-.emotion-3:active {
+.emotion-1:hover,
+.emotion-1:active {
   color: #001E2B;
   background-color: #FFFFFF;
   box-shadow: 0 0 0 3px #E8EDEB;
 }
 
-.emotion-3:focus {
+.emotion-1:focus {
   background-color: #FFFFFF;
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
-.emotion-3>*:last-child {
+.emotion-1>*:last-child {
   grid-template-columns: 1fr 16px;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
 }
 
-.emotion-3>*:last-child>svg {
+.emotion-1>*:last-child>svg {
   justify-self: right;
   width: 16px;
   height: 16px;
 }
 
-.emotion-3>*:last-child>svg {
+.emotion-1>*:last-child>svg {
   color: #3D4F58;
 }
 
-.emotion-3>*:last-child {
+.emotion-1>*:last-child {
   padding: 0 4px 0 12px;
 }
 
-.emotion-3:focus {
+.emotion-1:focus {
   box-shadow: 0 0 0 3px #0498EC;
   border-color: rgba(255, 255, 255, 0);
 }
 
 @media only screen and (max-width: 1024px) {
-  .emotion-3 {
+  .emotion-1 {
     height: 36px;
     font-size: 16px;
   }
 }
 
-.emotion-4 {
+.emotion-2 {
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -156,7 +153,7 @@ exports[`VersionDropdown Component renders correctly 1`] = `
   border-radius: 5px;
 }
 
-.emotion-5 {
+.emotion-3 {
   display: grid;
   grid-auto-flow: column;
   -webkit-box-pack: center;
@@ -176,7 +173,7 @@ exports[`VersionDropdown Component renders correctly 1`] = `
   gap: 6px;
 }
 
-.emotion-6 {
+.emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,14 +193,14 @@ exports[`VersionDropdown Component renders correctly 1`] = `
   overflow: hidden;
 }
 
-.emotion-7 {
+.emotion-5 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-width: 100%;
 }
 
-.emotion-8 {
+.emotion-6 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -214,7 +211,7 @@ exports[`VersionDropdown Component renders correctly 1`] = `
 }
 
 <div
-    class="emotion-0  emotion-1 emotion-2"
+    class="emotion-0"
   >
     <button
       aria-controls="select-1-menu"
@@ -223,7 +220,7 @@ exports[`VersionDropdown Component renders correctly 1`] = `
       aria-expanded="false"
       aria-invalid="false"
       aria-labelledby="View a different version of documentation."
-      class="emotion-3"
+      class="emotion-1"
       data-leafygreen-ui="button"
       data-testid="leafygreen-ui-select-menubutton"
       id="select-2"
@@ -232,24 +229,24 @@ exports[`VersionDropdown Component renders correctly 1`] = `
       value="master"
     >
       <div
-        class="emotion-4"
+        class="emotion-2"
       />
       <div
-        class="emotion-5"
+        class="emotion-3"
       >
         <div
-          class="emotion-6"
+          class="emotion-4"
         >
           <div
-            class="emotion-7"
+            class="emotion-5"
           >
             master
           </div>
         </div>
         <svg
           alt=""
           aria-hidden="true"
-          class="emotion-8"
+          class="emotion-6"
           height="16"
           role="presentation"
           viewBox="0 0 16 16"