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

package/pages/Branches/components/BranchesTable/index.tsx

@@ -1,194 +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 cn from 'classnames'
-import { useEffect, useState } from 'react'
-import copy from 'copy-to-clipboard'
-import { makeStyles } from '@material-ui/core'
-import { useHistory } from 'react-router-dom'
-import { formatDateWithDistance } from '@postgres.ai/shared/utils/date'
-import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
-import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
-import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
-import { useHost } from '@postgres.ai/shared/pages/Instance/context'
-import {
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeaderCell,
-  TableBodyCell,
-  TableBodyCellMenu,
-} from '@postgres.ai/shared/components/Table'
-
-import { DeleteBranchModal } from '../Modals/DeleteBranchModal'
-import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
-
-const useStyles = makeStyles(
-  {
-    cellContentCentered: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    pointerCursor: {
-      cursor: 'pointer',
-    },
-    sortIcon: {
-      marginLeft: '8px',
-      width: '10px',
-    },
-    interactiveRow: {
-      cursor: 'pointer',
-    },
-    verticalCentered: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    marginTop: {
-      marginTop: '16px',
-    },
-    sortIconUp: {
-      transform: 'rotate(180deg)',
-    },
-  },
-  { index: 1 },
-)
-
-export const BranchesTable = ({
-  branches,
-  emptyTableText,
-  deleteBranch,
-  branchesRoute,
-  reloadBranches,
-}: {
-  branches: Branch[]
-  emptyTableText: string
-  deleteBranch: DeleteBranch
-  branchesRoute: string
-  reloadBranches: () => void
-}) => {
-  const host = useHost()
-  const history = useHistory()
-  const classes = useStyles()
-
-  const [state, setState] = useState({
-    sortByParent: 'desc',
-    branches: [] as Branch[],
-  })
-  const [branchId, setBranchId] = useState('')
-  const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false)
-
-  const handlesortByParent = () => {
-    const sortByParent = state.sortByParent === 'desc' ? 'asc' : 'desc'
-
-    const sortedBranches = [...state.branches].sort((a, b) => {
-      if (sortByParent === 'asc') {
-        return a.parent.localeCompare(b.parent)
-      } else {
-        return b.parent.localeCompare(a.parent)
-      }
-    })
-
-    setState({
-      sortByParent,
-      branches: sortedBranches,
-    })
-  }
-
-  useEffect(() => {
-    setState({
-      sortByParent: 'desc',
-      branches: branches ?? [],
-    })
-  }, [branches])
-
-  if (!state.branches.length) {
-    return <p className={classes.marginTop}>{emptyTableText}</p>
-  }
-
-  return (
-    <HorizontalScrollContainer>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableHeaderCell />
-            <TableHeaderCell>Branch</TableHeaderCell>
-            <TableHeaderCell>
-              <div
-                onClick={handlesortByParent}
-                className={cn(classes.interactiveRow, classes.verticalCentered)}
-              >
-                Parent
-                <ArrowDropDownIcon
-                  className={cn(
-                    state.sortByParent === 'asc' && classes.sortIconUp,
-                    classes.sortIcon,
-                  )}
-                />
-              </div>
-            </TableHeaderCell>
-            <TableHeaderCell>Data state time</TableHeaderCell>
-            <TableHeaderCell>Latest Snapshot ID</TableHeaderCell>
-            <TableHeaderCell>Number of snapshots</TableHeaderCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {state.branches?.map((branch) => {
-            const branchPagePath = host.routes.branch(branch.name)
-
-            return (
-              <TableRow
-                key={branch.name}
-                hover
-                onClick={() => history.push(branchPagePath)}
-                className={classes.pointerCursor}
-              >
-                <TableBodyCellMenu
-                  actions={[
-                    {
-                      name: 'Copy snapshot ID',
-                      onClick: () => copy(branch.snapshotID),
-                    },
-                    {
-                      name: 'Delete branch',
-                      onClick: () => {
-                        setBranchId(branch.name)
-                        setIsOpenDestroyModal(true)
-                      },
-                    },
-                  ]}
-                />
-
-                <TableBodyCell>{branch.name}</TableBodyCell>
-                <TableBodyCell>{branch.parent}</TableBodyCell>
-                <TableBodyCell>
-                  {formatDateWithDistance(branch.dataStateAt, new Date(branch.dataStateAt))}
-                </TableBodyCell>
-                <TableBodyCell>{branch.snapshotID}</TableBodyCell>
-                <TableBodyCell>{branch.numSnapshots}</TableBodyCell>
-              </TableRow>
-            )
-          })}
-        </TableBody>
-        <DeleteBranchModal
-          isOpen={isOpenDestroyModal}
-          onClose={() => {
-            setIsOpenDestroyModal(false)
-            setBranchId('')
-          }}
-          deleteBranch={deleteBranch}
-          branchName={branchId}
-          instanceId={host.instanceId}
-          afterSubmitClick={() => {
-            reloadBranches()
-            history.push(branchesRoute)
-          }}
-        />
-      </Table>
-    </HorizontalScrollContainer>
-  )
-}

package/pages/Branches/components/Modals/DeleteBranchModal/index.tsx

@@ -1,84 +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 { useState } from 'react'
-import { makeStyles } from '@material-ui/core'
-
-import { Modal } from '@postgres.ai/shared/components/Modal'
-import { ModalProps } from '@postgres.ai/shared/pages/Branches/components/Modals/types'
-import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
-import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
-import { Text } from '@postgres.ai/shared/components/Text'
-import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
-interface DeleteBranchModalProps extends ModalProps {
-  deleteBranch: DeleteBranch
-  branchName: string
-  instanceId: string
-  afterSubmitClick: () => void
-}
-
-const useStyles = makeStyles(
-  {
-    errorMessage: {
-      color: 'red',
-      marginTop: '10px',
-    },
-  },
-  { index: 1 },
-)
-
-export const DeleteBranchModal = ({
-  isOpen,
-  onClose,
-  deleteBranch,
-  branchName,
-  instanceId,
-  afterSubmitClick,
-}: DeleteBranchModalProps) => {
-  const classes = useStyles()
-  const [deleteError, setDeleteError] = useState<string | null>(null)
-
-  const handleDelete = async () => {
-    const deleteRes = await deleteBranch(branchName, instanceId)
-
-    if (deleteRes?.error) {
-      setDeleteError(deleteRes.error?.message)
-    } else {
-      afterSubmitClick()
-    }
-  }
-
-  const handleClose = () => {
-    setDeleteError(null)
-    onClose()
-  }
-
-  return (
-    <Modal title="Confirmation" onClose={handleClose} isOpen={isOpen} size="xs">
-      <Text>
-        Are you sure you want to delete branch{' '}
-        <ImportantText>{branchName}</ImportantText>? This action cannot be
-        undone.
-      </Text>
-      {deleteError && <p className={classes.errorMessage}>{deleteError}</p>}
-      <SimpleModalControls
-        items={[
-          {
-            text: 'Cancel',
-            onClick: handleClose,
-          },
-          {
-            text: 'Delete branch',
-            variant: 'primary',
-            onClick: handleDelete,
-            isDisabled: branchName === 'main',
-          },
-        ]}
-      />
-    </Modal>
-  )
-}

package/pages/Branches/components/Modals/types.ts

@@ -1,4 +0,0 @@
-export interface ModalProps {
-  isOpen: boolean
-  onClose: () => void
-}

package/pages/Branches/index.tsx

@@ -1,128 +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 { observer } from 'mobx-react-lite'
-import { useHistory } from 'react-router'
-import { makeStyles } from '@material-ui/core'
-import React, { useEffect, useState } from 'react'
-
-import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context'
-import { Button } from '@postgres.ai/shared/components/Button2'
-import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
-import { Spinner } from '@postgres.ai/shared/components/Spinner'
-import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
-import { BranchesTable } from '@postgres.ai/shared/pages/Branches/components/BranchesTable'
-import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
-import { Tooltip } from '@postgres.ai/shared/components/Tooltip'
-import { InfoIcon } from '@postgres.ai/shared/icons/Info'
-import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
-
-const useStyles = makeStyles(
-  {
-    container: {
-      marginTop: '16px',
-    },
-    infoIcon: {
-      height: '12px',
-      width: '12px',
-      marginLeft: '8px',
-      color: '#808080',
-    },
-    spinner: {
-      position: 'absolute',
-      right: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-  },
-  { index: 1 },
-)
-
-interface BranchesProps {
-  instanceId: string
-}
-
-export const Branches: React.FC<BranchesProps> = observer(({ instanceId }) => {
-  const host = useHost()
-  const stores = useStores()
-  const classes = useStyles()
-  const history = useHistory()
-  const [branches, setBranches] = useState<Branch[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const {
-    instance,
-    getBranches,
-    isBranchesLoading,
-    getBranchesError,
-    deleteBranch,
-  } = stores.main
-
-  const goToBranchAddPage = () => history.push(host.routes.createBranch())
-
-  const loadBranches = () => {
-    getBranches(instanceId)
-      .then((response) => {
-        response && setBranches(response)
-      })
-      .finally(() => setIsLoading(false))
-  }
-
-  useEffect(() => {
-    loadBranches()
-  }, [])
-
-  if (!instance && !isBranchesLoading) return <></>
-
-  if (getBranchesError)
-    return (
-      <ErrorStub
-        title={getBranchesError?.title}
-        message={getBranchesError?.message}
-      />
-    )
-
-  return (
-    <div className={classes.container}>
-      {isBranchesLoading || isLoading ? (
-        <Spinner size="lg" className={classes.spinner} />
-      ) : (
-        <>
-          <SectionTitle
-            level={2}
-            tag="h2"
-            text={`Branches (${branches?.length || 0})`}
-            rightContent={
-              <>
-                <Button
-                  theme="primary"
-                  isDisabled={!branches.length}
-                  onClick={goToBranchAddPage}
-                >
-                  Create branch
-                </Button>
-
-                {!branches.length && (
-                  <Tooltip content="No existing branch">
-                    <div style={{ display: 'flex' }}>
-                      <InfoIcon className={classes.infoIcon} />
-                    </div>
-                  </Tooltip>
-                )}
-              </>
-            }
-          />
-          <BranchesTable
-            branches={branches}
-            branchesRoute={host.routes.branches()}
-            reloadBranches={loadBranches}
-            deleteBranch={deleteBranch as DeleteBranch}
-            emptyTableText="This instance has no active branches."
-          />
-        </>
-      )}
-    </div>
-  )
-})

package/pages/Clone/Status/index.tsx

@@ -1,73 +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'
-import clsx from 'clsx'
-
-import {
-  CloneDto,
-  formatCloneDto,
-} from '@postgres.ai/shared/types/api/entities/clone'
-import { Status as StatusBase } from '@postgres.ai/shared/components/Status'
-import { FormattedText } from '@postgres.ai/shared/components/FormattedText'
-import {
-  getCloneStatusType,
-  getCloneStatusText,
-} from '@postgres.ai/shared/utils/clone'
-
-type Props = {
-  rawClone: CloneDto
-  className?: string
-}
-
-const useStyles = makeStyles(
-  {
-    root: {
-      marginTop: '2px',
-    },
-    status: {
-      fontWeight: 500,
-    },
-    message: {
-      margin: '4px 0 0 0',
-    },
-    errorMessage: {
-      marginTop: '8px',
-    },
-  },
-  { index: 1 },
-)
-
-export const Status = React.memo((props: Props) => {
-  const { rawClone, className } = props
-
-  const classes = useStyles()
-
-  const clone = formatCloneDto(rawClone)
-
-  const { code, message } = clone.status
-
-  const statusType = getCloneStatusType(code)
-  const statusText = getCloneStatusText(code)
-
-  const isError = statusType === 'error'
-
-  return (
-    <div className={clsx(classes.root, className)}>
-      <StatusBase type={statusType} className={classes.status}>
-        {statusText}
-      </StatusBase>
-
-      {!isError && <p className={classes.message}>{message}</p>}
-
-      {isError && (
-        <FormattedText value={message} className={classes.errorMessage} />
-      )}
-    </div>
-  )
-})

package/pages/Clone/context.ts

@@ -1,24 +0,0 @@
-import { createStrictContext } from '@postgres.ai/shared/utils/react'
-
-import { Api } from './stores/Main'
-import { Stores } from './useCreatedStores'
-
-export type Host = {
-  instanceId: string
-  cloneId: string
-  routes: {
-    instance: () => string
-    snapshot: (snapshotId: string) => string
-    createSnapshot: (cloneId: string) => string
-  }
-  api: Api
-  elements: {
-    breadcrumbs: React.ReactNode
-  }
-}
-
-export const { useStrictContext: useHost, Provider: HostProvider } =
-  createStrictContext<Host>()
-
-export const { useStrictContext: useStores, Provider: StoresProvider } =
-  createStrictContext<Stores>()