Upgrade Prettier to v2 (#357)

.prettierrc

@@ -1,8 +1,7 @@
 {
-  "printWidth": 120,
-  "tabWidth": 2,
-  "singleQuote": true,
   "bracketSpacing": true,
-  "trailingComma": "es5",
   "jsxBracketSameLine": false,
+  "printWidth": 120,
+  "singleQuote": true,
+  "tabWidth": 2,
 }

__mocks__/gatsby.js

@@ -6,7 +6,7 @@ module.exports = {
   ...gatsby,
   graphql: jest.fn(),
   StaticQuery: jest.fn(),
-  withPrefix: jest.fn().mockImplementation(str => str),
+  withPrefix: jest.fn().mockImplementation((str) => str),
   useStaticQuery: jest.fn(),
   // https://www.gatsbyjs.org/docs/unit-testing/
   Link: jest.fn().mockImplementation(

gatsby-node.js

@@ -55,7 +55,7 @@ exports.sourceNodes = async () => {
   }
 
   const pageIdPrefix = constructPageIdPrefix(siteMetadata);
-  documents.forEach(doc => {
+  documents.forEach((doc) => {
     const { page_id, ...rest } = doc;
     RESOLVED_REF_DOC_MAPPING[page_id.replace(`${pageIdPrefix}/`, '')] = rest;
   });
@@ -65,7 +65,7 @@ exports.sourceNodes = async () => {
     const pageNode = getNestedValue(['ast', 'children'], val);
     const filename = getNestedValue(['filename'], val) || '';
     if (pageNode) {
-      val.static_assets.forEach(asset => {
+      val.static_assets.forEach((asset) => {
         const checksum = asset.checksum;
         if (assets.has(checksum)) {
           assets.set(checksum, new Set([...assets.get(checksum), asset.key]));
@@ -97,7 +97,7 @@ exports.createPages = async ({ actions }) => {
   }
 
   return new Promise((resolve, reject) => {
-    PAGES.forEach(page => {
+    PAGES.forEach((page) => {
       const pageNodes = RESOLVED_REF_DOC_MAPPING[page]?.ast;
 
       const slug = getPageSlug(page);

package.json

@@ -18,7 +18,7 @@
     "jest": "^26.6.3",
     "jest-emotion": "^10.0.27",
     "lint-staged": "^10.5.4",
-    "prettier": "^1.19.1"
+    "prettier": "^2.2.1"
   },
   "scripts": {
     "build": "gatsby build --prefix-paths",
@@ -31,7 +31,7 @@
     "lint:fix": "npm run lint -- --fix",
     "postinstall": "husky install",
     "postversion": "git push origin v$npm_package_version && git push origin master",
-    "prettier": "prettier \"**/*.{js,jsx,json,md}\"",
+    "prettier": "prettier '**/*.{js,jsx,json,md}' '!docs-tools/**'",
     "preversion": "npm run ensure-master && npm run format && npm run lint && npm run test",
     "serve": "gatsby serve --prefix-paths",
     "test": "jest",

src/components/CSSWrapper.js

@@ -17,7 +17,7 @@ export default class CSSWrapper extends React.Component {
       // classList.add() can only handle strings that do not contain spaces, so convert strings to an array of space-free
       // strings and iterate over this array in order to add multiple classes
       const classes = typeof className === 'string' ? className.split(' ') : className;
-      classes.forEach(name => {
+      classes.forEach((name) => {
         childNode.classList.add(name);
       });
     }

src/components/Code.js

@@ -22,12 +22,12 @@ const URI_PLACEHOLDERS = [
   URISTRING_SHELL_NOUSER_PLACEHOLDER,
 ];
 
-const htmlDecode = input => {
+const htmlDecode = (input) => {
   const doc = new DOMParser().parseFromString(input, 'text/html');
   return doc.documentElement.textContent;
 };
 
-const getLanguage = lang => {
+const getLanguage = (lang) => {
   if (Object.values(Language).includes(lang)) {
     return lang;
   } else if (lang === 'sh') {
@@ -48,7 +48,7 @@ const Code = ({
 
   let code = value;
 
-  if (activeTabs && URI_PLACEHOLDERS.some(placeholder => code.includes(placeholder))) {
+  if (activeTabs && URI_PLACEHOLDERS.some((placeholder) => code.includes(placeholder))) {
     const { cloud } = activeTabs;
     const activeUri = cloud === 'cloud' ? cloudURI : localURI;
     code = ReactDOMServer.renderToString(<URIText value={code} activeDeployment={cloud} uriData={activeUri} />);

src/components/ComponentFactory.js

@@ -159,7 +159,7 @@ const componentMap = {
   versionchanged: VersionModified,
 };
 
-const ComponentFactory = props => {
+const ComponentFactory = (props) => {
   const { nodeData, slug } = props;
 
   const selectComponent = () => {

src/components/Container.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ComponentFactory from './ComponentFactory';
 
 const Container = ({ nodeData: { argument, children }, ...rest }) => {
-  const customClass = argument.map(node => node.value).join(' ');
+  const customClass = argument.map((node) => node.value).join(' ');
   return (
     <div className={`${customClass} docutils container`}>
       {children.map((element, index) => (

src/components/DocumentBody.js

@@ -31,10 +31,11 @@ const normalizeCssClassNodes = (nodes, key, value) => {
 // Returns a map wherein each key is the footnote name, and each value is an object containing:
 // - labels: the numerical label for the footnote
 // - references: a list of the footnote reference ids that refer to this footnote
-const getFootnotes = nodes => {
+const getFootnotes = (nodes) => {
   const footnotes = findAllKeyValuePairs(nodes, 'type', 'footnote');
   const footnoteReferences = findAllKeyValuePairs(nodes, 'type', 'footnote_reference');
-  const numAnonRefs = footnoteReferences.filter(node => !Object.prototype.hasOwnProperty.call(node, 'refname')).length;
+  const numAnonRefs = footnoteReferences.filter((node) => !Object.prototype.hasOwnProperty.call(node, 'refname'))
+    .length;
   // We label our footnotes by their index, regardless of their names to
   // circumvent cases such as [[1], [#], [2], ...]
   return footnotes.reduce((map, footnote, index) => {
@@ -62,7 +63,7 @@ const getFootnotes = nodes => {
 // Find all footnote_reference node IDs associated with a given footnote by
 // that footnote's refname
 const getNamedFootnoteReferences = (footnoteReferences, refname) => {
-  return footnoteReferences.filter(node => node.refname === refname).map(node => node.id);
+  return footnoteReferences.filter((node) => node.refname === refname).map((node) => node.id);
 };
 
 // They are used infrequently, but here we match an anonymous footnote to its reference.

src/components/Figure.js

@@ -13,13 +13,13 @@ export default class Figure extends Component {
     };
   }
 
-  imgShouldHaveLightbox = img => {
+  imgShouldHaveLightbox = (img) => {
     const naturalArea = img.naturalWidth * img.naturalHeight;
     const clientArea = img.clientWidth * img.clientHeight;
     return clientArea < naturalArea * 0.9;
   };
 
-  handleImageLoaded = imgRef => {
+  handleImageLoaded = (imgRef) => {
     this.setState({
       isLightboxSize: this.imgShouldHaveLightbox(imgRef),
     });

src/components/GuideSection.js

@@ -15,9 +15,9 @@ export default class GuideSection extends Component {
     };
   }
 
-  handleUpdateURIWriter = uri => {
+  handleUpdateURIWriter = (uri) => {
     this.setState(
-      prevState => ({
+      (prevState) => ({
         uriWriter: {
           ...prevState.uri,
           ...uri,

src/components/Heading.js

@@ -25,7 +25,7 @@ const Heading = ({ sectionDepth, nodeData, ...rest }) => {
   return (
     <ConditionalWrapper
       condition={shouldShowMobileHeader}
-      wrapper={children => (
+      wrapper={(children) => (
         <>
           <HeadingContainer stackVertically={isMobile}>
             {children}
@@ -51,7 +51,7 @@ const Heading = ({ sectionDepth, nodeData, ...rest }) => {
 
 const HeadingContainer = styled.div`
   display: flex;
-  flex-direction: ${props => (props.stackVertically ? 'column' : 'row')};
+  flex-direction: ${(props) => (props.stackVertically ? 'column' : 'row')};
   justify-content: space-between;
 `;
 

src/components/LandingPage/Card.js

@@ -7,10 +7,10 @@ import { getNestedValue } from '../../utils/get-nested-value';
 const DEFAULT_COMPLETION_TIME = 15;
 
 const Card = ({ card, guidesMetadata }) => {
-  const getCardTitle = cardSlug => getNestedValue([cardSlug, 'title'], guidesMetadata);
-  const getCompletionTime = cardSlug =>
+  const getCardTitle = (cardSlug) => getNestedValue([cardSlug, 'title'], guidesMetadata);
+  const getCompletionTime = (cardSlug) =>
     getNestedValue([cardSlug, 'completionTime'], guidesMetadata) || DEFAULT_COMPLETION_TIME;
-  const getPills = cardSlug => getNestedValue([cardSlug, 'languages'], guidesMetadata);
+  const getPills = (cardSlug) => getNestedValue([cardSlug, 'languages'], guidesMetadata);
 
   const cardContent = () => {
     const cardSlug = getNestedValue(['argument', 0, 'value'], card);

src/components/LandingPage/CardPills.js

@@ -6,16 +6,16 @@ import { setLocalValue } from '../../utils/browser-storage';
 import { getNestedValue } from '../../utils/get-nested-value';
 
 const CardPills = ({ pillsNode, pillsetName }) => {
-  const getPillTitle = node => getNestedValue(['children', 0, 'children', 0, 'value'], node);
+  const getPillTitle = (node) => getNestedValue(['children', 0, 'children', 0, 'value'], node);
 
   // Get the name of each pill. If the total character length of pills > 50, truncate them and add a "See All" pill.
-  const mapPills = node => {
+  const mapPills = (node) => {
     let totalLength = 0;
     let isTruncated = false;
     const pills = [];
     const pillNodes = getNestedValue(['children', 0, 'children'], node);
     if (pillNodes) {
-      pillNodes.forEach(pillObj => {
+      pillNodes.forEach((pillObj) => {
         const pill = getPillTitle(pillObj);
         if (totalLength > 50) {
           isTruncated = true;
@@ -32,7 +32,7 @@ const CardPills = ({ pillsNode, pillsetName }) => {
 
   const [pills, isTruncated] = mapPills(pillsNode);
 
-  const setActiveLanguage = pill => {
+  const setActiveLanguage = (pill) => {
     setLocalValue(pillsetName, pill);
   };
 

src/components/LandingPage/LandingPageCards.js

@@ -29,14 +29,14 @@ const Category = ({ cards, category, guidesMetadata }) => {
   });
 
   // separate out last row so we can sort it
-  columnSeparatedCards.forEach(cardColumn => {
+  columnSeparatedCards.forEach((cardColumn) => {
     if (cardColumn.length > 0) {
       lastRow.push(cardColumn[cardColumn.length - 1]);
     }
   });
 
   // sort last row by largest height
-  lastRow.sort(a => {
+  lastRow.sort((a) => {
     if (a && a.name === 'multi-card') {
       return -1;
     }
@@ -70,9 +70,9 @@ const Category = ({ cards, category, guidesMetadata }) => {
 };
 
 const LandingPageCards = ({ guides, guidesMetadata }) => {
-  return CATEGORIES.map(category => (
+  return CATEGORIES.map((category) => (
     <Category
-      cards={guides.filter(card => {
+      cards={guides.filter((card) => {
         const cardSlug =
           card.name === 'card'
             ? getNestedValue(['argument', 0, 'value'], card)

src/components/Lightbox.js

@@ -5,18 +5,18 @@ import Image from './Image';
 import { getNestedValue } from '../utils/get-nested-value';
 
 const CAPTION_TEXT = 'click to enlarge';
-const isSvg = imgSrc => /\.svg$/.test(imgSrc);
+const isSvg = (imgSrc) => /\.svg$/.test(imgSrc);
 
 const Lightbox = ({ nodeData, ...rest }) => {
   const [showModal, setShowModal] = useState(false);
   const imgSrc = getNestedValue(['argument', 0, 'value'], nodeData);
   const modal = useRef(null);
 
   const toggleShowModal = () => {
-    setShowModal(prevShowState => !prevShowState);
+    setShowModal((prevShowState) => !prevShowState);
   };
 
-  const handleOnKeyDown = e => {
+  const handleOnKeyDown = (e) => {
     // Escape key
     if (e.keyCode === 27) {
       toggleShowModal();

src/components/ListTable.js

@@ -4,7 +4,7 @@ import { Table, Row, Cell, TableHeader, HeaderRow } from '@leafygreen-ui/table';
 import { css, cx } from '@leafygreen-ui/emotion';
 import ComponentFactory from './ComponentFactory';
 
-const align = key => {
+const align = (key) => {
   switch (key) {
     case 'left':
     case 'right':
@@ -29,7 +29,7 @@ const unstyleThead = css`
   }
 `;
 
-const hasOneChild = children => children.length === 1 && children[0].type === 'paragraph';
+const hasOneChild = (children) => children.length === 1 && children[0].type === 'paragraph';
 
 const ListTableRow = ({ row = [], stubColumnCount, ...rest }) => (
   <Row>

src/components/Modal.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ComponentFactory from './ComponentFactory';
 
-const Modal = props => {
+const Modal = (props) => {
   const { modalProperties } = props;
   return (
     <div

src/components/Navbar.js

@@ -91,7 +91,7 @@ const Navbar = () => {
   const isSearchbarDefaultExpanded = useMedia(
     'only screen and (min-width: 670px) and (max-width: 1200px), (min-width: 1300px)'
   );
-  const isActiveLink = useCallback(link => link.toLowerCase() === activeLink, [activeLink]);
+  const isActiveLink = useCallback((link) => link.toLowerCase() === activeLink, [activeLink]);
   const [isSearchbarExpanded, setIsSearchbarExpanded] = useState(isSearchbarDefaultExpanded);
   const modifyActiveLink = useMemo(
     () =>
@@ -107,7 +107,7 @@ const Navbar = () => {
   const [navprops, setNavprops] = useState(modifyActiveLink);
 
   const onSearchbarExpand = useCallback(
-    isExpanded => {
+    (isExpanded) => {
       // On certain screens the searchbar is never collapsed
       if (!isSearchbarDefaultExpanded) {
         setIsSearchbarExpanded(isExpanded);
@@ -138,7 +138,7 @@ const Navbar = () => {
   return (
     <ConditionalWrapper
       condition={theme.bannerContent.enabled}
-      wrapper={children => (
+      wrapper={(children) => (
         <div
           css={css`
             position: fixed;

src/components/Operation.js

@@ -14,9 +14,9 @@ import { theme } from '../theme/docsTheme';
 
 // Bold path parameters (sections that appear between braces)
 // Add zero-width spaces after forward slashes so that linebreak occurs after a slash, not within a word
-const formatPath = str => {
+const formatPath = (str) => {
   const betweenBraces = new RegExp(/(\{)[^}]+(\})/, 'g');
-  return str.replace(/\//g, `/&#8203;`).replace(betweenBraces, match => `<strong>${match}</strong>`);
+  return str.replace(/\//g, `/&#8203;`).replace(betweenBraces, (match) => `<strong>${match}</strong>`);
 };
 
 const methodBadgeMap = {
@@ -30,7 +30,7 @@ const methodBadgeMap = {
 // Identify the text node to display on the collapsed card
 // If present, show the operation summary. If no summary, show description.
 // Otherwise, show nothing.
-const splitChildren = children => {
+const splitChildren = (children) => {
   if (children.length === 0) {
     return [null, children];
   }
@@ -85,7 +85,7 @@ const bodyMargins = ({ theme }) => css`
 // Truncate text after two lines when the card is collapsed
 const clampText = ({ showDetails }) => css`
   ${!showDetails &&
-    `
+  `
       & > p {
         display: -webkit-box;
         -webkit-line-clamp: 2;

src/components/Searchbar/ExpandedSearchbar.js

@@ -93,7 +93,7 @@ const ExpandedSearchbar = ({ isFocused, onChange, onMobileClose }) => {
   const shouldShowGoButton = useMemo(() => !!searchTerm && !isMobile, [isMobile, searchTerm]);
 
   const onSearchChange = useCallback(
-    e => {
+    (e) => {
       const searchTerm = e.target.value;
       onChange(searchTerm);
     },
@@ -110,7 +110,7 @@ const ExpandedSearchbar = ({ isFocused, onChange, onMobileClose }) => {
   const searchTextbox = useRef(null);
 
   const onKeyDown = useCallback(
-    e => {
+    (e) => {
       // On an "Enter", click the Go button
       if (e.key === 'Enter' || e.keyCode === ENTER_KEY) {
         goButton && goButton.current && goButton.current.click();

src/components/Searchbar/SearchDropdown.js

@@ -42,7 +42,7 @@ const filterButtonHover = css`
   }
 `;
 
-const animationKeyframe = startingOpacity => keyframes`
+const animationKeyframe = (startingOpacity) => keyframes`
     0% {
       opacity: ${startingOpacity};
     }