@postgres.ai/shared 4.0.4 → 4.1.0

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/MenuButton/index.tsx

@@ -0,0 +1,88 @@
+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

@@ -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/ResetCloneModal/index.tsx

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

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

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

package/components/SimpleModalControls/index.tsx

@@ -0,0 +1,56 @@
+/*--------------------------------------------------------------------------
+ * 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'
+
+import { Button } from '@postgres.ai/shared/components/Button'
+
+type Props = {
+  items: {
+    text: string
+    variant?: 'primary' | 'secondary'
+    onClick: () => void
+    isDisabled?: boolean
+  }[]
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginTop: '16px',
+    },
+    button: {
+      marginLeft: '8px',
+    },
+  },
+  { index: 1 },
+)
+
+export const SimpleModalControls = (props: Props) => {
+  const classes = useStyles()
+
+  return (
+    <div className={classes.root}>
+      {props.items.map((item) => {
+        return (
+          <Button
+            key={item.text}
+            className={classes.button}
+            onClick={item.onClick}
+            variant={item.variant}
+            isDisabled={item.isDisabled}
+          >
+            {item.text}
+          </Button>
+        )
+      })}
+    </div>
+  )
+}

package/components/Spinner/icon.tsx

@@ -0,0 +1,29 @@
+export const SpinnerIcon = ({ className }: { className: string }) => (
+  <svg
+    width="144px"
+    height="144px"
+    viewBox="0 0 144 144"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    className={className}
+  >
+    <title>Oval</title>
+    <g
+      id="Page-1"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      strokeDasharray="100.5309677124023"
+      strokeLinecap="round"
+    >
+      <path
+        d="M72,136 C107.346224,136 136,107.346224 136,72 C136,36.653776 107.346224,8 72,8 C36.653776,8 8,36.653776 8,72 C8,107.346224 36.653776,136 72,136 Z"
+        id="Oval"
+        stroke="currentColor"
+        strokeWidth="16"
+      ></path>
+    </g>
+  </svg>
+)

package/components/Spinner/index.tsx

@@ -0,0 +1,16 @@
+import cn from 'classnames'
+import { SpinnerIcon } from './icon'
+
+import styles from './styles.module.scss'
+
+export type Size = 'sm' | 'md' | 'lg'
+
+export type Props = {
+  size?: Size
+  className?: string
+}
+
+export const Spinner = (props: Props) => {
+  const { size = 'md' } = props
+  return <SpinnerIcon className={cn(styles.root, styles[size], props.className)} />
+}