add delete column and fix minor issues

SenseNet · Jul 11, 2024 · 3c7cff6 · 3c7cff6
1 parent a95bb29
commit 3c7cff6
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 112 deletions.
diff --git a/apps/sensenet/src/components/context-menu/content-context-menu.tsx b/apps/sensenet/src/components/context-menu/content-context-menu.tsx
@@ -79,7 +79,7 @@ export const ContentContextMenu: React.FunctionComponent<ContentContextMenuProps
           disablePortal={true}
           open={props.isOpened}
           PaperProps={{ style: { paddingBottom: '2em' } }}>
-          <List style={{ padding: 0, backgroundColor: 'green' }}>
+          <List>
             {actions?.map((action) => {
               return (
                 <ListItem

diff --git a/apps/sensenet/src/components/event-list/event-list.tsx b/apps/sensenet/src/components/event-list/event-list.tsx
@@ -54,7 +54,7 @@ export default function EventList() {
         {currentEvent ? (
           <EventDetails event={currentEvent} />
         ) : (
-          <List style={{ height: 'calc(100% - 48px)', overflow: 'auto', backgroundColor: 'green' }} values={events} />
+          <List style={{ height: 'calc(100% - 48px)', overflow: 'auto' }} values={events} />
         )}
       </div>
     </FilterContextProvider>

diff --git a/apps/sensenet/src/components/settings/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx
@@ -1,15 +1,4 @@
-import {
-  createStyles,
-  IconButton,
-  makeStyles,
-  Table,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Theme,
-  Tooltip,
-} from '@material-ui/core'
+import { createStyles, IconButton, makeStyles, Theme, Tooltip } from '@material-ui/core'
 import Button from '@material-ui/core/Button'
 import Card from '@material-ui/core/Card'
 import CardActions from '@material-ui/core/CardActions'
@@ -25,7 +14,6 @@ import { ResponsivePersonalSettings } from '../../context'
 import { useLocalization } from '../../hooks'
 import { getPrimaryActionUrl } from '../../services'
 import { useDialog } from '../dialogs'
-
 const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     card: {
@@ -54,16 +42,12 @@ const useStyles = makeStyles((theme: Theme) => {
     },
   })
 })
-
 export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup'
-
 export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
-
 type ContentCardProps = {
   settings: Settings
   onContextMenu: (ev: React.MouseEvent) => void
 }
-
 const hasDocumentation = ['Portal', 'OAuth', 'DocumentPreview', 'OfficeOnline', 'Indexing', 'Sharing']
 const isSystemSettings = [
   'DocumentPreview',
@@ -80,7 +64,6 @@ const isSystemSettings = [
   'TaskManagement',
   'MultiFactorAuthentication',
 ]
-
 export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => {
   const localization = useLocalization().settings
   const repository = useRepository()
@@ -93,70 +76,67 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => {
   const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase()
 
   return (
-    <div>
-      <div />
-      <Card
-        onContextMenu={(ev) => {
-          ev.preventDefault()
-          onContextMenu(ev)
-        }}
-        className={classes.card}
-        data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}>
-        <CardContent>
-          <Tooltip placement="top" title={settingsName}>
-            <Typography variant="h5" gutterBottom={true} className={classes.title}>
-              {settingsTitle}
-            </Typography>
-          </Tooltip>
-          <Typography
-            color="textSecondary"
-            style={{ wordWrap: 'break-word' }}
-            dangerouslySetInnerHTML={{ __html: settings.Description || '' }}
-          />
-        </CardContent>
-        <CardActions style={{ justifyContent: 'flex-end' }}>
-          {!isSystemSettings.includes(settingsTitle) && (
-            <IconButton
-              data-test={`${dataTestName}-delete-button`}
-              aria-label="delete"
-              onClick={() => {
-                openDialog({
-                  name: 'delete',
-                  props: { content: [settings] },
-                  dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
-                })
-              }}>
-              <DeleteIcon />
-            </IconButton>
-          )}
-          <Link
-            to={getPrimaryActionUrl({ content: settings, repository, uiSettings, location: history.location })}
+    <Card
+      onContextMenu={(ev) => {
+        ev.preventDefault()
+        onContextMenu(ev)
+      }}
+      className={classes.card}
+      data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}>
+      <CardContent>
+        <Tooltip placement="top" title={settingsName}>
+          <Typography variant="h5" gutterBottom={true} className={classes.title}>
+            {settingsTitle}
+          </Typography>
+        </Tooltip>
+        <Typography
+          color="textSecondary"
+          style={{ wordWrap: 'break-word' }}
+          dangerouslySetInnerHTML={{ __html: settings.Description || '' }}
+        />
+      </CardContent>
+      <CardActions style={{ justifyContent: 'flex-end' }}>
+        {!isSystemSettings.includes(settingsTitle) && (
+          <IconButton
+            data-test={`${dataTestName}-delete-button`}
+            aria-label="delete"
+            onClick={() => {
+              openDialog({
+                name: 'delete',
+                props: { content: [settings] },
+                dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
+              })
+            }}>
+            <DeleteIcon />
+          </IconButton>
+        )}
+        <Link
+          to={getPrimaryActionUrl({ content: settings, repository, uiSettings, location: history.location })}
+          style={{ textDecoration: 'none' }}>
+          <Button
+            aria-label={localization.edit}
+            size="small"
+            className={classes.button}
+            data-test={`${dataTestName}-edit-button`}>
+            {localization.edit}
+          </Button>
+        </Link>
+        {hasDocumentation.includes(settingsTitle) && (
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href={`${SETUP_DOCS_URL}${createAnchorFromName(settings.Name)}`}
             style={{ textDecoration: 'none' }}>
             <Button
-              aria-label={localization.edit}
+              aria-label={localization.learnMore}
               size="small"
               className={classes.button}
-              data-test={`${dataTestName}-edit-button`}>
-              {localization.edit}
+              data-test={`${dataTestName}-learnmore-button`}>
+              {localization.learnMore}
             </Button>
-          </Link>
-          {hasDocumentation.includes(settingsTitle) && (
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={`${SETUP_DOCS_URL}${createAnchorFromName(settings.Name)}`}
-              style={{ textDecoration: 'none' }}>
-              <Button
-                aria-label={localization.learnMore}
-                size="small"
-                className={classes.button}
-                data-test={`${dataTestName}-learnmore-button`}>
-                {localization.learnMore}
-              </Button>
-            </a>
-          )}
-        </CardActions>
-      </Card>
-    </div>
+          </a>
+        )}
+      </CardActions>
+    </Card>
   )
 }
diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx
@@ -1,6 +1,4 @@
 import {
-  Button,
-  createStyles,
   IconButton,
   makeStyles,
   Table,
@@ -9,18 +7,17 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Theme,
-  Tooltip,
 } from '@material-ui/core'
 
-import { Edit, InfoOutlined } from '@material-ui/icons'
+import { Delete, Edit, InfoOutlined } from '@material-ui/icons'
 import { Settings } from '@sensenet/default-content-types'
 import { useRepository } from '@sensenet/hooks-react'
 import React, { useContext } from 'react'
 import { Link, useHistory } from 'react-router-dom'
 import { ResponsivePersonalSettings } from '../../context'
 import { useLocalization } from '../../hooks'
 import { getPrimaryActionUrl } from '../../services'
+import { useDialog } from '../dialogs'
 
 const useStyles = makeStyles((theme) => ({
   tableHead: {
@@ -74,15 +71,24 @@ const isSystemSettings = [
 export const createAnchorFromName = (name: string) => `#${name.toLocaleLowerCase()}`
 
 export const SettingsTable = ({ settings }: SettingsTableProps) => {
-  console.log(settings)
   const classes = useStyles()
   const localization = useLocalization().settings
   const repository = useRepository()
   const uiSettings = useContext(ResponsivePersonalSettings)
   const history = useHistory()
-  if (!settings) {
-    return <div>Loading</div>
-  }
+  const { openDialog } = useDialog()
+  const updatedSettings = settings.map((setting: Settings) => {
+    return {
+      ...setting,
+      nameToDisplay: setting.Name.split('.')[0]
+        .replace(/([A-Z])/g, ' $1')
+        .trim(),
+      nameToTest: setting.Name.replace(/\.settings/gi, '')
+        .replace(/\s+/g, '-')
+        .toLowerCase(),
+    }
+  })
+  const hasDeletableSetting = updatedSettings.some((setting) => !isSystemSettings.includes(setting.Name.split('.')[0]))
   return (
     <TableContainer>
       <Table>
@@ -92,15 +98,14 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => {
             <TableCell className={classes.tableHeadCell}>{localization.description}</TableCell>
             <TableCell className={classes.tableHeadCell}>{localization.edit}</TableCell>
             <TableCell className={classes.tableHeadCell}>{localization.learnMore}</TableCell>
+            {hasDeletableSetting && <TableCell className={classes.tableHeadCell}>{localization.delete}</TableCell>}
           </TableRow>
         </TableHead>
         <TableBody>
-          {settings.map((setting) => (
+          {updatedSettings.map((setting) => (
             <TableRow key={setting.Id} className={classes.tableRow}>
               <TableCell component="th" scope="row" className={`${classes.tableCell} ${classes.tableCellName}`}>
-                {setting.Name.split('.')[0]
-                  .replace(/([A-Z])/g, ' $1')
-                  .trim()}
+                {setting.nameToDisplay}
               </TableCell>
               <TableCell className={`${classes.tableCell} ${classes.descriptionCell}`}>
                 {setting.Description || '-'}
@@ -109,10 +114,7 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => {
                 <Link
                   to={getPrimaryActionUrl({ content: setting, repository, uiSettings, location: history.location })}
                   style={{ textDecoration: 'none' }}>
-                  <IconButton
-                    aria-label={localization.edit}
-                    //data-test={`${dataTestName}-edit-button`}
-                  >
+                  <IconButton aria-label={localization.edit} data-test={`${setting.nameToTest}-edit-button`}>
                     <Edit />
                   </IconButton>
                 </Link>
@@ -131,6 +133,22 @@ export const SettingsTable = ({ settings }: SettingsTableProps) => {
                   </a>
                 )}
               </TableCell>
+              {hasDeletableSetting && !isSystemSettings.includes(setting.Name.split('.')[0]) && (
+                <TableCell className={classes.tableCell}>
+                  <IconButton
+                    aria-label={localization.delete}
+                    data-test={`${setting.nameToTest}-delete-button`}
+                    onClick={() => {
+                      openDialog({
+                        name: 'delete',
+                        props: { content: [setting] },
+                        dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true },
+                      })
+                    }}>
+                    <Delete />
+                  </IconButton>
+                </TableCell>
+              )}
             </TableRow>
           ))}
         </TableBody>

diff --git a/apps/sensenet/src/components/settings/setup.tsx b/apps/sensenet/src/components/settings/setup.tsx
@@ -63,7 +63,6 @@ const Setup = () => {
   ])
 
   const renderContent = () => {
-    console.log(settings)
     switch (activeAction) {
       case 'browse':
         return <BrowseView contentPath={`${PATHS.configuration.snPath}${activeContent}`} />
@@ -107,20 +106,6 @@ const Setup = () => {
                   }}
                 />
                 <SettingsTable settings={settings} />
-                {/* {settings.map((s) => {
-                  return (
-                    <ContentCard
-                      settings={s}
-                      key={s.Id}
-                      onContextMenu={(ev) => {
-                        ev.preventDefault()
-                        setContextMenuAnchor((ev.currentTarget as HTMLElement) || null)
-                        setContextMenuItem(s)
-                        setIsContextMenuOpened(true)
-                      }}
-                    />
-                  )
-                })} */}
               </div>
             ) : null}
           </>

diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts
@@ -443,6 +443,7 @@ const values = {
   },
   settings: {
     name: 'Name',
+    delete: 'Delete',
     edit: 'Edit',
     learnMore: 'Learn more',
     stats: 'Stats',