From f2ed4a5adfb7640324590cfd644102a998bb0a20 Mon Sep 17 00:00:00 2001
From: Adam Hassan <hassana@sensenet.com>
Date: Tue, 14 Nov 2023 15:01:35 +0100
Subject: [PATCH 1/5] Fix grid row height (#1574)

* virtualized table grid style

* fix grid glitch

* padding adjust

* change order

---------

Co-authored-by: vargajoe <varga.yosh@gmail.com>
Co-authored-by: VargaJoe <17780970+VargaJoe@users.noreply.github.com>
---
 .../components/content-list/content-list.tsx  | 15 ++++
 apps/sensenet/src/globalStyles.ts             |  1 -
 .../src/ContentList/virtualized-table.tsx     | 72 ++++++++++---------
 3 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
index 9e0fc154f..b444b473e 100644
--- a/apps/sensenet/src/components/content-list/content-list.tsx
+++ b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -733,8 +733,23 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
                 setActiveContent(rowMouseEventHandlerParams.rowData)
                 handleItemClick(rowMouseEventHandlerParams)
               },
+              rowStyle: {
+                position: 'static',
+                top: 'auto',
+                height: 'auto',
+                overflow: 'initial',
+                padding: '5px 0px',
+              },
               onRowDoubleClick: onItemDoubleClickFunc,
               disableHeader: props.hideHeader,
+              containerStyle: {
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                overflowY: 'auto',
+                maxHeight: '100%',
+                paddingBottom: '15px',
+              },
             }}
           />
           {activeContent ? (
diff --git a/apps/sensenet/src/globalStyles.ts b/apps/sensenet/src/globalStyles.ts
index 2fe3fcae4..55eed16b3 100644
--- a/apps/sensenet/src/globalStyles.ts
+++ b/apps/sensenet/src/globalStyles.ts
@@ -117,7 +117,6 @@ export const useGlobalStyles = makeStyles((theme: Theme) => {
       },
     },
     virtualizedCellStyle: {
-      height: '57px',
       width: '100%',
       padding: 0,
     },
diff --git a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
index 282ab0ed8..ee153d5dd 100644
--- a/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
+++ b/packages/sn-list-controls-react/src/ContentList/virtualized-table.tsx
@@ -20,6 +20,7 @@ import {
   Table,
   TableCellProps,
   TableCellRenderer,
+  TableProps,
 } from 'react-virtualized'
 import { ColumnSetting, ContentListBaseProps } from './content-list-base-props'
 import { ActionsCell, DateCell, ReferenceCell, RowCheckbox, VirtualDefaultCell, VirtualDisplayNameCell } from '.'
@@ -77,6 +78,39 @@ interface ExtendedGenericContent extends GenericContent {
   ColumnSettings?: string
 }
 
+interface snTableProps extends Partial<TableProps> {
+  /**
+   * Number of rows in table.
+   */
+  rowCount: number
+  /**
+   * Callback responsible for returning a data row given an index.
+   * ({ index: number }): any
+   */
+  rowHeight: number | ((params: Index) => number)
+  /** Fixed height of header row */
+  headerHeight: number
+  /**
+   * Callback responsible for returning a data row given an index.
+   * ({ index: number }): any
+   */
+  rowGetter: (info: Index) => any
+  /**
+   * Callback invoked when a user clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowClick?: (info: RowMouseEventHandlerParams) => void
+  /**
+   * Callback invoked when a user double-clicks on a table row.
+   * ({ index: number }): void
+   */
+  onRowDoubleClick?: (info: RowMouseEventHandlerParams) => void
+  /**
+   * Disable rendering the header at all
+   */
+  disableHeader?: boolean
+}
+
 interface VirtualizedTableProps<T extends GenericContent> extends ContentListBaseProps<T> {
   /**
    * Contains custom cell template components
@@ -94,38 +128,7 @@ interface VirtualizedTableProps<T extends GenericContent> extends ContentListBas
 
   handleColumnSettingsClick?: () => void
 
-  tableProps: {
-    /**
-     * Number of rows in table.
-     */
-    rowCount: number
-    /**
-     * Callback responsible for returning a data row given an index.
-     * ({ index: number }): any
-     */
-    rowHeight: number | ((params: Index) => number)
-    /** Fixed height of header row */
-    headerHeight: number
-    /**
-     * Callback responsible for returning a data row given an index.
-     * ({ index: number }): any
-     */
-    rowGetter: (info: Index) => any
-    /**
-     * Callback invoked when a user clicks on a table row.
-     * ({ index: number }): void
-     */
-    onRowClick?: (info: RowMouseEventHandlerParams) => void
-    /**
-     * Callback invoked when a user double-clicks on a table row.
-     * ({ index: number }): void
-     */
-    onRowDoubleClick?: (info: RowMouseEventHandlerParams) => void
-    /**
-     * Disable rendering the header at all
-     */
-    disableHeader?: boolean
-  }
+  tableProps: snTableProps
 }
 
 const minColumnWith = (field: keyof ExtendedGenericContent) => {
@@ -388,10 +391,11 @@ export const VirtualizedTable = <T extends GenericContent = GenericContent>(prop
               direction: 'inherit',
               outline: 'none',
             }}
-            {...tableProps}
-            rowClassName={getRowClassName}>
+            rowClassName={getRowClassName}
+            {...tableProps}>
             {currentFieldsToDisplay.map((field) => {
               const currentField = field.field
+
               return (
                 <Column
                   flexGrow={props.displayRowCheckbox && field.field === 'Checkbox' ? 0 : 0}

From 5746986ee6de52ef5e23443841b06a3c7de0427b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20T=C3=B3th?= <tusmester@gmail.com>
Date: Tue, 14 Nov 2023 15:56:54 +0100
Subject: [PATCH 2/5] Add Contenttypes component and add hidden switch. (#1578)

* Add Contenttypes component and add hidden switch.

* Add switch style and test.
---
 .../cypress/e2e/content-types/switcher.cy.ts  | 24 +++++++++
 apps/sensenet/src/components/MainRouter.tsx   | 30 ++---------
 .../content-list/contenttype-list.tsx         | 52 +++++++++++++++++++
 3 files changed, 80 insertions(+), 26 deletions(-)
 create mode 100644 apps/sensenet/cypress/e2e/content-types/switcher.cy.ts
 create mode 100644 apps/sensenet/src/components/content-list/contenttype-list.tsx

diff --git a/apps/sensenet/cypress/e2e/content-types/switcher.cy.ts b/apps/sensenet/cypress/e2e/content-types/switcher.cy.ts
new file mode 100644
index 000000000..a2c8c0c55
--- /dev/null
+++ b/apps/sensenet/cypress/e2e/content-types/switcher.cy.ts
@@ -0,0 +1,24 @@
+import { PATHS, resolvePathParams } from '../../../src/application-paths'
+import { pathWithQueryParams } from '../../../src/services/query-string-builder'
+
+const contextMenuItems = ['browse', 'copyto', 'edit', 'moveto', 'delete']
+describe('Groups', () => {
+  before(() => {
+    cy.login()
+    cy.visit(
+      pathWithQueryParams({
+        path: resolvePathParams({ path: PATHS.contentTypes.appPath, params: { browseType: 'explorer' } }),
+        newParams: { repoUrl: Cypress.env('repoUrl') },
+      }),
+    )
+    //cy.get('[data-test="groups"]').click()
+  })
+  it('Switch should reveal hidden types', () => {
+    cy.get('[data-test="table-cell-application"]').should('not.exist')
+    cy.get('[data-test="hidden-type-switch"]')
+      .click()
+      .then(() => {
+        cy.get('[data-test="table-cell-application"]').should('exist')
+      })
+  })
+})
diff --git a/apps/sensenet/src/components/MainRouter.tsx b/apps/sensenet/src/components/MainRouter.tsx
index 082355868..e1d207159 100644
--- a/apps/sensenet/src/components/MainRouter.tsx
+++ b/apps/sensenet/src/components/MainRouter.tsx
@@ -16,6 +16,9 @@ const TrashComponent = lazy(() => import(/* webpackChunkName: "Trash" */ './tras
 const EventListComponent = lazy(() => import(/* webpackChunkName: "EventList" */ './event-list/event-list'))
 const CustomContent = lazy(() => import(/* webpackChunkName: "CustomContent" */ './content/CustomContent'))
 const SettingsComponent = lazy(() => import(/* webpackChunkName: "setup" */ './settings'))
+const ContentTypeListComponent = lazy(
+  () => import(/* webpackChunkName: "contenttypes" */ './content-list/contenttype-list'),
+)
 
 export const MainRouter = () => {
   return (
@@ -63,32 +66,7 @@ export const MainRouter = () => {
           </Route>
 
           <Route path={PATHS.contentTypes.appPath}>
-            <ContentComponent
-              rootPath={PATHS.contentTypes.snPath}
-              fieldsToDisplay={[
-                { field: 'DisplayName' },
-                { field: 'Name' },
-                { field: 'Description' },
-                { field: 'ParentTypeName' as any },
-                { field: 'ModificationDate' },
-                { field: 'ModifiedBy' },
-              ]}
-              loadChildrenSettings={{
-                select: [
-                  'DisplayName',
-                  'Name',
-                  'Description',
-                  'ParentTypeName' as any,
-                  'ModificationDate',
-                  'ModifiedBy',
-                ],
-                query: "+TypeIs:'ContentType' .AUTOFILTERS:OFF",
-                inlinecount: 'allpages',
-                top: 1000,
-              }}
-              hasTree={false}
-              alwaysRefreshChildren={true}
-            />
+            <ContentTypeListComponent />
           </Route>
 
           <Route path={PATHS.dashboard.appPath}>
diff --git a/apps/sensenet/src/components/content-list/contenttype-list.tsx b/apps/sensenet/src/components/content-list/contenttype-list.tsx
new file mode 100644
index 000000000..f440e0c16
--- /dev/null
+++ b/apps/sensenet/src/components/content-list/contenttype-list.tsx
@@ -0,0 +1,52 @@
+import React, { lazy, useState } from 'react'
+import { PATHS } from '../../application-paths'
+import { Switch } from '@sensenet/controls-react'
+
+const ContentComponent = lazy(() => import(/* webpackChunkName: "content" */ '../content'))
+
+const ContentTypeList: React.FC = () => {
+  const [showHiddenTypes, setShowHiddenTypes] = useState(false)
+  const renderBeforeGrid = () => {
+    return (
+      <div style={{ marginTop: '20px', marginBottom: '20px' }}>
+        <label htmlFor="showHiddenTypes" style={{ marginRight: '10px' }}>
+          Show hidden types
+        </label>
+        <Switch
+          data-test="hidden-type-switch"
+          size="medium"
+          checked={showHiddenTypes}
+          onChange={() => setShowHiddenTypes(!showHiddenTypes)}
+        />
+      </div>
+    )
+  }
+
+  const contentTypeQuery =
+    "+TypeIs:'ContentType'" + (!showHiddenTypes ? ' -Categories:*HideByDefault*' : '') + ' .AUTOFILTERS:OFF'
+
+  return (
+    <ContentComponent
+      renderBeforeGrid={renderBeforeGrid}
+      rootPath={PATHS.contentTypes.snPath}
+      fieldsToDisplay={[
+        { field: 'DisplayName' },
+        { field: 'Name' },
+        { field: 'Description' },
+        { field: 'ParentTypeName' as any },
+        { field: 'ModificationDate' },
+        { field: 'ModifiedBy' },
+      ]}
+      loadChildrenSettings={{
+        select: ['DisplayName', 'Name', 'Description', 'ParentTypeName' as any, 'ModificationDate', 'ModifiedBy'],
+        query: contentTypeQuery,
+        inlinecount: 'allpages',
+        top: 1000,
+      }}
+      hasTree={false}
+      alwaysRefreshChildren={true}
+    />
+  )
+}
+
+export default ContentTypeList

From 8d97b921241db30903a06bd419d53629f3d4393a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikl=C3=B3s=20T=C3=B3th?= <tusmester@gmail.com>
Date: Fri, 17 Nov 2023 11:23:23 +0100
Subject: [PATCH 3/5] Feature flag for Categories field. (#1583)

---
 .../components/content-list/contenttype-list.tsx    | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/sensenet/src/components/content-list/contenttype-list.tsx b/apps/sensenet/src/components/content-list/contenttype-list.tsx
index f440e0c16..3f5594daf 100644
--- a/apps/sensenet/src/components/content-list/contenttype-list.tsx
+++ b/apps/sensenet/src/components/content-list/contenttype-list.tsx
@@ -1,12 +1,21 @@
 import React, { lazy, useState } from 'react'
 import { PATHS } from '../../application-paths'
 import { Switch } from '@sensenet/controls-react'
+import { useRepository } from '@sensenet/hooks-react'
 
 const ContentComponent = lazy(() => import(/* webpackChunkName: "content" */ '../content'))
 
 const ContentTypeList: React.FC = () => {
+  const repository = useRepository()
   const [showHiddenTypes, setShowHiddenTypes] = useState(false)
+  const categoryField = repository.schemas.getFieldTypeByName('Categories')
+  const isCategoryFieldAvailable = categoryField !== undefined
+
   const renderBeforeGrid = () => {
+    if (!isCategoryFieldAvailable) {
+      return <></>
+    }
+
     return (
       <div style={{ marginTop: '20px', marginBottom: '20px' }}>
         <label htmlFor="showHiddenTypes" style={{ marginRight: '10px' }}>
@@ -23,7 +32,9 @@ const ContentTypeList: React.FC = () => {
   }
 
   const contentTypeQuery =
-    "+TypeIs:'ContentType'" + (!showHiddenTypes ? ' -Categories:*HideByDefault*' : '') + ' .AUTOFILTERS:OFF'
+    "+TypeIs:'ContentType'" +
+    (isCategoryFieldAvailable && !showHiddenTypes ? ' -Categories:*HideByDefault*' : '') +
+    ' .AUTOFILTERS:OFF'
 
   return (
     <ContentComponent

From 9d9acc6475a4362fc28e5d3a8796133949fb0457 Mon Sep 17 00:00:00 2001
From: kavics <kavics@sensenet.com>
Date: Mon, 20 Nov 2023 13:30:03 +0100
Subject: [PATCH 4/5] 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 (
     <Card
@@ -65,11 +88,11 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => {
         onContextMenu(ev)
       }}
       className={classes.card}
-      data-test={`content-card-${settings.DisplayName?.replace(/\s+/g, '-').toLowerCase()}`}>
+      data-test={`content-card-${settingsName.replace(/\s+/g, '-').toLowerCase()}`}>
       <CardContent>
-        <Tooltip placement="top" title={settings.DisplayName || settings.Name}>
+        <Tooltip placement="top" title={settingsName}>
           <Typography variant="h5" gutterBottom={true} className={classes.title}>
-            {settings.DisplayName || settings.Name}
+            {settingsTitle}
           </Typography>
         </Tooltip>
         <Typography
@@ -79,6 +102,20 @@ export const ContentCard = ({ settings, onContextMenu }: ContentCardProps) => {
         />
       </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' }}>
@@ -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}
           </Button>
         </Link>
-        <a
-          target="_blank"
-          rel="noopener noreferrer"
-          href={`${SETUP_DOCS_URL}${createAnchorFromName(settings.DisplayName ? settings.DisplayName : '')}`}
-          style={{ textDecoration: 'none' }}>
-          <Button
-            aria-label={localization.learnMore}
-            size="small"
-            className={classes.button}
-            data-test="content-card-learnmore-button">
-            {localization.learnMore}
-          </Button>
-        </a>
+        {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>
   )

From 14d7b49e58b671b70723d1dddd00350df2d2d84f Mon Sep 17 00:00:00 2001
From: kavics <kavics@sensenet.com>
Date: Mon, 20 Nov 2023 14:23:54 +0100
Subject: [PATCH 5/5] The "MORE" content-type filter contains all not-hidden
 items. (#1580)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* (temporary) Fetch content types.

* Use "HideByDefault" category and refactor.

* E2e tests of the type filter "More".

* refactor

* Use fallback if there is no Categories field.

* some fixes

* sort by displayname

* sort ctds by name

* sorty on client side

---------

Co-authored-by: Ádám Hassan <hassana@sensenet.com>
Co-authored-by: vargajoe <varga.yosh@gmail.com>
---
 apps/sensenet/cypress/e2e/search/search.cy.ts | 48 +++++++++++
 .../components/search/filters/type-filter.tsx | 79 +++++++++++++++----
 .../src/components/search/search-bar.tsx      | 16 ++--
 3 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/apps/sensenet/cypress/e2e/search/search.cy.ts b/apps/sensenet/cypress/e2e/search/search.cy.ts
index 243448f1e..0462889d2 100644
--- a/apps/sensenet/cypress/e2e/search/search.cy.ts
+++ b/apps/sensenet/cypress/e2e/search/search.cy.ts
@@ -70,4 +70,52 @@ describe('Search', () => {
         .then((fullname) => expect(fullname).to.eq('Business Cat'))
     })
   })
+
+  context('more contentTypes filter', () => {
+    const term = 'admin*'
+    before(() => {
+      cy.login()
+      cy.visit(pathWithQueryParams({ path: '/', newParams: { repoUrl: Cypress.env('repoUrl') } }))
+    })
+    beforeEach(() => {
+      cy.get('[data-test="sensenet-logo"]').click()
+      cy.get('[data-test="search-button"]')
+        .click()
+        .get('[data-test="command-box"] input')
+        .type(term, { delay: 250 })
+        .get('[data-test="search-suggestion-list"] ul')
+        .children()
+        .as('search')
+        .first()
+        .click()
+        .location()
+        .should((loc) => {
+          expect(loc.pathname).to.eq(PATHS.search.appPath)
+          expect(loc.search).to.eq(`?term=${term}`)
+        })
+    })
+
+    it('result contains users and groups', () => {
+      cy.get('[data-test="table-cell-admin"]').should('exist')
+      cy.get('[data-test="table-cell-administrators"]').should('exist')
+      cy.get('[data-test="table-cell-captain-picard"]').should('not.exist')
+    })
+
+    it('the "more" menu contains more than 20 items including "group" and "user"', () => {
+      cy.get('[data-test="more-type-filter-button"]').click()
+      cy.get('[id="more-type-filter"]').contains('li', 'User')
+      cy.get('[id="more-type-filter"]').contains('li', 'Group')
+      cy.get('[data-test="more-menu-item-user"]').parent().children().its('length').should('be.gt', 20)
+      // press <ESC> to hide the menu to unblock the UI
+      cy.get('body').trigger('keydown', { keyCode: 27 })
+    })
+
+    it('result contains one user after  use the filter', () => {
+      cy.get('[data-test="more-type-filter-button"]').click().get('[data-test="more-menu-item-user"]').click()
+      // "MORE" changed to "USER"
+      cy.get('[data-test="more-type-filter-button"]').contains('User')
+      // "Administrators" disappeared
+      cy.get('[data-test="table-cell-administrators"]').should('not.exist')
+    })
+  })
 })
diff --git a/apps/sensenet/src/components/search/filters/type-filter.tsx b/apps/sensenet/src/components/search/filters/type-filter.tsx
index d55c92026..29facede2 100644
--- a/apps/sensenet/src/components/search/filters/type-filter.tsx
+++ b/apps/sensenet/src/components/search/filters/type-filter.tsx
@@ -5,7 +5,10 @@ import Image from '@material-ui/icons/Image'
 import InsertDriveFile from '@material-ui/icons/InsertDriveFile'
 import Person from '@material-ui/icons/Person'
 import Search from '@material-ui/icons/Search'
-import React, { useState } from 'react'
+import { ConstantContent } from '@sensenet/client-core'
+import { GenericContent } from '@sensenet/default-content-types'
+import { useRepository } from '@sensenet/hooks-react'
+import React, { useEffect, useState } from 'react'
 import { useSearch } from '../../../context/search'
 import { useLocalization } from '../../../hooks'
 
@@ -75,14 +78,54 @@ const useStyles = makeStyles(() => {
   })
 })
 
+type moreOptionsItem = {
+  name: string
+  type: string
+}
+
 export const TypeFilter = () => {
+  const repo = useRepository()
   const classes = useStyles()
   const localization = useLocalization().search.filters.type
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
-
   const searchState = useSearch()
+  const [otherContentTypes, setOtherContentTypes] = useState<moreOptionsItem[]>([])
+
+  useEffect(() => {
+    const ac = new AbortController()
+    const categoryField = repo.schemas.getFieldTypeByName('Categories')
+    const fetchData = async () => {
+      try {
+        if (categoryField) {
+          const response = await repo.loadCollection<GenericContent>({
+            path: ConstantContent.PORTAL_ROOT.Path,
+            oDataOptions: {
+              query: "-Categories:'*HideByDefault*' +TypeIs:'ContentType' .AUTOFILTERS:OFF",
+              select: ['Type', 'DisplayName'],
+              orderby: 'Name',
+            },
+            requestInit: { signal: ac.signal },
+          })
+          const items: moreOptionsItem[] = response.d.results.map((item) => ({
+            name: item.DisplayName ?? item.Name,
+            type: item.Name,
+          }))
+          setOtherContentTypes(items)
+        } else {
+          setOtherContentTypes(moreOptions)
+        }
+      } catch (error) {
+        console.error('Error fetching data:', error)
+      }
+    }
+    fetchData()
+
+    return () => {
+      ac.abort()
+    }
+  }, [repo])
 
-  const [[activeFromMore], othersFromMore] = moreOptions.reduce(
+  const [[activeFromMore], othersFromMore] = otherContentTypes.reduce(
     ([pass, fail], filter) => {
       return filter.name === searchState.filters.type.name ? [[...pass, filter], fail] : [pass, [...fail, filter]]
     },
@@ -108,6 +151,7 @@ export const TypeFilter = () => {
       ))}
 
       <Button
+        data-test="more-type-filter-button"
         aria-controls="more-type-filter"
         aria-haspopup="true"
         variant="outlined"
@@ -116,7 +160,7 @@ export const TypeFilter = () => {
         onClick={(event) => {
           setAnchorEl(event.currentTarget)
         }}>
-        {activeFromMore ? localization[activeFromMore.name as keyof typeof localization] : localization.more}
+        {activeFromMore ? activeFromMore.name : localization.more}
       </Button>
       <Menu
         id="more-type-filter"
@@ -133,18 +177,21 @@ export const TypeFilter = () => {
           vertical: 'top',
           horizontal: 'right',
         }}>
-        {(othersFromMore as Filter[]).map((filter) => (
-          <MenuItem
-            key={filter.name}
-            onClick={() => {
-              setAnchorEl(null)
-              searchState.setFilters((filters) =>
-                filters.type.name === filter.name ? filters : { ...filters, type: filter },
-              )
-            }}>
-            {localization[filter.name as keyof typeof localization]}
-          </MenuItem>
-        ))}
+        {(othersFromMore as Filter[])
+          .sort((a, b) => a.name.localeCompare(b.name))
+          .map((filter) => (
+            <MenuItem
+              key={filter.name}
+              data-test={`more-menu-item-${filter.name.toLowerCase()}`}
+              onClick={() => {
+                setAnchorEl(null)
+                searchState.setFilters((filters) =>
+                  filters.type.name === filter.name ? filters : { ...filters, type: filter },
+                )
+              }}>
+              {filter.name}
+            </MenuItem>
+          ))}
       </Menu>
     </div>
   )
diff --git a/apps/sensenet/src/components/search/search-bar.tsx b/apps/sensenet/src/components/search/search-bar.tsx
index da96b2dba..d84b38a32 100644
--- a/apps/sensenet/src/components/search/search-bar.tsx
+++ b/apps/sensenet/src/components/search/search-bar.tsx
@@ -59,15 +59,13 @@ export const SearchBar = () => {
                     className={classes.inputButton}
                     aria-label={localization.clearTerm}
                     title={localization.clearTerm}
-                    onClick={() => null}>
-                    <Cancel
-                      onClick={() => {
-                        if (searchInputRef.current) {
-                          searchInputRef.current.value = ''
-                        }
-                        searchState.setTerm('')
-                      }}
-                    />
+                    onClick={() => {
+                      if (searchInputRef.current) {
+                        searchInputRef.current.value = ''
+                      }
+                      searchState.setTerm('')
+                    }}>
+                    <Cancel />
                   </IconButton>
                 )}
                 <IconButton