@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028

package/components/ErrorStub/index.tsx

@@ -1,83 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 { Paper, makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
-
-type Props = {
-  title?: string
-  message?:
-    | string
-    | {
-        details: string
-      }
-  className?: string
-  size?: 'big' | 'normal'
-}
-
-const useStyles = makeStyles(
-  {
-    '*': {
-      margin: 0,
-    },
-    root: {
-      color: '#c00111',
-      overflowWrap: 'break-word',
-    },
-    rootBig: {
-      padding: '16px 24px',
-
-      '& $title': {
-        fontSize: '16px',
-      },
-      '& $message': {
-        marginTop: '16px',
-        fontSize: '14px',
-      },
-    },
-    rootNormal: {
-      padding: '8px 16px',
-
-      '& $title': {
-        fontSize: '14px',
-      },
-      '& $message': {
-        marginTop: '12px',
-        fontSize: '12px',
-      },
-    },
-    title: {
-      fontWeight: 700,
-      textTransform: 'uppercase',
-    },
-    message: {},
-  },
-  { index: 1 },
-)
-
-export const ErrorStub = (props: Props) => {
-  const { title = 'Error', message, className, size = 'big' } = props
-
-  const classes = useStyles()
-
-  return (
-    <Paper
-      className={clsx(
-        classes.root,
-        size === 'big' && classes.rootBig,
-        size === 'normal' && classes.rootNormal,
-        className,
-      )}
-    >
-      <h2 className={classes.title}>{title}</h2>
-      <p className={classes.message}>
-        {typeof message === 'object' ? message.details : message}
-      </p>
-    </Paper>
-  )
-}

package/components/FormattedText/index.tsx

@@ -1,44 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 clsx from 'clsx'
-import copy from 'copy-to-clipboard'
-import useCountDown from 'react-countdown-hook'
-
-import { Button } from '@postgres.ai/shared/components/Button2'
-
-import styles from './styles.module.scss'
-
-type Props = {
-  value: string
-  className?: string
-}
-
-const COOLDOWN_INTERVAL = 1000
-const COOLDOWN_TIME = 1000
-
-export const FormattedText = (props: Props) => {
-  const { value, className } = props
-
-  const [timeLeft, { start }] = useCountDown(0, COOLDOWN_INTERVAL)
-
-  const handleCopy = () => {
-    copy(value)
-    start(COOLDOWN_TIME)
-  }
-
-  return (
-    <div className={clsx(styles.root, className)}>
-      <pre className={styles.content}>{value}</pre>
-      <div className={styles.copyButtonContainer}>
-        <Button size="sm" onClick={handleCopy} className={styles.copyButton}>
-          {timeLeft ? 'Copied' : 'Copy'}
-        </Button>
-      </div>
-    </div>
-  )
-}

package/components/GatewayLink/index.tsx

@@ -1,33 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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 cn from 'classnames'
-
-import styles from '@postgres.ai/shared/components/Link2/styles.module.scss'
-
-type Props = React.DetailedHTMLProps<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  HTMLAnchorElement
->
-
-export const GatewayLink = (props: Props) => {
-  const {
-    rel = 'noopener noreferrer',
-    target = '_blank',
-    className,
-    ...otherProps
-  } = props
-
-  return (
-    <a
-      {...otherProps}
-      target={target}
-      rel={rel}
-      className={cn(styles.root, className)}
-    />
-  )
-}

package/components/HorizontalScrollContainer/index.tsx

@@ -1,131 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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/ImportantText/index.tsx

@@ -1,29 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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

@@ -1,31 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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/MenuButton/index.tsx

@@ -1,80 +0,0 @@
-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/Modal/index.tsx

@@ -1,93 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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/ResetCloneModal/index.tsx

@@ -1,154 +0,0 @@
-/*--------------------------------------------------------------------------
- * 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>
-  )
-}