@postgres.ai/shared 4.1.2 → 4.2.0-pr-1200

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/HorizontalScrollContainer/types.ts

@@ -1,12 +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
- *--------------------------------------------------------------------------
- */
-
-export type Dimensions = {
-  offsetWidth: number;
-  scrollWidth: number;
-  scrollLeft: number;
-};

package/components/HorizontalScrollContainer/utils.ts

@@ -1,16 +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 { 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

@@ -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,88 +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
-  onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>
-  onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>
-}
-
-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}
-        onMouseEnter={props.onMouseEnter}
-        onMouseLeave={props.onMouseLeave}
-      >
-        {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/PageSpinner/index.tsx

@@ -1,18 +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 { 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/ResetCloneModal/index.tsx

@@ -1,149 +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 { 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'
-import { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
-
-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: (
-                <>
-                  {formatDateWithDistance(snapshot.dataStateAt, snapshot.dataStateAtDate)}
-                  {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>
-  )
-}

package/components/SectionTitle/index.tsx

@@ -1,74 +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 { DefaultTheme, makeStyles } from '@material-ui/styles'
-import clsx from 'clsx'
-
-import { colors } from '@postgres.ai/shared/styles/colors'
-
-type Props = {
-  level: 1 | 2
-  tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  text: React.ReactNode
-  className?: string
-  rightContent?: React.ReactNode
-  children?: React.ReactNode
-  contentClassName?: string
-}
-
-const LEVEL_TO_FONT_SIZE = {
-  1: '16px',
-  2: '14px',
-}
-
-const LEVEL_TO_BOTTOM_PADDING = {
-  1: '16px',
-  2: '8px',
-}
-
-const useStyles = makeStyles<DefaultTheme, { level: Props['level'] }>(
-  {
-    root: {
-      borderBottom: `1px solid ${colors.consoleStroke}`,
-    },
-    content: (props) => ({
-      display: 'flex',
-      alignItems: 'center',
-      paddingBottom: LEVEL_TO_BOTTOM_PADDING[props.level],
-    }),
-    text: (props) => ({
-      margin: '0 10px 0 0',
-      fontSize: LEVEL_TO_FONT_SIZE[props.level],
-    }),
-  },
-  { index: 1 },
-)
-
-export const SectionTitle = (props: Props) => {
-  const {
-    text,
-    tag: Tag,
-    level,
-    rightContent,
-    children,
-    className,
-    contentClassName,
-  } = props
-
-  const classes = useStyles({ level })
-
-  return (
-    <div className={clsx(classes.root, className)}>
-      <div className={clsx(classes.content, contentClassName)}>
-        <Tag className={classes.text}>{text}</Tag>
-        {rightContent}
-      </div>
-      {children}
-    </div>
-  )
-}

package/components/Select/index.tsx

@@ -1,43 +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 { MenuItem } from '@material-ui/core'
-
-import { TextField, TextFieldProps } from '@postgres.ai/shared/components/TextField'
-
-type Value = string | number
-
-type Props = {
-  items: {
-    value: Value
-    children: React.ReactNode
-  }[]
-  value: Value | null
-  onChange: TextFieldProps['onChange']
-  className?: TextFieldProps['className']
-  label: TextFieldProps['label']
-  fullWidth?: TextFieldProps['fullWidth']
-  disabled?: TextFieldProps['disabled']
-  error?: boolean
-  style?: TextFieldProps['style']
-}
-
-export const Select = (props: Props) => {
-  const { items, ...textFieldProps } = props
-  return (
-    <TextField select {...textFieldProps}>
-      {items.map((item, i) => {
-        return (
-          <MenuItem value={item.value} key={`${item.value}-${i}`}>
-            {item.children}
-          </MenuItem>
-        )
-      })}
-    </TextField>
-  )
-}