@postgres.ai/shared 3.5.1-pr-1027.0

package/components/HorizontalScrollContainer/index.tsx

@@ -0,0 +1,131 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React, { useState, useRef, useLayoutEffect, useEffect } from 'react'
+import { makeStyles } from '@material-ui/core'
+import clsx from 'clsx'
+
+import {
+  createTransitionInteractive,
+  borderRadius,
+} from '@postgres.ai/shared/styles/vars'
+
+import { checkIsVisibleLeftCurtain, checkIsVisibleRightCurtain } from './utils'
+import { Dimensions } from './types'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      position: 'relative',
+      overflow: 'hidden',
+
+      [theme.breakpoints.down('xs')]: {
+        borderRadius,
+      },
+    },
+    curtain: {
+      position: 'absolute',
+      top: 0,
+      width: '25px',
+      height: '100%',
+      pointerEvents: 'none',
+      transition: createTransitionInteractive('opacity'),
+    },
+    curtainLeft: {
+      left: 0,
+      background: 'linear-gradient(to right, rgba(0,0,0,0.08), transparent);',
+    },
+    curtainRight: {
+      right: 0,
+      background: 'linear-gradient(to left, rgba(0,0,0,0.08), transparent);',
+    },
+    curtainHidden: {
+      opacity: 0,
+    },
+    content: {
+      overflow: 'auto',
+    },
+  }),
+  { index: 1 },
+)
+
+type Props = {
+  children: React.ReactNode
+  classes?: {
+    root?: string
+    content?: string
+    curtain?: string
+    curtainLeft?: string
+    curtainRight?: string
+  }
+}
+
+export const HorizontalScrollContainer = (props: Props) => {
+  const classes = useStyles()
+
+  const [dimensions, setDimensions] = useState<Dimensions | null>(null)
+
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const calcDimensions = () => {
+    if (!contentRef.current) {
+      return
+    }
+
+    const { offsetWidth, scrollWidth, scrollLeft } = contentRef.current
+
+    setDimensions({
+      offsetWidth,
+      scrollWidth,
+      scrollLeft,
+    })
+  }
+
+  // Initial calculation.
+  useLayoutEffect(() => {
+    calcDimensions()
+  }, [])
+
+  // Listen window resizes for the next calculations.
+  useEffect(() => {
+    window.addEventListener('resize', calcDimensions)
+    return () => window.removeEventListener('resize', calcDimensions)
+  }, [])
+
+  const isVisibleLeft = dimensions && checkIsVisibleLeftCurtain(dimensions)
+  const isVisibleRight = dimensions && checkIsVisibleRightCurtain(dimensions)
+
+  return (
+    <div className={clsx(classes.root, props.classes?.root)}>
+      <div
+        className={clsx(
+          classes.curtain,
+          classes.curtainLeft,
+          !isVisibleLeft && classes.curtainHidden,
+          props.classes?.curtain,
+          props.classes?.curtainLeft,
+        )}
+      />
+      <div
+        ref={contentRef}
+        className={clsx(classes.content, props.classes?.content)}
+        onScroll={calcDimensions}
+      >
+        {props.children}
+      </div>
+      <div
+        className={clsx(
+          classes.curtain,
+          classes.curtainRight,
+          !isVisibleRight && classes.curtainHidden,
+          props.classes?.curtain,
+          props.classes?.curtainRight,
+        )}
+      />
+    </div>
+  )
+}

package/components/HorizontalScrollContainer/types.ts

@@ -0,0 +1,12 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+export type Dimensions = {
+  offsetWidth: number;
+  scrollWidth: number;
+  scrollLeft: number;
+};

package/components/HorizontalScrollContainer/utils.ts

@@ -0,0 +1,16 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import { Dimensions } from './types';
+
+export const checkIsVisibleLeftCurtain = (dimensions: Dimensions) => {
+  return dimensions.scrollLeft > 0;
+};
+
+export const checkIsVisibleRightCurtain = (dimensions: Dimensions) => {
+  return dimensions.scrollLeft < dimensions.scrollWidth - dimensions.offsetWidth;
+};

package/components/ImportantText/index.tsx

@@ -0,0 +1,29 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+import { makeStyles } from '@material-ui/core'
+
+type Props = {
+  children: React.ReactNode
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      fontWeight: 'bold',
+      whiteSpace: 'nowrap',
+    },
+  },
+  { index: 1 },
+)
+
+export const ImportantText = (props: Props) => {
+  const classes = useStyles()
+
+  return <span className={classes.root}>{props.children}</span>
+}

package/components/Link2/index.tsx

@@ -0,0 +1,31 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import { Link as LinkBase, LinkProps } from 'react-router-dom'
+import cn from 'classnames'
+
+import styles from './styles.module.scss'
+
+type Props = LinkProps & { external?: boolean }
+
+export const Link = (props: Props) => {
+  const { className, external, to, ...otherProps } = props
+
+  if (external) {
+    return (
+      <a
+        href={to as string}
+        {...otherProps}
+        className={cn(styles.root, className)}
+        target="_blank"
+        rel="noopener noreferrer"
+      />
+    )
+  }
+
+  return <LinkBase to={to} {...otherProps} className={cn(styles.root, className)} />
+}

package/components/Link2/styles.module.scss

@@ -0,0 +1,12 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  color: $color-blue-main;
+
+  @include touch-transition(color);
+
+  &:hover {
+    color: $color-blue-dark;
+  }
+}

package/components/MenuButton/index.tsx

@@ -0,0 +1,80 @@
+import cn from 'classnames'
+import { NavLink } from 'react-router-dom'
+
+import { GatewayLink } from '@postgres.ai/shared/components/GatewayLink'
+
+import styles from './styles.module.scss'
+
+type BaseProps = {
+  children: React.ReactNode
+  className?: string
+  icon?: React.ReactNode
+  isCollapsed?: boolean
+}
+
+type ButtonProps = BaseProps & {
+  type?: 'button' | 'submit'
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+  disabled?: boolean
+}
+
+type LinkProps = BaseProps & {
+  type: 'link'
+  to: string
+  activeClassName: string
+}
+
+type GatewayLinkProps = BaseProps & {
+  type: 'gateway-link'
+  href: string
+}
+
+type Props = ButtonProps | LinkProps | GatewayLinkProps
+
+export const Button = (props: Props) => {
+  const className = cn(
+    styles.root,
+    props.isCollapsed && styles.collapsed,
+    props.className,
+  )
+
+  const children = (
+    <>
+      {props.icon && (
+        <span
+          className={cn(styles.icon, props.isCollapsed && styles.collapsed)}
+        >
+          {props.icon}
+        </span>
+      )}
+      {!props.isCollapsed && props.children}
+    </>
+  )
+
+  if (!props.type || props.type === 'button' || props.type === 'submit')
+    return (
+      <button className={className} onClick={props.onClick} disabled={props.disabled}>
+        {children}
+      </button>
+    )
+
+  if (props.type === 'link')
+    return (
+      <NavLink
+        className={className}
+        to={props.to}
+        activeClassName={props.activeClassName}
+      >
+        {children}
+      </NavLink>
+    )
+
+  if (props.type === 'gateway-link')
+    return (
+      <GatewayLink className={className} href={props.href}>
+        {children}
+      </GatewayLink>
+    )
+
+  return null
+}

package/components/MenuButton/styles.module.scss

@@ -0,0 +1,42 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background-color: $color-gray-darkest;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 0;
+  height: 48px;
+  width: 100%;
+  color: inherit;
+  white-space: nowrap;
+  overflow: hidden;
+  font-weight: 700;
+  text-decoration: none;
+
+  @include touch-transition(background-color color);
+
+  &:hover {
+    background-color: $color-gray-darkest--hover;
+    color: inherit;
+  }
+
+  &.collapsed {
+    justify-content: center;
+  }
+
+  + .root {
+    margin-top: 8px;
+  }
+}
+
+.icon {
+  font-size: 0;
+
+  &:not(.collapsed) {
+    margin-right: 8px;
+  }
+}

package/components/Modal/index.tsx

@@ -0,0 +1,93 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import React from 'react'
+import { makeStyles, Dialog, IconButton } from '@material-ui/core'
+import { Close as CloseIcon } from '@material-ui/icons'
+import clsx from 'clsx'
+
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  children: React.ReactNode
+  title: React.ReactNode
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  titleRightContent?: React.ReactNode
+  headerContent?: React.ReactNode
+  classes?: {
+    content?: string
+  }
+}
+
+const useStyles = makeStyles(
+  (theme) => ({
+    root: {
+      padding: '24px',
+      width: '100%',
+
+      [theme.breakpoints.down('xs')]: {
+        padding: '20px',
+        margin: '20px',
+        maxHeight: 'calc(100% - 40px)',
+      },
+    },
+    closeButton: {
+      position: 'absolute',
+      right: '12px',
+      top: '12px',
+      color: colors.pgaiDarkGray,
+    },
+    titleContent: {
+      paddingRight: '36px',
+    },
+    content: {
+      marginTop: '16px',
+    },
+  }),
+  { index: 1 },
+)
+
+export const Modal = (props: Props) => {
+  const {
+    isOpen,
+    onClose,
+    children,
+    title,
+    size = 'xs',
+    titleRightContent,
+  } = props
+
+  const classes = useStyles()
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      classes={{ paper: classes.root }}
+      maxWidth={size}
+    >
+      <IconButton className={classes.closeButton} onClick={onClose}>
+        <CloseIcon />
+      </IconButton>
+      <SectionTitle
+        text={title}
+        tag="h3"
+        level={1}
+        rightContent={titleRightContent}
+        contentClassName={classes.titleContent}
+      >
+        {props.headerContent}
+      </SectionTitle>
+      <div className={clsx(classes.content, props.classes?.content)}>
+        {children}
+      </div>
+    </Dialog>
+  )
+}

package/components/PageSpinner/index.tsx

@@ -0,0 +1,18 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+
+import styles from './styles.module.scss'
+
+export const PageSpinner = () => {
+  return (
+    <div className={styles.root}>
+      <Spinner size='lg' />
+    </div>
+  )
+}

package/components/PageSpinner/styles.module.scss

@@ -0,0 +1,13 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 100%;
+}

package/components/ResetCloneModal/index.tsx

@@ -0,0 +1,154 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import { useEffect, useState } from 'react'
+import { makeStyles } from '@material-ui/core'
+import { formatDistanceToNowStrict } from 'date-fns'
+
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
+import { Text } from '@postgres.ai/shared/components/Text'
+import { Modal } from '@postgres.ai/shared/components/Modal'
+import { Select } from '@postgres.ai/shared/components/Select'
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
+import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  clone: Clone
+  onResetClone: (snapshotId: string) => void
+  snapshots: Snapshot[] | null
+  version: string | null | undefined
+}
+
+const useStyles = makeStyles(
+  {
+    snapshots: {
+      margin: '16px 0 0 0',
+    },
+    snapshotTag: {
+      marginLeft: '4px',
+      fontWeight: 700,
+    },
+  },
+  { index: 1 },
+)
+
+export const ResetCloneModal = (props: Props) => {
+  const { isOpen, onClose, clone, onResetClone, snapshots } = props
+
+  const classes = useStyles()
+
+  // `slice` here is the mobx requirement.
+  const sortedSnapshots = snapshots?.slice().sort(compareSnapshotsDesc)
+
+  const [selectedSnapshotId, setSelectedSnapshotId] = useState<string | null>(
+    null,
+  )
+
+  const selectCurrentSnapshot = () => {
+    if (!sortedSnapshots) return
+
+    const currentSnapshot = sortedSnapshots.find(
+      (snapshot) => snapshot.id === clone.snapshot?.id,
+    )
+
+    if (!currentSnapshot) return
+
+    setSelectedSnapshotId(currentSnapshot.id)
+  }
+
+  useEffect(selectCurrentSnapshot, [Boolean(sortedSnapshots)])
+
+  const handleClickReset = () => {
+    if (!selectedSnapshotId) return
+    onResetClone(selectedSnapshotId)
+    onClose()
+  }
+
+  const handleClickResetToLatest = () => {
+    if (!sortedSnapshots) return
+    const [latestSnapshot] = sortedSnapshots
+    if (!latestSnapshot) return
+    onResetClone(latestSnapshot.id)
+    onClose()
+  }
+
+  const isSnapshotsSelectingSupported = Boolean(props.version)
+
+  const isSnapshotsSelectingDisabled =
+    !sortedSnapshots || !isSnapshotsSelectingSupported
+
+  return (
+    <Modal
+      title={`Reset clone ${clone.id}`}
+      isOpen={isOpen}
+      onClose={onClose}
+      titleRightContent={!sortedSnapshots && <Spinner size="sm" />}
+    >
+      <Text>
+        All changes to the clone <ImportantText>{clone.id}</ImportantText> will
+        be reset to chosen data state time.
+      </Text>
+      <Select
+        disabled={isSnapshotsSelectingDisabled}
+        label="Data state time"
+        value={selectedSnapshotId}
+        items={
+          sortedSnapshots?.map((snapshot, i) => {
+            const isLatest = i === 0
+            const isCurrent = snapshot.id === clone.snapshot?.id
+
+            return {
+              value: snapshot.id,
+              children: (
+                <>
+                  {snapshot.dataStateAt} (
+                  {formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                    addSuffix: true,
+                  })}
+                  )
+                  {isLatest && (
+                    <span className={classes.snapshotTag}>Latest</span>
+                  )}
+                  {isCurrent && (
+                    <span className={classes.snapshotTag}>Current</span>
+                  )}
+                </>
+              ),
+            }
+          }) ?? []
+        }
+        onChange={(e) => setSelectedSnapshotId(e.target.value)}
+        fullWidth={true}
+        className={classes.snapshots}
+      />
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Cancel',
+            onClick: onClose,
+          },
+          {
+            text: 'Reset to latest',
+            onClick: handleClickResetToLatest,
+            isDisabled: isSnapshotsSelectingDisabled,
+          },
+          {
+            text: 'Reset',
+            isDisabled: !selectedSnapshotId,
+            variant: 'primary',
+            onClick: handleClickReset,
+          },
+        ]}
+      />
+    </Modal>
+  )
+}