@postgres.ai/shared 3.5.1-pr-1027.0

package/.gitlab-ci.yml

@@ -0,0 +1,60 @@
+# Conditions.
+.only_ui_feature: &only_ui_feature
+  rules:
+    - if: $CI_PIPELINE_SOURCE == "merge_request_event"
+
+.only_ui_tag_release: &only_ui_tag_release
+  rules:
+    - if: $CI_COMMIT_TAG =~ /^v[a-zA-Z0-9_.-]*/
+
+.shared_base: &shared_base
+  image: node:lts-alpine
+  cache:
+    key: "$CI_COMMIT_REF_SLUG"
+    paths:
+      - .pnpm-store
+  before_script:
+    - apk add --no-cache rsync     
+    - corepack enable
+    - corepack prepare pnpm@8.9.2 --activate
+    - pnpm config set store-dir .pnpm-store
+    - pnpm --dir ui/packages/shared install --frozen-lockfile
+
+build-and-pack-shared:
+  <<: *shared_base
+  stage: build
+  rules:
+    - changes:
+        - ui/packages/shared/**/* 
+  script:
+    - cd ui/packages/shared
+    - pnpm run pack
+  artifacts:
+    paths:
+      - ui/packages/shared/postgres.ai-shared-*.tgz
+
+publish-shared-preview:
+  <<: [*shared_base, *only_ui_feature]
+  stage: publish
+  needs:
+    - job: build-and-pack-shared
+      artifacts: true  
+  script:
+    - cd ui/packages/shared
+    - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+    - export PREID="pr-${CI_MERGE_REQUEST_IID:-preview}"
+    - npm version prerelease --preid $PREID --no-git-tag-version
+    - pnpm publish --no-git-checks --tag $PREID
+
+publish-shared-release:
+  <<: [*shared_base, *only_ui_tag_release]
+  stage: publish
+  needs:
+    - job: build-and-pack-shared
+      artifacts: true  
+  script:
+    - cd ui/packages/shared
+    - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+    - export VERSION=${CI_COMMIT_TAG#"v"} # remove leading "v"
+    - npm version "$VERSION" --no-git-tag-version
+    - pnpm publish --no-git-checks

package/components/AlertSnackbar/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Snackbar from '@mui/material/Snackbar';
+import Alert from '@mui/material/Alert';
+import {useAlertSnackbar} from "./useAlertSnackbar";
+
+export const AlertSnackbar = () => {
+  const { snackbarMessage, closeSnackbar } = useAlertSnackbar();
+  return (
+    <Snackbar
+      open={!!snackbarMessage}
+      onClose={closeSnackbar}
+    >
+      <Alert
+        onClose={closeSnackbar}
+        severity="error"
+        variant="filled"
+        sx={{ width: '100%' }}
+      >
+        {snackbarMessage?.message}
+      </Alert>
+    </Snackbar>
+  )
+}

package/components/AlertSnackbar/useAlertSnackbar.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import {AlertSnackbar} from "./index";
+
+type AlertSnackbarMessage = {
+  message: string,
+  key: number
+}
+
+type AlertSnackbarContextType = {
+  snackbarMessage: AlertSnackbarMessage | null;
+  showMessage: (message: string) => void;
+  closeSnackbar: () => void;
+}
+
+const AlertSnackbarContext = createContext<AlertSnackbarContextType | undefined>(undefined);
+
+export const useAlertSnackbar = () => {
+  const context = useContext(AlertSnackbarContext);
+  if (context === undefined) {
+    throw new Error('useSnackbar must be used within a SnackbarProvider');
+  }
+  return context;
+};
+
+type SnackbarProviderProps = {
+  children: React.ReactNode
+}
+
+export const AlertSnackbarProvider = (props: SnackbarProviderProps) => {
+  const { children } = props;
+  const [snackbarMessage, setSnackbarMessage] = useState<AlertSnackbarMessage | null>(null);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  const showMessage = useCallback((message: string) => {
+    if (isMounted.current) {
+      setSnackbarMessage({message, key: new Date().getTime()});
+    }
+  }, []);
+
+  const closeSnackbar = useCallback(() => {
+    if (isMounted.current) {
+      setSnackbarMessage(null);
+    }
+  }, []);
+
+  const value = {
+    snackbarMessage,
+    showMessage,
+    closeSnackbar,
+  };
+
+  return (
+    <AlertSnackbarContext.Provider value={value}>
+      {children}
+      <AlertSnackbar />
+    </AlertSnackbarContext.Provider>
+  );
+
+}

package/components/Button/index.tsx

@@ -0,0 +1,79 @@
+/*--------------------------------------------------------------------------
+ * 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, { forwardRef } from 'react'
+import { makeStyles } from '@material-ui/styles'
+import { Button as ButtonBase, ButtonProps } from '@material-ui/core'
+import clsx from 'clsx'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+type Props = Omit<
+  ButtonProps,
+  'variant' | 'color' | 'className' | 'disabled'
+> & {
+  variant?: 'primary' | 'secondary'
+  className?: string
+  isDisabled?: boolean
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      whiteSpace: 'nowrap',
+
+      '&.MuiButton-outlinedPrimary': {
+        background: colors.white,
+
+        '&:hover': {
+          background: '#f4f6f7',
+        },
+      },
+
+      '&:disabled': {
+        cursor: 'not-allowed',
+        pointerEvents: 'all',
+
+        '&.MuiButton-outlinedPrimary:hover': {
+          background: colors.white,
+          border: '1px solid rgba(0, 0, 0, 0.12)',
+        },
+      },
+    },
+  },
+  { index: 1 },
+)
+
+const VARIANT_MAP = {
+  primary: 'contained' as const,
+  secondary: 'outlined' as const,
+}
+
+export const Button = forwardRef(
+  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
+    const {
+      variant = 'secondary',
+      className,
+      isDisabled,
+      size = 'small',
+      ...buttonProps
+    } = props
+    const classes = useStyles()
+
+    return (
+      <ButtonBase
+        {...buttonProps}
+        size={size}
+        ref={ref}
+        disabled={isDisabled}
+        className={clsx(classes.root, className)}
+        variant={VARIANT_MAP[variant]}
+        color="primary"
+      />
+    )
+  },
+)

package/components/Button2/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import cn from 'classnames'
+
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+
+import styles from './styles.module.scss'
+
+type Props = {
+  type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type']
+  children: React.ReactNode
+  onClick?: React.DOMAttributes<HTMLButtonElement>['onClick']
+  size?: 'sm' | 'md' | 'lg'
+  theme?: 'primary' | 'secondary' | 'accent'
+  className?: string
+  isDisabled?: boolean
+  isLoading?: boolean
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, Props>(
+  (props, ref) => {
+    const { type = 'button', size = 'md', theme = 'secondary' } = props
+
+    const isDisabled = props.isDisabled || props.isLoading
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[size],
+          styles[theme],
+          props.className,
+        )}
+        type={type}
+        onClick={props.onClick}
+        disabled={isDisabled}
+      >
+        {props.children}
+        {props.isLoading && <Spinner size="sm" className={styles.spinner} />}
+      </button>
+    )
+  },
+)

package/components/Button2/styles.module.scss

@@ -0,0 +1,82 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  border-radius: $border-radius--small;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+
+  @include touch-transition(background-color color box-shadow opacity);
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  // Sizes.
+  &.sm {
+    height: 20px;
+    font-size: 12px;
+  }
+
+  &.md {
+    min-height: 26px;
+    font-size: 14px;
+  }
+
+  &.lg {
+    height: 32px;
+  }
+
+  // Themes.
+  &.primary {
+    background: $color-blue-main;
+    color: $color-white;
+
+    &:hover {
+      background: darken($color-blue-main, 5);
+    }
+
+    &:active {
+      background: darken($color-blue-main, 10);
+    }
+  }
+
+  &.secondary {
+    background: $color-white;
+    border: 1px solid $color-blue-main;
+    color: $color-blue-main;
+
+    &:hover {
+      background: #f4f6f7;
+    }
+
+    &:active {
+      background: #bdd5dc;
+    }
+  }
+
+  &.accent {
+    background: $color-orange;
+    color: $color-white;
+
+    &:hover {
+      background: darken($color-orange, 5);
+    }
+
+    &:active {
+      background: darken($color-orange, 10);
+    }
+  }
+}
+
+.spinner {
+  margin-left: 8px;
+  color: inherit;
+}

package/components/DestroyCloneModal/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 { Modal } from '@postgres.ai/shared/components/Modal'
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
+import { Text } from '@postgres.ai/shared/components/Text'
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
+
+type Props = {
+  cloneId: string
+  isOpen: boolean
+  onClose: () => void
+  onDestroyClone: () => void
+}
+
+export const DestroyCloneModal = (props: Props) => {
+  const { cloneId, isOpen, onClose, onDestroyClone } = props
+
+  const handleClickDestroy = () => {
+    onDestroyClone()
+    onClose()
+  }
+
+  return (
+    <Modal
+      title={`Destroy clone ${cloneId}`}
+      onClose={onClose}
+      isOpen={isOpen}
+    >
+      <Text>
+        Are you sure you want to destroy clone{' '}
+        <ImportantText>{cloneId}</ImportantText>?
+      </Text>
+      
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Cancel',
+            onClick: onClose,
+          },
+          {
+            text: 'Destroy clone',
+            variant: 'primary',
+            onClick: handleClickDestroy,
+          }
+        ]}
+      />
+    </Modal>
+  )
+}

package/components/DestroyCloneRestrictionModal/index.tsx

@@ -0,0 +1,50 @@
+/*--------------------------------------------------------------------------
+ * 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 { observer } from 'mobx-react-lite'
+
+import { Modal } from '@postgres.ai/shared/components/Modal'
+import { Link } from '@postgres.ai/shared/components/Link2'
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
+import { Text } from '@postgres.ai/shared/components/Text'
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  cloneId: string
+  clonePagePath?: string
+}
+
+export const DestroyCloneRestrictionModal = observer((props: Props) => {
+  const { isOpen, onClose, cloneId, clonePagePath } = props
+
+  return (
+    <Modal title="Cannot destroy clone" isOpen={isOpen} onClose={onClose}>
+      <Text>
+        Cannot destroy clone <ImportantText>{cloneId}</ImportantText> because
+        deletion protection is enabled. You can disable deletion protection on{' '}
+        {clonePagePath ? (
+          <Link to={clonePagePath}>the clone page</Link>
+        ) : (
+          'this page'
+        )}
+        .
+      </Text>
+
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Close',
+            onClick: onClose,
+          },
+        ]}
+      />
+    </Modal>
+  )
+})

package/components/ErrorStub/index.tsx

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

@@ -0,0 +1,44 @@
+/*--------------------------------------------------------------------------
+ * 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/FormattedText/styles.module.scss

@@ -0,0 +1,34 @@
+@import '@postgres.ai/shared/styles/vars';
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  position: relative;
+  background: $color-white--100;
+  border: 1px solid $color-gray-100;
+  border-radius: $border-radius--small;
+  overflow: hidden;
+
+  &:hover .copyButtonContainer {
+    opacity: 1;
+  }
+}
+
+.content {
+  padding: 10px 80px 10px 10px;
+  line-height: 1.5;
+  overflow: auto;
+  max-height: inherit;
+  margin: 0;
+}
+
+.copyButtonContainer {
+  opacity: 0;
+
+  @include touch-transition(opacity);
+}
+
+.copyButton {
+  position: absolute;
+  top: 8.5px;
+  right: 8.5px;
+}

package/components/GatewayLink/index.tsx

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