Merge remote-tracking branch 'origin/main' into 1.32-releases

Author: mabaasit

.github/workflows/authors-and-third-party-notices.yaml

@@ -13,49 +13,44 @@ jobs:
     name: Update automatically generated files
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
+        with:
+          # don't checkout a detatched HEAD
+          ref: ${{ github.head_ref }}
+
+          # this is important so git log can pick up on
+          # the whole history to generate the list of AUTHORS
+          fetch-depth: '0'
+
+
       - uses: actions/setup-node@v2
         with:
           node-version: ^14.17.5
           cache: 'npm'
 
-      - name: Install Deps Ubuntu
-        run: sudo apt-get -y install libkrb5-dev libsecret-1-dev net-tools libstdc++6 gnome-keyring
-
       - name: Install [email protected]
         run: |
           npm install -g [email protected]
 
-      - name: Run node-gyp bug workaround script
-        run: |
-          bash .evergreen/node-gyp-bug-workaround.sh
-
       - name: Install Dependencies
         run: |
           npm -v
           npm ci
 
-      - name: Set up Git
-        run: |
-          git config --local user.email "41898282+github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
+      - name: Update AUTHORS
+        run: npm run update-authors
 
       - name: Update THIRD-PARTY-NOTICES.md
         run: npm run update-third-party-notices
 
-      - name: Commit THIRD-PARTY-NOTICES changes
-        run: |
-          git add THIRD-PARTY-NOTICES.md
-          git commit --no-allow-empty -m "chore: update THIRD-PARTY-NOTICES" THIRD-PARTY-NOTICES.md || true
-
-      - name: Update AUTHORS
-        run: npm run update-authors
-      - name: Commit AUTHORS changes
-        run: |
-          git add AUTHORS
-          git commit --no-allow-empty -m "chore: update AUTHORS" AUTHORS || true
-      - name: Push updates
-        uses: ad-m/[email protected]
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v4
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          branch: main
+          commit-message: Update report
+          branch: ci/update-3rd-party-notices-and-authors
+          title: 'chore: update AUTHORS and THIRD-PARTY-NOTICES'
+          add-paths: |
+            THIRD-PARTY-NOTICES.md
+            AUTHORS
+          body: |
+            - Update `AUTHORS` and `THIRD-PARTY-NOTICES`

.mailmap

@@ -29,6 +29,7 @@ Maurizio Casimirri <[email protected]> [email protected] <maurizio.cas
 Maurizio Casimirri <[email protected]> mcasimir <[email protected]>
 Michael Rose <[email protected]> rosem <[email protected]>
 Paul Thurlow <[email protected]> Paul Thurlow <[email protected]>
+Preston Vasquez <[email protected]> Preston Vasquez <[email protected]>
 Rhys Howell <rhys@[email protected]> Anemy <rhys@[email protected]>
 Rhys Howell <rhys@[email protected]> Rhys <[email protected]>
 Rhys Howell <rhys@[email protected]> Rhys Howell <[email protected]>

AUTHORS

@@ -61,3 +61,5 @@ Leonardo Rossi <[email protected]>
 Neil Shweky <[email protected]>
 Rohan Antony <[email protected]>
 Basit <[email protected]>
+Abraham Egnor <[email protected]>
+Preston Vasquez <[email protected]>

THIRD-PARTY-NOTICES.md

@@ -11,44 +11,44 @@ function getProperties(coll) {
 
   if (coll.collation) {
     properties.push({
-      name: PROPERTIES_COLLATION,
+      id: PROPERTIES_COLLATION,
       options: coll.collation,
     });
   }
 
   if (coll.type === 'timeseries') {
     properties.push({
-      name: PROPERTIES_TIME_SERIES,
+      id: PROPERTIES_TIME_SERIES,
     });
   }
 
   if (coll.type === 'view') {
     properties.push({
-      name: PROPERTIES_VIEW,
+      id: PROPERTIES_VIEW,
     });
   }
 
   if (coll.capped) {
     properties.push({
-      name: PROPERTIES_CAPPED,
+      id: PROPERTIES_CAPPED,
     });
   }
 
   if (coll.clustered) {
     properties.push({
-      name: PROPERTIES_CLUSTERED,
+      id: PROPERTIES_CLUSTERED,
     });
   }
 
   if (coll.readonly) {
     properties.push({
-      name: PROPERTIES_READ_ONLY,
+      id: PROPERTIES_READ_ONLY,
     });
   }
 
   if (coll.fle2) {
     properties.push({
-      name: PROPERTIES_FLE2,
+      id: PROPERTIES_FLE2,
     });
   }
 

package-lock.json

@@ -25,6 +25,7 @@ const statsStyles = css({
 const statItemStyles = css({
   display: 'flex',
   gap: spacing[1],
+  alignItems: 'baseline',
 });
 
 const statTitleStyles = css({

packages/collection-model/lib/collection-properties.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, spacing, Card } from '@mongodb-js/compass-components';
+import { css, cx, spacing, Card } from '@mongodb-js/compass-components';
 import { Document } from '@mongodb-js/compass-crud';
 import HadronDocument from 'hadron-document';
 
@@ -12,15 +12,32 @@ type ExplainResultsProps = {
 };
 
 const containerStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
   gap: spacing[4],
+  display: 'grid',
+  gridTemplateRows: 'auto 1fr',
+  height: '100%',
+});
+
+const withStatsGrid = css({
+  gridTemplateAreas: `
+      'stats'
+      'card'
+    `,
+});
+
+const withoutStatsGrid = css({
+  gridTemplateAreas: `
+      'card'
+    `,
+});
+
+const statsStyles = css({
+  gridArea: 'stats',
 });
 
 const cardStyles = css({
-  // 170px works with minimum-height of compass
-  // todo: handle height for bigger sized compass
-  height: '170px',
+  gridArea: 'card',
+  maxHeight: '50vh',
   overflowY: 'scroll',
 });
 
@@ -29,13 +46,18 @@ export const ExplainResults: React.FunctionComponent<ExplainResultsProps> = ({
   stats,
 }) => {
   return (
-    <div className={containerStyles} data-testid="pipeline-explain-results">
+    <div
+      className={cx(stats ? withStatsGrid : withoutStatsGrid, containerStyles)}
+      data-testid="pipeline-explain-results"
+    >
       {stats && (
-        <ExplainQueryPerformance
-          nReturned={stats.nReturned}
-          executionTimeMillis={stats.executionTimeMillis}
-          usedIndexes={stats.usedIndexes}
-        />
+        <div className={statsStyles}>
+          <ExplainQueryPerformance
+            nReturned={stats.nReturned}
+            executionTimeMillis={stats.executionTimeMillis}
+            usedIndexes={stats.usedIndexes}
+          />
+        </div>
       )}
       <Card className={cardStyles} data-testid="pipeline-explain-results-json">
         <Document

packages/compass-aggregations/src/components/pipeline-explain/explain-query-performance.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   css,
+  cx,
   spacing,
   Modal,
   CancelLoader,
   H3,
   ModalFooter,
   Button,
   ErrorSummary,
+  breakpoints,
 } from '@mongodb-js/compass-components';
 import { connect } from 'react-redux';
 
@@ -25,16 +27,51 @@ type PipelineExplainProps = {
   onCancelExplain: () => void;
 };
 
+const modalStyles = css({
+  display: 'grid',
+  gap: spacing[3],
+  gridTemplateRows: 'auto 1fr auto',
+});
+
+const gridWithFooter = css({
+  gridTemplateAreas: `
+    'header'
+    'content'
+    'footer'
+  `,
+});
+
+const gridWithoutFooter = css({
+  gridTemplateAreas: `
+    'header'
+    'content'
+  `,
+});
+
+const headerStyles = css({
+  gridArea: 'header',
+});
+
 const contentStyles = css({
-  marginTop: spacing[3],
-  marginBottom: spacing[3],
+  gridArea: 'content',
 });
 
 const footerStyles = css({
+  gridArea: 'footer',
   paddingRight: 0,
   paddingBottom: 0,
 });
 
+const loadingStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%',
+});
+
+const getModalSize = (): 'default' | 'large' => {
+  return window.innerWidth <= breakpoints.XLDesktop ? 'default' : 'large';
+};
+
 export const PipelineExplain: React.FunctionComponent<PipelineExplainProps> = ({
   isModalOpen,
   isLoading,
@@ -43,15 +80,39 @@ export const PipelineExplain: React.FunctionComponent<PipelineExplainProps> = ({
   onCloseModal,
   onCancelExplain,
 }) => {
+  const [modalSize, setModalSize] = useState(getModalSize());
+  useEffect(() => {
+    if (!isModalOpen) {
+      return;
+    }
+    const resizeListener = () => {
+      setModalSize(getModalSize());
+    };
+    window.addEventListener('resize', resizeListener);
+    return () => {
+      window.removeEventListener('resize', resizeListener);
+    };
+  }, [isModalOpen]);
+
+  // The resize listener is only added when the modal is open.
+  // As the modal closes, the state persists the last value.
+  // If the user changes window size while the modal is closed,
+  // upon next open it uses the last known value. So we reset it here.
+  useEffect(() => {
+    setModalSize(getModalSize());
+  }, [isModalOpen]);
+
   let content = null;
   if (isLoading) {
     content = (
-      <CancelLoader
-        data-testid="pipeline-explain-cancel"
-        cancelText="Cancel"
-        onCancel={() => onCancelExplain()}
-        progressText="Running explain"
-      />
+      <div className={loadingStyles}>
+        <CancelLoader
+          data-testid="pipeline-explain-cancel"
+          cancelText="Cancel"
+          onCancel={() => onCancelExplain()}
+          progressText="Running explain"
+        />
+      </div>
     );
   } else if (error) {
     content = (
@@ -67,11 +128,16 @@ export const PipelineExplain: React.FunctionComponent<PipelineExplainProps> = ({
 
   return (
     <Modal
+      size={modalSize}
       setOpen={onCloseModal}
       open={isModalOpen}
       data-testid="pipeline-explain-modal"
+      contentClassName={cx(
+        isLoading ? gridWithoutFooter : gridWithFooter,
+        modalStyles
+      )}
     >
-      <H3>Explain</H3>
+      <H3 className={headerStyles}>Explain Plan</H3>
       <div className={contentStyles}>{content}</div>
       {!isLoading && (
         <ModalFooter className={footerStyles}>