From 68ab6bce21181c831470d50e2a43830ff935776f Mon Sep 17 00:00:00 2001 From: Seung Park Date: Wed, 30 Oct 2024 10:29:18 -0400 Subject: [PATCH] DOP-5089: disable version selector (#1298) --- .../gatsby-source-snooty-prod/gatsby-node.js | 20 +++--- src/components/Sidenav/VersionSelector.js | 2 + src/components/VersionDropdown/index.js | 12 ++-- src/hooks/use-remote-metadata.js | 2 +- .../VersionDropdown.test.js.snap | 71 +++++++++---------- 5 files changed, 53 insertions(+), 54 deletions(-) diff --git a/plugins/gatsby-source-snooty-prod/gatsby-node.js b/plugins/gatsby-source-snooty-prod/gatsby-node.js index b785818bb..2c408bfc4 100644 --- a/plugins/gatsby-source-snooty-prod/gatsby-node.js +++ b/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 }); diff --git a/src/components/Sidenav/VersionSelector.js b/src/components/Sidenav/VersionSelector.js index b768b5956..46ac5920e 100644 --- a/src/components/Sidenav/VersionSelector.js +++ b/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} > ); diff --git a/src/components/VersionDropdown/index.js b/src/components/VersionDropdown/index.js index 2750c55fb..d0b908e69 100644 --- a/src/components/VersionDropdown/index.js +++ b/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,10 +152,10 @@ 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 ( - { 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 && } - + ); }; diff --git a/src/hooks/use-remote-metadata.js b/src/hooks/use-remote-metadata.js index 07ceb3232..6569c1ef2 100644 --- a/src/hooks/use-remote-metadata.js +++ b/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 ?? {}; }; diff --git a/tests/unit/__snapshots__/VersionDropdown.test.js.snap b/tests/unit/__snapshots__/VersionDropdown.test.js.snap index 32cc2493f..5b5ddbdb2 100644 --- a/tests/unit/__snapshots__/VersionDropdown.test.js.snap +++ b/tests/unit/__snapshots__/VersionDropdown.test.js.snap @@ -10,6 +10,7 @@ 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, @@ -17,21 +18,17 @@ exports[`VersionDropdown Component renders correctly 1`] = ` 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); @@ -39,13 +36,13 @@ exports[`VersionDropdown Component renders correctly 1`] = ` } @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,35 +81,35 @@ 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; @@ -120,33 +117,33 @@ exports[`VersionDropdown Component renders correctly 1`] = ` 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`] = ` }