@postgres.ai/shared 4.0.4 → 4.1.0

package/.gitlab-ci.yml

@@ -0,0 +1,77 @@
+.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:
+    name: node:lts-alpine
+    pull_policy: if-not-present
+  allow_failure: true
+  cache:
+    key: "$CI_COMMIT_REF_SLUG"
+    paths:
+      - .pnpm-store
+  before_script:
+    - apk add --no-cache rsync jq
+    - corepack enable
+    - corepack prepare pnpm@8.15.9 --activate
+    - pnpm config set store-dir .pnpm-store
+    - pnpm --dir ui/packages/shared install --frozen-lockfile
+
+publish-shared-preview:
+  <<: [*shared_base, *only_ui_feature]
+  stage: build
+  script:
+    - cd ui/packages/shared
+    - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+
+    # Get base version from package.json (strip any suffix)
+    - BASE_VERSION=$(jq -r .version package.json)
+    - BASE_VERSION=${BASE_VERSION%%-*}
+    - export PREID="pr-${CI_MERGE_REQUEST_IID:-preview}"
+
+    # Get all existing versions
+    - EXISTING_TAGS=$(npm view @postgres.ai/shared versions --json | jq -r '.[]' || echo "")
+
+    # Find next available version suffix
+    - VERSION=""
+    - for i in $(seq 0 20); do
+        CANDIDATE="${BASE_VERSION}-${PREID}";
+        [ "$i" -gt 0 ] && CANDIDATE="${CANDIDATE}.${i}";
+        if ! echo "$EXISTING_TAGS" | grep -qx "$CANDIDATE"; then
+          VERSION="$CANDIDATE";
+          break;
+        fi;
+      done
+    - if [ -z "$VERSION" ]; then echo "❌ Failed to determine unique preview version"; exit 1; fi
+    - echo "Publishing version $VERSION"
+    - npm version "$VERSION" --no-git-tag-version
+
+    # Build and pack
+    - pnpm run pack
+
+    # Publish .tgz archive
+    - TARBALL=$(ls postgres.ai-shared-*.tgz)
+    - npm publish "$TARBALL" --tag "$PREID"
+
+publish-shared-release:
+  <<: [*shared_base, *only_ui_tag_release]
+  stage: build
+  script:
+    - cd ui/packages/shared
+    - echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc
+
+    # Extract version from tag (remove leading "v")
+    - export VERSION=${CI_COMMIT_TAG#"v"}
+
+    # Build and pack
+    - npm version "$VERSION" --no-git-tag-version --allow-same-version
+    - pnpm run pack
+
+    # Publish
+    - TARBALL=$(ls postgres.ai-shared-*.tgz)
+    - pnpm publish "$TARBALL" --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/DestroyCloneModal/index.tsx

@@ -0,0 +1,52 @@
+/*--------------------------------------------------------------------------
+ * 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={`Delete clone ${cloneId}`} onClose={onClose} isOpen={isOpen}>
+      <Text>
+        Are you sure you want to delete clone{' '}
+        <ImportantText>{cloneId}</ImportantText>? This action cannot be undone.
+      </Text>
+
+      <SimpleModalControls
+        items={[
+          {
+            text: 'Cancel',
+            onClick: onClose,
+          },
+          {
+            text: 'Delete 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 delete clone" isOpen={isOpen} onClose={onClose}>
+      <Text>
+        Cannot delete 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/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)}
+    />
+  )
+}

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;
+};