Merge branch 'main' into DOP-4952-last-breadcrumb

gatsby-config.js

@@ -10,9 +10,9 @@ console.log('PATH PREFIX', pathPrefix);
 // Keep our main plugin at top to include file saving before image plugins
 const plugins = [
   'gatsby-source-snooty-prod',
-  `gatsby-plugin-image`,
-  `gatsby-plugin-sharp`,
-  `gatsby-transformer-sharp`, // Needed for dynamic images
+  'gatsby-plugin-image',
+  'gatsby-plugin-sharp',
+  'gatsby-transformer-sharp', // Needed for dynamic images
   {
     resolve: 'gatsby-source-filesystem',
     options: {

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/Code/Code.js

@@ -119,7 +119,6 @@ const Code = ({
           > div {
             border-top-left-radius: ${captionBorderRadius};
             border-top-right-radius: ${captionBorderRadius};
-            display: grid;
             border-color: ${palette.gray.light2};
 
             .dark-theme & {

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 ?? {};
 };

src/utils/setup/save-asset-files.js

@@ -1,8 +1,11 @@
 const fs = require('fs').promises;
 const path = require('path');
+const { siteMetadata } = require('../site-metadata');
 
 const GATSBY_IMAGE_EXTENSIONS = ['webp', 'png', 'avif'];
 
+const needsImageOptimization = ['dotcomprd', 'dotcomstg'].includes(siteMetadata.snootyEnv);
+
 const saveFile = async (file, data) => {
   // save files both to "public" and "src/images" directories
   // the first is for public access, and the second is for image processing
@@ -11,6 +14,10 @@ const saveFile = async (file, data) => {
   });
   await fs.writeFile(path.join('public', file), data, 'binary');
 
+  // For staging, skip adding images to src/images dir
+  // This will functionally skip image optimization, as the plugins source from that dir
+  if (!needsImageOptimization) return;
+
   const pathList = GATSBY_IMAGE_EXTENSIONS.some((ext) => file.endsWith(ext)) ? ['src', 'images'] : ['public'];
   await fs.mkdir(path.join(...pathList, path.dirname(file)), {
     recursive: true,

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

@@ -28,7 +28,6 @@ exports[`renders correctly 1`] = `
 .emotion-0>div {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
-  display: grid;
   border-color: #E8EDEB;
 }
 
@@ -434,7 +433,6 @@ exports[`renders correctly when none is passed in as a language 1`] = `
 .emotion-0>div {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  display: grid;
   border-color: #E8EDEB;
 }
 

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

@@ -45,7 +45,6 @@ exports[`CodeIO renders correctly 1`] = `
 .emotion-1>div {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
-  display: grid;
   border-color: #E8EDEB;
 }
 

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

@@ -223,7 +223,6 @@ exports[`collapsible component renders all the content in the options and childr
 .emotion-12>div {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  display: grid;
   border-color: #E8EDEB;
 }
 

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

@@ -28,7 +28,6 @@ exports[`renders correctly 1`] = `
 .emotion-0>div {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  display: grid;
   border-color: #E8EDEB;
 }
 

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

@@ -28,7 +28,6 @@ exports[`renders correctly 1`] = `
 .emotion-0>div {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
-  display: grid;
   border-color: #E8EDEB;
 }