DOP-3679: filtering changes by resource (#811)

mongodb · May 17, 2023 · de32d09 · de32d09
1 parent 412b79d
commit de32d09
Show file tree

Hide file tree

Showing 12 changed files with 593 additions and 383 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/OpenAPIChangelog/OpenAPIChangelog.js b/src/components/OpenAPIChangelog/OpenAPIChangelog.js
@@ -1,10 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
-import { H2 } from '@leafygreen-ui/typography';
+import { Body, H2 } from '@leafygreen-ui/typography';
 import Button from '@leafygreen-ui/button';
+import { palette } from '@leafygreen-ui/palette';
+import { theme } from '../../theme/docsTheme';
 import FiltersPanel from './components/FiltersPanel';
 import ChangeList from './components/ChangeList';
-import { mockChangelog, mockDiff, mockIndex } from './data/mockData';
+import { getMockResourcesList, mockChangelog, mockDiff, mockIndex } from './data/mockData';
 import { ALL_VERSIONS, COMPARE_VERSIONS } from './utils/constants';
 
 const ChangelogPage = styled.div`
@@ -14,32 +16,93 @@ const ChangelogPage = styled.div`
 
 const ChangelogHeader = styled.div`
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
 
   span {
     font-size: 26px;
     color: lightgray;
   }
+
+  @media ${theme.screenSize.upToSmall} {
+    flex-direction: column;
+    align-items: start;
+    gap: 24px;
+  }
+`;
+
+const Title = styled.div`
+  display: flex;
+  align-items: end;
+  gap: 10px;
+
+  p {
+    color: ${palette.gray.dark1};
+  }
+
+  @media ${theme.screenSize.upToMedium} {
+    flex-direction: column;
+    align-items: start;
+    gap: 0;
+  }
+`;
+
+const DownloadButton = styled(Button)`
+  min-width: 182px;
 `;
 
 /* Remove props when useStaticQuery is implemented, this is here for testing purposes */
 const OpenAPIChangelog = ({ changelog = mockChangelog, diff = mockDiff, index = mockIndex }) => {
-  // TODO: Replace with full list of resources
-  const resources = diff.map((d) => `${d.httpMethod} ${d.path}`);
+  // TODO: Aggregate this list of resources on build
+  const resources = getMockResourcesList();
   const resourceVersions = index.versions?.length ? index.versions.slice().reverse() : [];
+  // TODO: Reminder: account for this on any diff fetch
   resourceVersions[0] += ' (latest)';
 
   const [versionMode, setVersionMode] = useState(ALL_VERSIONS);
   const [selectedResources, setSelectedResources] = useState([]);
-  const [resourceVersionOne, setResourceVersionOne] = useState();
+  const [resourceVersionOne, setResourceVersionOne] = useState(resourceVersions[0]);
   const [resourceVersionTwo, setResourceVersionTwo] = useState();
 
+  const [filteredDiff, setFilteredDiff] = useState(diff);
+  const [filteredChangelog, setFilteredChangelog] = useState(changelog);
+
+  useEffect(() => {
+    if (!selectedResources.length) {
+      setFilteredDiff(diff);
+    } else setFilteredDiff(diff.filter(({ httpMethod, path }) => selectedResources.includes(`${httpMethod} ${path}`)));
+  }, [selectedResources, diff]);
+
+  useEffect(() => {
+    if (!selectedResources.length) {
+      setFilteredChangelog(changelog);
+    } else {
+      const filteredReleases = changelog.filter((release) => {
+        return (
+          release.paths.filter(({ httpMethod, path }) => selectedResources.includes(`${httpMethod} ${path}`)).length !==
+          0
+        );
+      });
+      const filteredResources = filteredReleases.map((release) => {
+        return {
+          ...release,
+          paths: release.paths.filter(({ httpMethod, path }) => selectedResources.includes(`${httpMethod} ${path}`)),
+        };
+      });
+      setFilteredChangelog(filteredResources);
+    }
+  }, [selectedResources, changelog]);
+
   return (
     <ChangelogPage>
       <ChangelogHeader>
-        <H2>API Changelog 2.0{!!index.specRevisionShort && `~${index.specRevisionShort}`}</H2>
-        <Button>Download API Changelog</Button>
+        <Title>
+          <H2>API Changelog</H2>
+          <Body>(2.0{!!index.specRevisionShort && `~${index.specRevisionShort}`})</Body>
+        </Title>
+        {/* TODO: link to S3 bucket for full changelog */}
+        <DownloadButton>Download API Changelog</DownloadButton>
       </ChangelogHeader>
       <FiltersPanel
         resources={resources}
@@ -48,15 +111,15 @@ const OpenAPIChangelog = ({ changelog = mockChangelog, diff = mockDiff, index =
         versionMode={versionMode}
         resourceVersionOne={resourceVersionOne}
         resourceVersionTwo={resourceVersionTwo}
-        setSelectedResource={setSelectedResources}
+        setSelectedResources={setSelectedResources}
         setVersionMode={setVersionMode}
         setResourceVersionOne={setResourceVersionOne}
         setResourceVersionTwo={setResourceVersionTwo}
       />
       {(versionMode === ALL_VERSIONS || (resourceVersionOne && resourceVersionTwo)) && (
         <ChangeList
           versionMode={versionMode}
-          changes={versionMode === COMPARE_VERSIONS ? diff : changelog}
+          changes={versionMode === COMPARE_VERSIONS ? filteredDiff : filteredChangelog}
           selectedResources={selectedResources}
         />
       )}

diff --git a/src/components/OpenAPIChangelog/components/Change.js b/src/components/OpenAPIChangelog/components/Change.js
@@ -3,42 +3,40 @@ import { palette } from '@leafygreen-ui/palette';
 import Tooltip, { Align, Justify } from '@leafygreen-ui/tooltip';
 import Icon from '@leafygreen-ui/icon';
 
-const ChangeListItem = styled.li`
-  margin-top: 12px;
-  line-height: 28px;
-`;
-
 export const Flex = styled.div`
   display: inline-flex;
   align-items: center;
   gap: 5px;
 `;
 
-const LIWrapper = styled(Flex)`
-  height: 28px;
+const ChangeListItem = styled.li`
+  margin-top: 12px;
+  line-height: 28px;
+`;
+
+const IconWrapper = styled(Flex)`
+  margin-right: 5px;
 `;
 
 const Change = ({ change, backwardCompatible }) => {
   const changeStatement = change[0].toUpperCase() + change.slice(1);
 
   return (
     <ChangeListItem>
-      <LIWrapper>
-        {!backwardCompatible && (
-          <Tooltip
-            align={Align.Top}
-            justify={Justify.Middle}
-            trigger={
-              <Flex>
-                <Icon glyph="ImportantWithCircle" fill={palette.red.base} />
-              </Flex>
-            }
-          >
-            Breaking change
-          </Tooltip>
-        )}
-        {changeStatement}
-      </LIWrapper>
+      {!backwardCompatible && (
+        <Tooltip
+          align={Align.Top}
+          justify={Justify.Middle}
+          trigger={
+            <IconWrapper>
+              <Icon glyph="ImportantWithCircle" fill={palette.red.base} />
+            </IconWrapper>
+          }
+        >
+          Breaking change
+        </Tooltip>
+      )}
+      {changeStatement}
     </ChangeListItem>
   );
 };

diff --git a/src/components/OpenAPIChangelog/components/FiltersPanel/components/DiffSelect.js b/src/components/OpenAPIChangelog/components/FiltersPanel/components/DiffSelect.js
@@ -6,6 +6,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 const DiffSelectContainer = styled.div`
   display: flex;
   gap: 14px;
+  padding: 0 5px;
 `;
 
 const DiffSelectItem = styled.div`
@@ -38,7 +39,7 @@ export default function DiffSelect({
       <DiffSelectItem>
         <Combobox
           clearable={false}
-          placeholder="Select Version"
+          value={resourceVersionOne}
           label="Resource Version 1"
           className={cx(marginlessLabel)}
           onChange={handleVersionOneChange}
@@ -50,6 +51,7 @@ export default function DiffSelect({
         <Combobox
           clearable={false}
           placeholder="Select Version"
+          value={resourceVersionTwo}
           label="Resource Version 2"
           className={cx(marginlessLabel)}
           onChange={handleVersionTwoChange}

diff --git a/src/components/OpenAPIChangelog/components/FiltersPanel/components/FiltersPanel.js b/src/components/OpenAPIChangelog/components/FiltersPanel/components/FiltersPanel.js
@@ -3,15 +3,22 @@ import styled from '@emotion/styled';
 import { Combobox, ComboboxOption } from '@leafygreen-ui/combobox';
 import { SegmentedControl, SegmentedControlOption } from '@leafygreen-ui/segmented-control';
 import { ALL_VERSIONS, COMPARE_VERSIONS } from '../../../utils/constants';
+import { theme } from '../../../../../theme/docsTheme';
 import DiffSelect from './DiffSelect';
 
 const Wrapper = styled.div`
   width: 100%;
-  margin-top: 32px;
+  margin-top: 28px;
 `;
 
 const StyledSegmentedControl = styled(SegmentedControl)`
-  margin-bottom: 32px;
+  margin-bottom: 28px;
+
+  @media ${theme.screenSize.upToMedium} {
+    button {
+      font-size: 13px;
+    }
+  }
 `;
 
 const ResourceSelectContainer = styled.div`
@@ -20,6 +27,9 @@ const ResourceSelectContainer = styled.div`
 `;
 
 const ResourceSelect = styled(Combobox)`
+  margin: 0 5px;
+  width: calc(100% - 10px);
+
   label {
     margin-bottom: 0;
   }
@@ -46,7 +56,7 @@ const FiltersPanel = ({
         <SegmentedControlOption data-testid="all-versions-option" value={ALL_VERSIONS}>
           All Versions
         </SegmentedControlOption>
-        <SegmentedControlOption data-testid="version-control-option" value={COMPARE_VERSIONS}>
+        <SegmentedControlOption data-testid="compare-versions-option" value={COMPARE_VERSIONS}>
           Compare Two Versions
         </SegmentedControlOption>
       </StyledSegmentedControl>
@@ -60,9 +70,15 @@ const FiltersPanel = ({
         />
       )}
       <ResourceSelectContainer>
-        <ResourceSelect label="Select Resource" placeholder="All" onChange={setSelectedResources} multiselect>
+        <ResourceSelect
+          label="Select Resource"
+          placeholder="All"
+          onChange={setSelectedResources}
+          popoverZIndex={3}
+          multiselect
+        >
           {resources.map((version) => (
-            <ComboboxOption key={version} value={version} data-testid="resource-select-option" />
+            <ComboboxOption key={version} value={version} />
           ))}
         </ResourceSelect>
       </ResourceSelectContainer>

diff --git a/src/components/OpenAPIChangelog/components/ResourceChangesBlock.js b/src/components/OpenAPIChangelog/components/ResourceChangesBlock.js
@@ -3,6 +3,7 @@ import Badge from '@leafygreen-ui/badge';
 import { palette } from '@leafygreen-ui/palette';
 import { Link as LGLink, Subtitle } from '@leafygreen-ui/typography';
 import { useSiteMetadata } from '../../../hooks/use-site-metadata';
+import { theme } from '../../../theme/docsTheme';
 import useSnootyMetadata from '../../../utils/use-snooty-metadata';
 import { getChangeTypeBadge } from '../utils/constants';
 import { getResourceLinkUrl } from '../utils/getResourceLinkUrl';
@@ -15,6 +16,14 @@ const Wrapper = styled.div`
 
 const ResourceHeader = styled(Subtitle)`
   color: ${palette.blue.base};
+  word-break: break-all;
+`;
+
+const FlexLinkWrapper = styled(Flex)`
+  @media ${theme.screenSize.upToMedium} {
+    flex-direction: column;
+    align-items: start;
+  }
 `;
 
 const ChangeTypeBadge = styled(Badge)`
@@ -23,15 +32,7 @@ const ChangeTypeBadge = styled(Badge)`
 
 const ChangeListUL = styled.ul`
   margin: 0;
-  padding-left: 7px;
-  list-style-type: none;
-
-  li:before {
-    content: '•';
-    vertical-align: top;
-    line-height: 28px;
-    margin-right: 5px;
-  }
+  list-style-position: start;
 `;
 
 const ResourceChangesBlock = ({ path, httpMethod, operationId, tag, changes, changeType, versions }) => {
@@ -43,15 +44,15 @@ const ResourceChangesBlock = ({ path, httpMethod, operationId, tag, changes, cha
   const badge = getChangeTypeBadge[changeType || versions[0].changeType];
 
   return (
-    <Wrapper>
-      <Flex>
+    <Wrapper data-testid="resource-changes-block">
+      <FlexLinkWrapper>
         <LGLink href={resourceLinkUrl} hideExternalIcon>
           <ResourceHeader>
             {httpMethod} {path}
           </ResourceHeader>
         </LGLink>
         {badge ? <ChangeTypeBadge variant={badge.variant}>{badge.label}</ChangeTypeBadge> : null}
-      </Flex>
+      </FlexLinkWrapper>
       <ChangeListUL>
         {resourceChanges.map((change, i) => (
           <Change key={`change-${i}`} {...change} />