From 9d9acc6475a4362fc28e5d3a8796133949fb0457 Mon Sep 17 00:00:00 2001 From: kavics Date: Mon, 20 Nov 2023 13:30:03 +0100 Subject: [PATCH] Cleanup and improve configuration page (#1584) * Remove ".settings" from content-card's title. * Render "learn more" conditionally. * Conditional "Delete" iconbutton. * Add an e2e test conditional buttons. * fix anchor --- apps/sensenet/cypress/e2e/setup/setup.cy.ts | 23 +++++- .../src/components/settings/content-card.tsx | 80 ++++++++++++++----- 2 files changed, 79 insertions(+), 24 deletions(-) diff --git a/apps/sensenet/cypress/e2e/setup/setup.cy.ts b/apps/sensenet/cypress/e2e/setup/setup.cy.ts index b70deb140..708a8d6d9 100644 --- a/apps/sensenet/cypress/e2e/setup/setup.cy.ts +++ b/apps/sensenet/cypress/e2e/setup/setup.cy.ts @@ -42,7 +42,7 @@ describe('Setup', () => { it('should open a binary editor with the content of the "settings item" if Edit button is clicked', () => { cy.get('[data-test="content-card-documentpreview.settings"]') .within(() => { - cy.get('[data-test="documentpreview.settings-edit-button"]').click() + cy.get('[data-test="documentpreview-edit-button"]').click() }) .get('[data-test="editor-title"]') .should('have.text', 'DocumentPreview.settings') @@ -50,8 +50,8 @@ describe('Setup', () => { it('should open the document of the selected "settings item" if "Learn more" button is clicked', () => { cy.get('[data-test="content-card-documentpreview.settings"]').within(() => { - cy.get('[data-test="content-card-learnmore-button"]') - .get('a[href="https://docs.sensenet.com/concepts/basics/07-settings#documentpreview-settings"]') + cy.get('[data-test="documentpreview-learnmore-button"]') + .get('a[href="https://docs.sensenet.com/guides/settings/setup#documentpreview-settings"]') .should('have.attr', 'target', '_blank') }) }) @@ -86,6 +86,23 @@ describe('Setup', () => { }) }) + it('check white- and blacklisted buttons', () => { + // custom settings can be deleted and never hasn't documentation + cy.get(`[data-test="testsettings-delete-button"]`).should('exist') + cy.get(`[data-test="testsettings-edit-button"]`).should('exist') + cy.get(`[data-test="testsettings-learnmore-button"]`).should('not.exist') + + // indexing is system and documented + cy.get(`[data-test="indexing-delete-button"]`).should('not.exist') + cy.get(`[data-test="indexing-edit-button"]`).should('exist') + cy.get(`[data-test="indexing-learnmore-button"]`).should('exist') + + // logging is system and not documented + cy.get(`[data-test="logging-delete-button"]`).should('not.exist') + cy.get(`[data-test="logging-edit-button"]`).should('exist') + cy.get(`[data-test="logging-learnmore-button"]`).should('not.exist') + }) + it('should delete a setup file', () => { cy.get('[data-test="settings-container"]').then((grid) => { cy.scrollToItem({ diff --git a/apps/sensenet/src/components/settings/content-card.tsx b/apps/sensenet/src/components/settings/content-card.tsx index 87fd3cc57..f926e0abf 100644 --- a/apps/sensenet/src/components/settings/content-card.tsx +++ b/apps/sensenet/src/components/settings/content-card.tsx @@ -1,9 +1,10 @@ -import { createStyles, makeStyles, 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' import CardContent from '@material-ui/core/CardContent' import Typography from '@material-ui/core/Typography' +import DeleteIcon from '@material-ui/icons/Delete' import { Settings } from '@sensenet/default-content-types' import { useRepository } from '@sensenet/hooks-react' import { clsx } from 'clsx' @@ -12,6 +13,7 @@ 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: Theme) => { return createStyles({ @@ -42,21 +44,42 @@ const useStyles = makeStyles((theme: Theme) => { }) }) -export const SETUP_DOCS_URL = 'https://docs.sensenet.com/concepts/basics/07-settings' +export const SETUP_DOCS_URL = 'https://docs.sensenet.com/guides/settings/setup' -export const createAnchorFromName = (displayName: string) => `#${displayName.replace('.', '-').toLocaleLowerCase()}` +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', + 'OAuth', + 'OfficeOnline', + 'Indexing', + 'Sharing', + 'Logging', + 'Portal', + 'Permission', + 'MailProcessor', + 'UserProfile', + 'ColumnSettings', + 'TaskManagement', + 'MultiFactorAuthentication', +] + export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { const localization = useLocalization().settings const repository = useRepository() const uiSettings = useContext(ResponsivePersonalSettings) const history = useHistory() const classes = useStyles() + const { openDialog } = useDialog() + const settingsName = settings.DisplayName || settings.Name + const settingsTitle = settingsName.replace(/\.settings/gi, '') + const dataTestName = settingsTitle.replace(/\s+/g, '-').toLowerCase() return ( { onContextMenu(ev) }} className={classes.card} - data-test={`content-card-${settings.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}> + data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}> - + - {settings.DisplayName || settings.Name} + {settingsTitle} { /> + {!isSystemSettings.includes(settingsTitle) && ( + { + openDialog({ + name: 'delete', + props: { content: [settings] }, + dialogProps: { disableBackdropClick: true, disableEscapeKeyDown: true }, + }) + }}> + + + )} @@ -86,24 +123,25 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => { aria-label={localization.edit} size="small" className={classes.button} - style={{ marginRight: '35px' }} - data-test={`${settings.Name.replace(/\s+/g, '-').toLowerCase()}-edit-button`}> + data-test={`${dataTestName}-edit-button`}> {localization.edit} - - - + {hasDocumentation.includes(settingsTitle) && ( + + + + )} )