@postgres.ai/shared 3.5.1-pr-1027.0

package/components/Table/RowMenu/index.tsx

@@ -0,0 +1,111 @@
+/*--------------------------------------------------------------------------
+ * 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 } from 'react'
+import { Menu, MenuItem, IconButton, makeStyles } from '@material-ui/core'
+import { MoreVert } from '@material-ui/icons'
+import clsx from 'clsx'
+
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex'
+
+const DIRECTION_TO_ORIGIN = {
+  left: 'right',
+  right: 'left',
+} as const
+
+type Action = {
+  name: string
+  onClick: () => void
+  isDisabled?: boolean
+}
+
+export type Props = {
+  actions: Action[]
+  isDisabled?: boolean
+  isLoading?: boolean
+  direction?: 'left' | 'right'
+}
+
+const useStyles = makeStyles(
+  {
+    button: {
+      '&:disabled': {
+        cursor: 'not-allowed',
+        pointerEvents: 'all',
+      },
+    },
+    spinner: {
+      background: 'transparent',
+    },
+    hiddenIcon: {
+      visibility: 'hidden',
+    },
+  },
+  { index: 1 },
+)
+
+export const RowMenu = (props: Props) => {
+  const {
+    actions,
+    isDisabled = false,
+    isLoading = false,
+    direction = 'right',
+  } = props
+  const classes = useStyles()
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+
+  const isOpen = Boolean(anchorEl)
+
+  const openMenu: React.MouseEventHandler<HTMLButtonElement> = (e) =>
+    setAnchorEl(e.currentTarget)
+
+  const closeMenu = () => setAnchorEl(null)
+
+  return (
+    <>
+      <IconButton
+        onClick={openMenu}
+        disabled={isDisabled || isLoading}
+        className={classes.button}
+      >
+        <MoreVert className={clsx(isLoading && classes.hiddenIcon)} />
+        {isLoading && (
+          <StubSpinner size="sm" mode="absolute" className={classes.spinner} />
+        )}
+      </IconButton>
+      <Menu
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: DIRECTION_TO_ORIGIN[direction],
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: DIRECTION_TO_ORIGIN[direction],
+        }}
+        anchorEl={anchorEl}
+        keepMounted
+        open={isOpen}
+        onClose={closeMenu}
+      >
+        {actions.map((action, i) => {
+          return (
+            <MenuItem
+              key={i}
+              onClick={() => {
+                closeMenu()
+                action.onClick()
+              }}
+              disabled={action.isDisabled}
+            >
+              {action.name}
+            </MenuItem>
+          )
+        })}
+      </Menu>
+    </>
+  )
+}

package/components/Table/index.tsx

@@ -0,0 +1,140 @@
+/*--------------------------------------------------------------------------
+ * 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 {
+  Table as TableBase,
+  TableProps as TableBaseProps,
+  TableHead,
+  TableRow,
+  TableCell as TableCellBase,
+  TableCellProps as TableCellBaseProps,
+  TableBody,
+  makeStyles,
+} from '@material-ui/core'
+import clsx from 'clsx'
+
+import { colors } from '@postgres.ai/shared/styles/colors'
+
+import { RowMenu, Props as RowMenuProps } from './RowMenu'
+
+const cellStyles = {
+  paddingLeft: '8px',
+  paddingRight: '8px',
+  borderColor: colors.consoleStroke,
+}
+
+// Table.
+type TableProps = TableBaseProps
+
+const useTableStyles = makeStyles(
+  {
+    root: {
+      whiteSpace: 'nowrap',
+
+      '& .MuiTableCell-root': {
+        lineHeight: 'normal',
+      },
+    },
+  },
+  { index: 1 },
+)
+
+const Table = (props: TableProps) => {
+  const classes = useTableStyles()
+  return (
+    <TableBase {...props} className={clsx(props.className, classes.root)} />
+  )
+}
+
+// TableHeaderCell.
+type TableHeaderCellProps = TableCellBaseProps
+
+const useTableHeaderCellStyles = makeStyles(
+  {
+    root: {
+      ...cellStyles,
+      color: colors.pgaiDarkGray,
+      paddingTop: '12px',
+      paddingBottom: '12px',
+    },
+  },
+  { index: 1 },
+)
+
+const TableHeaderCell = (props: TableHeaderCellProps) => {
+  const classes = useTableHeaderCellStyles()
+
+  return (
+    <TableCellBase {...props} className={clsx(props.className, classes.root)} />
+  )
+}
+
+// TableBodyCell.
+type TableBodyCellProps = TableCellBaseProps
+
+const useTableBodyCellStyles = makeStyles(
+  {
+    root: {
+      ...cellStyles,
+      fontSize: '12px',
+      paddingTop: '8px',
+      paddingBottom: '8px',
+    },
+  },
+  { index: 1 },
+)
+
+const TableBodyCell = (props: TableBodyCellProps) => {
+  const classes = useTableBodyCellStyles()
+
+  return (
+    <TableCellBase {...props} className={clsx(props.className, classes.root)} />
+  )
+}
+
+// TableBodyCellMenu.
+type TableBodyCellMenuProps = TableBodyCellProps & RowMenuProps
+
+const useTableBodyCellMenuStyles = makeStyles(
+  {
+    root: {
+      padding: 0,
+    },
+  },
+  { index: 1 },
+)
+
+const TableBodyCellMenu = (props: TableBodyCellMenuProps) => {
+  const classes = useTableBodyCellMenuStyles()
+
+  const { isLoading, isDisabled, children, ...hiddenProps } = props
+
+  const handleClick: React.MouseEventHandler<HTMLTableDataCellElement> = (e) =>
+    e.stopPropagation()
+
+  return (
+    <TableBodyCell
+      {...hiddenProps}
+      className={classes.root}
+      onClick={handleClick}
+    >
+      <RowMenu {...hiddenProps} isLoading={isLoading} isDisabled={isDisabled} />
+      {children}
+    </TableBodyCell>
+  )
+}
+
+export {
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeaderCell,
+  TableBodyCell,
+  TableBodyCellMenu,
+}

package/components/Text/index.tsx

@@ -0,0 +1,28 @@
+/*--------------------------------------------------------------------------
+ * 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: {
+      margin: 0,
+    },
+  },
+  { index: 1 },
+)
+
+export const Text = (props: Props) => {
+  const classes = useStyles()
+
+  return <p className={classes.root}>{props.children}</p>
+}

package/components/TextField/index.tsx

@@ -0,0 +1,117 @@
+/*--------------------------------------------------------------------------
+ * 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 {
+  TextField as TextFieldBase,
+  makeStyles,
+  InputProps,
+  TextFieldProps as TextFieldPropsBase,
+} from '@material-ui/core'
+import clsx from 'clsx'
+
+export type TextFieldProps = {
+  label?: string
+  disabled?: boolean
+  defaultValue?: string
+  value?: TextFieldPropsBase['value']
+  className?: string
+  fullWidth?: boolean
+  autoFocus?: boolean
+  id?: TextFieldPropsBase['id']
+  multiline?: TextFieldPropsBase['multiline']
+  onKeyDown?: TextFieldPropsBase['onKeyDown']
+  onChange?: TextFieldPropsBase['onChange']
+  InputProps?: InputProps
+  InputLabelProps?: TextFieldPropsBase['InputLabelProps']
+  children?: TextFieldPropsBase['children']
+  select?: TextFieldPropsBase['select']
+  type?: 'text' | 'password'
+  error?: boolean
+  placeholder?: string
+  onBlur?: TextFieldPropsBase['onBlur']
+  onFocus?: TextFieldPropsBase['onFocus']
+  name?: TextFieldPropsBase['name']
+  helperText?: TextFieldPropsBase['helperText']
+}
+
+const useStyles = makeStyles(
+  {
+    root: {
+      fontSize: '14px',
+    },
+    selectIcon: {
+      fontSize: '24px',
+    },
+    inputRoot: {
+      padding: 0,
+    },
+    input: {
+      padding: '8px',
+    },
+    helperText: {
+      fontSize: 12
+    }
+  },
+  { index: 1 },
+)
+
+export const TextField = (props: TextFieldProps) => {
+  const classes = useStyles()
+
+  return (
+    <TextFieldBase
+      onKeyDown={props.onKeyDown}
+      autoFocus={props.autoFocus}
+      id={props.id}
+      multiline={props.multiline}
+      label={props.label}
+      variant="outlined"
+      disabled={props.disabled}
+      className={clsx(classes.root, props.className)}
+      defaultValue={props.defaultValue}
+      value={props.value}
+      margin="normal"
+      fullWidth={props.fullWidth}
+      classes={{ }}
+      InputProps={{
+        ...props.InputProps,
+
+        classes: {
+          root: classes.inputRoot,
+          input: classes.input,
+          ...props.InputProps?.classes,
+        },
+      }}
+      SelectProps={{
+        classes: {
+          icon: classes.selectIcon,
+        },
+      }}
+      InputLabelProps={{
+        shrink: true,
+
+        ...props.InputLabelProps,
+      }}
+      FormHelperTextProps={{
+        classes: {
+          root: classes.helperText
+        }
+      }}
+      onChange={props.onChange}
+      children={props.children}
+      select={props.select}
+      type={props.type}
+      error={props.error}
+      placeholder={props.placeholder}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
+      name={props.name}
+      helperText={props.helperText}
+    />
+  )
+}

package/components/Tooltip/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 {
+  Tooltip as TooltipBase,
+  TooltipProps,
+  makeStyles,
+} from '@material-ui/core'
+
+type Props = {
+  children: JSX.Element
+  content: string | JSX.Element
+  disableTouchListener?: boolean
+  placement?: TooltipProps['placement']
+  interactive?: TooltipProps['interactive']
+  enterTouchDelay?: TooltipProps['enterTouchDelay']
+}
+
+const useStyles = makeStyles(
+  {
+    tooltip: {
+      fontSize: '10px',
+      padding: '4px 8px',
+    },
+  },
+  { index: 1 },
+)
+
+export const Tooltip = (props: Props) => {
+  const {
+    content,
+    placement = 'top',
+    enterTouchDelay = 0,
+    ...otherProps
+  } = props
+
+  const classes = useStyles()
+
+  return (
+    <TooltipBase
+      {...otherProps}
+      enterTouchDelay={enterTouchDelay}
+      placement={placement}
+      title={content}
+      classes={{ tooltip: classes.tooltip }}
+    />
+  )
+}

package/config/index.ts

@@ -0,0 +1,32 @@
+import { Locale } from 'date-fns'
+import { enUS } from 'date-fns/locale'
+import { getUserLocale } from 'get-user-locale'
+
+type Config = {
+  dateFnsLocale: Locale
+  appName: string
+}
+
+export const config: Config = {
+  dateFnsLocale: enUS,
+  appName: 'Postgres.ai',
+}
+
+const loadDateFnsLocale = async () => {
+  const userLocale = getUserLocale()
+
+  // We are already using this locale.
+  if (userLocale === config.dateFnsLocale.code) return
+
+  try {
+    const locale = await import(`date-fns/locale/${userLocale}`)
+    config.dateFnsLocale = locale.default
+    return
+  } catch (e) {
+    // Unavailable locale.
+  }
+}
+
+export const initConfig = async () => {
+  await loadDateFnsLocale()
+}

package/config/links.ts

@@ -0,0 +1,6 @@
+export const linksConfig = {
+  cloudSignIn: 'https://postgres.ai/pricing',
+  docs: 'https://postgres.ai/docs',
+  support: 'https://postgres.ai/contact',
+  github: 'https://github.com/postgres-ai/database-lab-engine',
+}

package/craco.config.js

@@ -0,0 +1,80 @@
+const path = require('path')
+
+const {
+  getLoader,
+  loaderByName,
+  getPlugin,
+  pluginByName,
+  addPlugins,
+  whenProd,
+} = require('@craco/craco')
+
+const CreateFilePlugin = require('create-file-webpack')
+
+const SHARED_PACKAGE_PATH = path.join(__dirname, '../shared')
+
+const buildTimestamp = Date.now()
+
+module.exports = (context) => ({
+  webpack: {
+    configure: (webpackConfig) => {
+      // Add shared to resolve.
+      const forkTsCheckerWebpackPlugin = getPlugin(
+        webpackConfig,
+        pluginByName('ForkTsCheckerWebpackPlugin'),
+      )
+
+      if (forkTsCheckerWebpackPlugin.isFound) {
+        forkTsCheckerWebpackPlugin.match.reportFiles = []
+        forkTsCheckerWebpackPlugin.match.options.reportFiles = []
+      }
+
+      const babelLoader = getLoader(webpackConfig, loaderByName('babel-loader'))
+
+      if (babelLoader.isFound) {
+        if (Array.isArray(babelLoader.match.loader.include)) {
+          babelLoader.match.loader.include.push(SHARED_PACKAGE_PATH)
+        } else {
+          babelLoader.match.loader.include = [
+            babelLoader.match.loader.include,
+            SHARED_PACKAGE_PATH,
+          ]
+        }
+      }
+
+      // Generating meta.json
+      whenProd(() =>
+        addPlugins(webpackConfig, [
+          new CreateFilePlugin({
+            path: context.paths.appBuild,
+            fileName: './meta.json',
+            content: JSON.stringify({
+              buildTimestamp,
+              // Backward compatibility with prev versions UI.
+              buildDate: buildTimestamp,
+            }),
+          }),
+        ]),
+      )
+
+      // Passing build timestamp.
+      const { match: definePlugin } = getPlugin(
+        webpackConfig,
+        pluginByName('DefinePlugin'),
+      )
+      if (definePlugin)
+        definePlugin.definitions[
+          'process.env'
+        ].BUILD_TIMESTAMP = `${buildTimestamp}`
+
+      // Resolve polyfills.
+      webpackConfig.resolve.fallback = {
+        ...webpackConfig.resolve.fallback,
+        crypto: require.resolve('crypto-browserify'),
+        stream: require.resolve('stream-browserify'),
+      }
+
+      return webpackConfig
+    },
+  },
+})