merge with master and resolve conflicts

catalog/app/components/Buttons/Iconized.spec.tsx

@@ -0,0 +1,25 @@
+// TODO: test matching media queries
+// import mediaQuery from 'css-mediaquery'
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+import * as Buttons from './'
+
+describe('components/Buttons/Iconized', () => {
+  it('render icon and label', () => {
+    const tree = renderer.create(<Buttons.Iconized icon="ac_unit" label="A" />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+  it('render rotated', () => {
+    const tree = renderer
+      .create(<Buttons.Iconized icon="ac_unit" label="A" rotate />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+  it('render contained', () => {
+    const tree = renderer
+      .create(<Buttons.Iconized icon="ac_unit" label="A" variant="contained" />)
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

catalog/app/components/ButtonIconized.tsx → catalog/app/components/Buttons/Iconized.tsx

@@ -11,21 +11,21 @@ const useStyles = M.makeStyles({
   },
 })
 
-interface ButtonIconShrinkingProps extends M.IconButtonProps {
+interface ButtonIconizedProps extends M.IconButtonProps {
   icon: string
   label: string
   rotate?: boolean
   variant?: 'text' | 'outlined' | 'contained'
 }
 
-export default function ButtonIconShrinking({
+export default function ButtonIconized({
   className,
   label,
   icon,
   rotate,
   variant = 'outlined',
   ...props
-}: ButtonIconShrinkingProps) {
+}: ButtonIconizedProps) {
   const classes = useStyles()
   const t = M.useTheme()
   const sm = M.useMediaQuery(t.breakpoints.down('sm'))

catalog/app/components/Buttons/Skeleton.spec.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import renderer from 'react-test-renderer'
+
+import * as Buttons from './'
+
+describe('components/Buttons/Skeleton', () => {
+  it('render medium by default', () => {
+    const tree = renderer.create(<Buttons.Skeleton />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+  it('render small', () => {
+    const tree = renderer.create(<Buttons.Skeleton size="small" />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+  it('render large', () => {
+    const tree = renderer.create(<Buttons.Skeleton size="large" />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

catalog/app/components/Buttons/Skeleton.tsx

@@ -0,0 +1,37 @@
+import cx from 'classnames'
+import * as React from 'react'
+import * as M from '@material-ui/core'
+
+import Skeleton from 'components/Skeleton'
+
+const useStyles = M.makeStyles((t) => ({
+  root: {
+    borderRadius: '4px',
+    boxShadow: t.shadows[4],
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    width: t.spacing(15),
+  },
+  small: {
+    height: t.spacing(3.75),
+  },
+  medium: {
+    height: t.spacing(4.5),
+  },
+  large: {
+    height: t.spacing(5),
+  },
+}))
+
+interface ButtonSkeletonProps {
+  className?: string
+  size?: 'small' | 'medium' | 'large'
+}
+
+export default function ButtonSkeleton({
+  className,
+  size = 'medium',
+}: ButtonSkeletonProps) {
+  const classes = useStyles()
+  return <Skeleton className={cx(classes.root, classes[size], className)} />
+}

catalog/app/components/Buttons/__snapshots__/Iconized.spec.tsx.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Buttons/Iconized render contained 1`] = `
+<button
+  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSizeSmall MuiButton-sizeSmall"
+  disabled={false}
+  onBlur={[Function]}
+  onDragLeave={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <span
+    className="MuiButton-label"
+  >
+    <span
+      className="MuiButton-startIcon MuiButton-iconSizeSmall"
+    >
+      <span
+        aria-hidden={true}
+        className="material-icons MuiIcon-root makeStyles-icon-1"
+      >
+        ac_unit
+      </span>
+    </span>
+    A
+  </span>
+</button>
+`;
+
+exports[`components/Buttons/Iconized render icon and label 1`] = `
+<button
+  className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall"
+  disabled={false}
+  onBlur={[Function]}
+  onDragLeave={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <span
+    className="MuiButton-label"
+  >
+    <span
+      className="MuiButton-startIcon MuiButton-iconSizeSmall"
+    >
+      <span
+        aria-hidden={true}
+        className="material-icons MuiIcon-root makeStyles-icon-1"
+      >
+        ac_unit
+      </span>
+    </span>
+    A
+  </span>
+</button>
+`;
+
+exports[`components/Buttons/Iconized render rotated 1`] = `
+<button
+  className="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedSizeSmall MuiButton-sizeSmall"
+  disabled={false}
+  onBlur={[Function]}
+  onDragLeave={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  tabIndex={0}
+  type="button"
+>
+  <span
+    className="MuiButton-label"
+  >
+    <span
+      className="MuiButton-startIcon MuiButton-iconSizeSmall"
+    >
+      <span
+        aria-hidden={true}
+        className="material-icons MuiIcon-root makeStyles-icon-1 makeStyles-iconRotated-2"
+      >
+        ac_unit
+      </span>
+    </span>
+    A
+  </span>
+  <span
+    className="MuiTouchRipple-root"
+  />
+</button>
+`;

catalog/app/components/Buttons/__snapshots__/Skeleton.spec.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/Buttons/Skeleton render large 1`] = `
+<div
+  className="MuiBox-root MuiBox-root-10 makeStyles-root-1 makeStyles-large-4 makeStyles-root-5 makeStyles-animate-7"
+/>
+`;
+
+exports[`components/Buttons/Skeleton render medium by default 1`] = `
+<div
+  className="MuiBox-root MuiBox-root-8 makeStyles-root-1 makeStyles-medium-3 makeStyles-root-5 makeStyles-animate-7"
+/>
+`;
+
+exports[`components/Buttons/Skeleton render small 1`] = `
+<div
+  className="MuiBox-root MuiBox-root-9 makeStyles-root-1 makeStyles-small-2 makeStyles-root-5 makeStyles-animate-7"
+/>
+`;

catalog/app/components/Buttons/index.ts

@@ -0,0 +1,2 @@
+export { default as Iconized } from './Iconized'
+export { default as Skeleton } from './Skeleton'

catalog/app/components/FileEditor/Controls.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as M from '@material-ui/core'
 
-import ButtonIconized from 'components/ButtonIconized'
+import * as Buttons from 'components/Buttons'
 import { EditorState } from './State'
 
 interface AddFileButtonProps {
@@ -52,7 +52,7 @@ export function Controls({
   if (!editing)
     return (
       <>
-        <ButtonIconized
+        <Buttons.Iconized
           className={className}
           disabled={disabled}
           icon="edit"
@@ -72,8 +72,8 @@ export function Controls({
     )
   return (
     <M.ButtonGroup disabled={disabled} className={className} size="small">
-      <ButtonIconized icon="undo" onClick={onCancel} label="Cancel" />
-      <ButtonIconized
+      <Buttons.Iconized icon="undo" onClick={onCancel} label="Cancel" />
+      <Buttons.Iconized
         color="primary"
         icon="save"
         label="Save"

catalog/app/components/SearchResults/SearchResults.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import * as BreadCrumbs from 'components/BreadCrumbs'
-import ButtonIconized from 'components/ButtonIconized'
+import * as Buttons from 'components/Buttons'
 import JsonDisplay from 'components/JsonDisplay'
 import Pagination from 'components/Pagination2'
 import * as Preview from 'components/Preview'
@@ -81,7 +81,7 @@ function ObjectHeader({ handle, showBucket, downloadable = false, expanded, onTo
     <Heading display="flex" alignItems="center" mb="0 !important">
       <ObjectCrumbs {...{ handle, showBucket }} />
       <M.Box flexGrow={1} />
-      <ButtonIconized
+      <Buttons.Iconized
         label={expanded ? 'Collapse' : 'Expand'}
         icon={expanded ? 'unfold_less' : 'unfold_more'}
         rotate={expanded}

catalog/app/containers/Bucket/Dir.tsx

@@ -7,6 +7,7 @@ import * as RRDom from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import * as BreadCrumbs from 'components/BreadCrumbs'
+import * as Buttons from 'components/Buttons'
 import type * as DG from 'components/DataGrid'
 import * as FileEditor from 'components/FileEditor'
 import cfg from 'constants/config'
@@ -398,7 +399,7 @@ export default function Dir({
                     Create package from directory
                   </Successors.Button>
                 ),
-              Pending: () => null, // TODO: Buttons.Skeleton
+              Pending: () => <Buttons.Skeleton className={classes.button} size="small" />,
               Init: () => null,
             },
             prefs,

catalog/app/containers/Bucket/Download.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import cfg from 'constants/config'
 import mkStorage from 'utils/storage'
 
-import ButtonIconized from 'components/ButtonIconized'
+import * as Buttons from 'components/Buttons'
 
 import * as FileView from './FileView'
 
@@ -19,7 +19,7 @@ export function DownloadButton({ className, label, onClick, path }: DownloadButt
 
   if (cfg.desktop) {
     return (
-      <ButtonIconized
+      <Buttons.Iconized
         className={className}
         label={label}
         icon="archive"

catalog/app/containers/Bucket/File.js

@@ -8,7 +8,7 @@ import { Link, useHistory } from 'react-router-dom'
 import * as M from '@material-ui/core'
 
 import * as BreadCrumbs from 'components/BreadCrumbs'
-import ButtonIconized from 'components/ButtonIconized'
+import * as Buttons from 'components/Buttons'
 import * as FileEditor from 'components/FileEditor'
 import Message from 'components/Message'
 import * as Preview from 'components/Preview'
@@ -490,7 +490,7 @@ export default function File({
               onSave={handleEditorSave}
             />
           )}
-          <ButtonIconized
+          <Buttons.Iconized
             className={classes.button}
             icon={isBookmarked ? 'turned_in' : 'turned_in_not'}
             label={isBookmarked ? 'Remove from bookmarks' : 'Add to bookmarks'}

catalog/app/containers/Bucket/FileView.js

@@ -4,7 +4,7 @@ import * as redux from 'react-redux'
 import * as M from '@material-ui/core'
 
 // import Message from 'components/Message'
-import ButtonIconized from 'components/ButtonIconized'
+import * as Buttons from 'components/Buttons'
 import SelectDropdown from 'components/SelectDropdown'
 import cfg from 'constants/config'
 import { tokens as tokensSelector } from 'containers/Auth/selectors'
@@ -16,7 +16,7 @@ export * from './Meta'
 
 export function DownloadButton({ className, handle }) {
   return AWS.Signer.withDownloadUrl(handle, (url) => (
-    <ButtonIconized
+    <Buttons.Iconized
       className={className}
       href={url}
       download
@@ -60,7 +60,12 @@ export function ZipDownloadForm({ className, suffix, label, newTab = false }) {
       style={{ flexShrink: 0 }}
     >
       <input type="hidden" name="token" value={token} />
-      <ButtonIconized className={className} label={label} icon="archive" type="submit" />
+      <Buttons.Iconized
+        className={className}
+        label={label}
+        icon="archive"
+        type="submit"
+      />
     </form>
   )
 }