From f747fe505d3655905c687d55c1769d6158d6f020 Mon Sep 17 00:00:00 2001
From: Maksim Chervonnyi <mail@redmax.dev>
Date: Tue, 1 Oct 2024 13:30:31 +0200
Subject: [PATCH] remove previous design iteration

---
 .../containers/Admin/Buckets/Tabulator.tsx    | 311 ------------------
 1 file changed, 311 deletions(-)

diff --git a/catalog/app/containers/Admin/Buckets/Tabulator.tsx b/catalog/app/containers/Admin/Buckets/Tabulator.tsx
index 389cc932ff8..f39ca724e97 100644
--- a/catalog/app/containers/Admin/Buckets/Tabulator.tsx
+++ b/catalog/app/containers/Admin/Buckets/Tabulator.tsx
@@ -3,7 +3,6 @@ import * as FF from 'final-form'
 import * as React from 'react'
 import * as RF from 'react-final-form'
 import * as M from '@material-ui/core'
-// import { fade } from '@material-ui/core/styles'
 
 import tabulatorTableSchema from 'schemas/tabulatorTable.yml.json'
 
@@ -88,316 +87,6 @@ const validateTable: FF.FieldValidator<string> = (inputStr?: string) => {
   return undefined
 }
 
-// const useTabulatorTableStyles = M.makeStyles((t) => ({
-//   delete: {
-//     color: t.palette.error.main,
-//     marginBottom: 'auto',
-//   },
-//   editor: {
-//     minHeight: t.spacing(15),
-//     '& .ace_editor': {
-//       minHeight: t.spacing(15),
-//     },
-//   },
-//   header: {
-//     alignItems: 'center',
-//     display: 'flex',
-//     marginBottom: t.spacing(1),
-//   },
-//   name: {
-//     marginBottom: t.spacing(2),
-//   },
-//   root: {
-//     alignItems: 'stretch',
-//     display: 'flex',
-//   },
-//   main: {
-//     flexGrow: 1,
-//   },
-//   actions: {
-//     display: 'flex',
-//     flexDirection: 'column',
-//     flexShrink: 0,
-//     marginLeft: t.spacing(2),
-//   },
-//   button: {
-//     '& + &': {
-//       marginTop: t.spacing(2),
-//     },
-//   },
-//   lock: {
-//     alignItems: 'center',
-//     animation: '$showLock .3s ease-out',
-//     background: fade(t.palette.background.paper, 0.7),
-//     bottom: 0,
-//     display: 'flex',
-//     justifyContent: 'center',
-//     left: 0,
-//     position: 'absolute',
-//     right: 0,
-//     top: 0,
-//     zIndex: 10,
-//   },
-//   '@keyframes showLock': {
-//     '0%': {
-//       transform: 'scale(1.2x)',
-//     },
-//     '100%': {
-//       transform: 'scale(1)',
-//     },
-//   },
-// }))
-
-// type FormValues = Pick<Model.GQLTypes.TabulatorTable, 'name' | 'config'>
-
-// interface TabulatorTableProps {
-//   bucketName: string
-//   className: string
-// }
-
-// interface AddNew extends TabulatorTableProps {
-//   onClose: () => void
-//   tabulatorTable?: never // We create new table, so we don't have one
-// }
-//
-// interface EditExisting extends TabulatorTableProps {
-//   onClose?: never // Don't close editing table
-//   tabulatorTable: FormValues
-// }
-
-// function TabulatorTable({
-//   bucketName,
-//   className,
-//   onClose,
-//   tabulatorTable,
-// }: AddNew | EditExisting) {
-//   const renameTabulatorTable = GQL.useMutation(RENAME_TABULATOR_TABLE_MUTATION)
-//   const setTabulatorTable = GQL.useMutation(SET_TABULATOR_TABLE_MUTATION)
-//   const classes = useTabulatorTableStyles()
-//
-//   const { push: notify } = Notifications.use()
-//
-//   const renameTable = React.useCallback(
-//     async (
-//       tableName: string,
-//       newTableName: string,
-//     ): Promise<FF.SubmissionErrors | boolean | undefined> => {
-//       try {
-//         const {
-//           admin: { bucketRenameTabulatorTable: r },
-//         } = await renameTabulatorTable({ bucketName, tableName, newTableName })
-//         switch (r.__typename) {
-//           case 'BucketConfig':
-//             notify(`Successfully updated ${tableName} table`)
-//             return undefined
-//           case 'InvalidInput':
-//             return mapInputErrors(r.errors)
-//           case 'OperationError':
-//             return mkFormError(r.message)
-//           default:
-//             return assertNever(r)
-//         }
-//       } catch (e) {
-//         // eslint-disable-next-line no-console
-//         console.error('Error updating tabulator table')
-//         // eslint-disable-next-line no-console
-//         console.error(e)
-//         return mkFormError('unexpected')
-//       }
-//     },
-//     [bucketName, notify, renameTabulatorTable],
-//   )
-//
-//   const setTable = React.useCallback(
-//     async (
-//       tableName: string,
-//       config: string | null = null,
-//     ): Promise<FF.SubmissionErrors | boolean | undefined> => {
-//       try {
-//         const {
-//           admin: { bucketSetTabulatorTable: r },
-//         } = await setTabulatorTable({ bucketName, tableName, config })
-//         switch (r.__typename) {
-//           case 'BucketConfig':
-//             notify(`Successfully updated ${tableName} table`)
-//             return undefined
-//           case 'InvalidInput':
-//             return mapInputErrors(r.errors)
-//           case 'OperationError':
-//             return mkFormError(r.message)
-//           default:
-//             return assertNever(r)
-//         }
-//       } catch (e) {
-//         // eslint-disable-next-line no-console
-//         console.error('Error updating tabulator table')
-//         // eslint-disable-next-line no-console
-//         console.error(e)
-//         return mkFormError('unexpected')
-//       }
-//     },
-//     [bucketName, notify, setTabulatorTable],
-//   )
-//
-//   const onSubmit = React.useCallback(
-//     async (values: FormValues, form: FF.FormApi<FormValues, FormValues>) => {
-//       // Rename
-//       // if theres is a table to rename
-//       // and the name was changed
-//       if (tabulatorTable && values.name !== tabulatorTable.name) {
-//         const renameResult = await renameTable(tabulatorTable.name, values.name)
-//         if (renameResult) {
-//           return renameResult
-//         }
-//       }
-//
-//       // Create table if no one,
-//       // or update the config if it was changed
-//       // NOTE: table name could be new, just updated above
-//       if (!tabulatorTable || values.config !== tabulatorTable.config) {
-//         const result = await setTable(values.name, values.config)
-//         if (result) {
-//           return result
-//         }
-//       }
-//
-//       form.reset(values)
-//       if (onClose) {
-//         onClose()
-//       }
-//     },
-//     [onClose, renameTable, setTable, tabulatorTable],
-//   )
-//   const [deleting, setDeleting] = React.useState<
-//     FF.SubmissionErrors | boolean | undefined
-//   >()
-//   const deleteExistingTable = React.useCallback(async () => {
-//     if (!tabulatorTable) {
-//       // Should have called onClose instead
-//       throw new Error('No tables to delete')
-//     }
-//     setDeleting(true)
-//     const errors = await setTable(tabulatorTable.name)
-//     setDeleting(errors)
-//   }, [setTable, tabulatorTable])
-//
-//   const confirm = useConfirm({
-//     title: tabulatorTable
-//       ? `You are about to delete "${tabulatorTable.name}" table`
-//       : 'You have unsaved changes. Delete anyway?',
-//     submitTitle: 'Delete',
-//     onSubmit: React.useCallback(
-//       (confirmed) => {
-//         if (!confirmed) return
-//         if (tabulatorTable) deleteExistingTable()
-//         if (onClose) onClose()
-//       },
-//       [tabulatorTable, deleteExistingTable, onClose],
-//     ),
-//   })
-//   const { onChange: onFormSpy } = OnDirty.use()
-//   return (
-//     <RF.Form onSubmit={onSubmit} initialValues={tabulatorTable}>
-//       {({
-//         form,
-//         pristine,
-//         handleSubmit,
-//         submitting,
-//         submitFailed,
-//         hasValidationErrors,
-//         error,
-//         submitError,
-//       }) => (
-//         <form className={cx(classes.root, className)} onSubmit={handleSubmit}>
-//           <OnDirty.Spy onChange={onFormSpy} />
-//           {confirm.render(<></>)}
-//           <div className={classes.main}>
-//             <RF.Field
-//               className={classes.name}
-//               component={Form.Field}
-//               errors={{
-//                 required: 'Enter a table name',
-//               }}
-//               fullWidth
-//               label="Table name"
-//               name="name"
-//               validate={validators.required as FF.FieldValidator<any>}
-//               variant="outlined"
-//               size="small"
-//               disabled={submitting || deleting}
-//             />
-//             <RF.Field
-//               className={classes.editor}
-//               component={YamlEditorField}
-//               errors={{
-//                 required: 'Enter config content',
-//                 invalid: 'YAML is invalid',
-//               }}
-//               name="config"
-//               validate={validators.composeAnd(
-//                 validators.required as FF.FieldValidator<any>,
-//                 validateYaml,
-//                 validateTable,
-//               )}
-//               disabled={submitting || deleting}
-//               autoFocus={!tabulatorTable}
-//             />
-//             {(submitFailed || typeof deleting === 'object') && (
-//               <Form.FormError
-//                 error={
-//                   error ||
-//                   submitError ||
-//                   (typeof deleting === 'object' && deleting[FF.FORM_ERROR])
-//                 }
-//                 errors={{ unexpected: 'Something went wrong' }}
-//               />
-//             )}
-//             {(submitting || deleting) && (
-//               <div className={classes.lock}>
-//                 <M.CircularProgress size={24} />
-//               </div>
-//             )}
-//           </div>
-//           <div className={classes.actions}>
-//             <M.Button
-//               onClick={onClose && pristine ? onClose : confirm.open}
-//               type="button"
-//               className={cx(classes.delete, classes.button)}
-//               disabled={submitting || deleting === true}
-//               variant="outlined"
-//             >
-//               Delete
-//             </M.Button>
-//             <M.Button
-//               onClick={() => form.reset()}
-//               className={classes.button}
-//               color="primary"
-//               disabled={pristine || submitting || deleting === true}
-//               variant="outlined"
-//             >
-//               Reset
-//             </M.Button>
-//             <M.Button
-//               className={classes.button}
-//               onClick={form.submit}
-//               color="primary"
-//               disabled={
-//                 pristine ||
-//                 submitting ||
-//                 deleting === true ||
-//                 (submitFailed && hasValidationErrors)
-//               }
-//               variant="contained"
-//             >
-//               Save
-//             </M.Button>
-//           </div>
-//         </form>
-//       )}
-//     </RF.Form>
-//   )
-// }
-
 const useEmptyStyles = M.makeStyles((t) => ({
   root: {
     display: 'flex',