Add Contenttypes component and add hidden switch. (#1578)

* Add Contenttypes component and add hidden switch.

* Add switch style and test.

Author: tusmester

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')
+      })
+  })
+})

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}>

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