added isShow to page props

src/adminjs-options.interface.ts

@@ -55,19 +55,19 @@ export interface AdminJSOptions {
    * path, under which, AdminJS will be available. Default to `/admin`
    *
    */
-  rootPath?: string;
+  rootPath?: string
   /**
    * url to a logout action, default to `/admin/logout`
    */
-  logoutPath?: string;
+  logoutPath?: string
   /**
    * url to a login page, default to `/admin/login`
    */
-  loginPath?: string;
+  loginPath?: string
   /**
    * Array of all Databases which are supported by AdminJS via adapters
    */
-  databases?: Array<any>;
+  databases?: Array<any>
 
   /**
    * List of custom pages which will be visible below all resources
@@ -88,7 +88,7 @@ export interface AdminJSOptions {
    *   },
    * },
    */
-  pages?: AdminPages;
+  pages?: AdminPages
   /**
    * Array of all Resources which are supported by AdminJS via adapters.
    * You can pass either resource or resource with an options and thus modify it.
@@ -98,32 +98,32 @@ export interface AdminJSOptions {
    *
    * @see ResourceOptions
    */
-  resources?: Array<ResourceWithOptions | any>;
+  resources?: Array<ResourceWithOptions | any>
   /**
    * Option to modify the dashboard
    */
   dashboard?: {
     /**
      * Handler function which can be triggered using {@link ApiClient#getDashboard}.
      */
-    handler?: PageHandler;
+    handler?: PageHandler
     /**
      * Bundled component name which should be rendered when user opens the dashboard
      */
-    component?: string;
-  };
+    component?: string
+  }
   /**
    * Flag which indicates if version number should be visible on the UI
    */
-  version?: VersionSettings;
+  version?: VersionSettings
   /**
    * Options which are related to the branding.
    */
-  branding?: BrandingOptions | BrandingOptionsFunction;
+  branding?: BrandingOptions | BrandingOptionsFunction
   /**
    * Custom assets you want to pass to AdminJS
    */
-  assets?: Assets | AssetsFunction;
+  assets?: Assets | AssetsFunction
   /**
    * Indicates is bundled by AdminJS files like:
    * - components.bundle.js
@@ -159,7 +159,7 @@ export interface AdminJSOptions {
    * with firebase hosting)
    * - point {@link AdminJS.assetsCDN} to this domain
    */
-  assetsCDN?: string;
+  assetsCDN?: string
   /**
    * Environmental variables passed to the frontend.
    *
@@ -178,7 +178,7 @@ export interface AdminJSOptions {
    * AdminJS.env.GOOGLE_MAP_API_TOKEN
    * ```
    */
-  env?: Record<string, string>;
+  env?: Record<string, string>
 
   /* cspell: disable */
 
@@ -236,22 +236,22 @@ export interface AdminJSOptions {
    * Check out the [i18n tutorial]{@tutorial i18n} to see how
    * internationalization in AdminJS works.
    */
-  locale?: Locale;
+  locale?: Locale
 
   /**
    * rollup bundle options;
    */
-  bundler?: BundlerOptions;
+  bundler?: BundlerOptions
 
   /**
    * Additional settings.
    */
-  settings?: Partial<AdminJSSettings>;
+  settings?: Partial<AdminJSSettings>
 }
 
 export type AdminJSSettings = {
-  defaultPerPage: number;
-};
+  defaultPerPage: number
+}
 
 /* cspell: enable */
 
@@ -268,16 +268,16 @@ export type Assets = {
   /**
    * List to urls of custom stylesheets. You can pass your font - icons here (as an example)
    */
-  styles?: Array<string>;
+  styles?: Array<string>
   /**
    * List of urls to custom scripts. If you use some particular js
    * library - you can pass its url here.
    */
-  scripts?: Array<string>;
+  scripts?: Array<string>
   /**
    *  Mapping of core scripts in case you want to version your assets
    */
-  coreScripts?: CoreScripts;
+  coreScripts?: CoreScripts
 }
 
 /**
@@ -299,17 +299,17 @@ export type VersionSettings = {
   /**
    * if set to true - current admin version will be visible
    */
-  admin?: boolean;
+  admin?: boolean
   /**
    * Here you can pass any arbitrary version text which will be seen in the US.
    * You can pass here your current API version.
    */
-  app?: string;
+  app?: string
 }
 
 export type VersionProps = {
-  admin?: string;
-  app?: string;
+  admin?: string
+  app?: string
 }
 
 /**
@@ -334,26 +334,26 @@ export type BrandingOptions = {
   /**
    * URL to a logo, or `false` if you want to hide the default one.
    */
-  logo?: string | false;
+  logo?: string | false
   /**
    * Name of your company, which will replace "AdminJS".
    */
-  companyName?: string;
+  companyName?: string
   /**
    * CSS theme.
    */
-  theme?: Partial<ThemeOverride>;
+  theme?: Partial<ThemeOverride>
   /**
    * Flag indicates if "made with love" tiny heart icon
    * should be visible on the bottom sidebar and login page.
    * @new since 6.0.0
    */
-  withMadeWithLove?: boolean;
+  withMadeWithLove?: boolean
 
   /**
    * URL to a favicon
    */
-  favicon?: string;
+  favicon?: string
 }
 
 /**
@@ -365,9 +365,7 @@ export type BrandingOptions = {
  * @memberof AdminJSOptions
  * @returns {BrandingOptions | Promise<BrandingOptions>}
  */
-export type BrandingOptionsFunction = (
-  admin?: CurrentAdmin
-) => BrandingOptions | Promise<BrandingOptions>
+export type BrandingOptionsFunction = (admin?: CurrentAdmin) => BrandingOptions | Promise<BrandingOptions>
 
 /**
  * Object describing regular page in AdminJS
@@ -379,16 +377,21 @@ export type AdminPage = {
   /**
    * Handler function
    */
-  handler?: PageHandler;
+  handler?: PageHandler
   /**
    * Component defined by using {@link AdminJS.bundle}
    */
-  component: string;
+  component: string
 
   /**
    * Page icon
    */
-  icon?: string;
+  icon?: string
+
+  /**
+   * Page visibility
+   */
+  isShown?: boolean
 }
 
 /**
@@ -405,9 +408,9 @@ export type AdminPages = Record<string, AdminPage>
  * @memberof AdminJSOptions
  */
 export type ResourceWithOptions = {
-  resource: any;
-  options: ResourceOptions;
-  features?: Array<FeatureType>;
+  resource: any
+  options: ResourceOptions
+  features?: Array<FeatureType>
 }
 
 /**
@@ -431,11 +434,7 @@ export type FeatureType = (
  * @alias PageHandler
  * @memberof AdminJSOptions
  */
-export type PageHandler = (
-  request: any,
-  response: any,
-  context: PageContext,
-) => Promise<any>
+export type PageHandler = (request: any, response: any, context: PageContext) => Promise<any>
 
 /**
  * Bundle options
@@ -453,22 +452,25 @@ export type BundlerOptions = {
   /**
    * The file path to babel config file or json object of babel config.
    */
-  babelConfig?: BabelConfig | string;
+  babelConfig?: BabelConfig | string
 }
 
 export interface AdminJSOptionsWithDefault extends AdminJSOptions {
-  rootPath: string;
-  logoutPath: string;
-  loginPath: string;
-  databases?: Array<BaseDatabase>;
-  resources?: Array<BaseResource | {
-    resource: BaseResource;
-    options: ResourceOptions;
-  }>;
+  rootPath: string
+  logoutPath: string
+  loginPath: string
+  databases?: Array<BaseDatabase>
+  resources?: Array<
+    | BaseResource
+    | {
+        resource: BaseResource
+        options: ResourceOptions
+      }
+  >
   dashboard: {
-    handler?: PageHandler;
-    component?: string;
-  };
-  bundler: BundlerOptions;
-  pages: AdminJSOptions['pages'];
+    handler?: PageHandler
+    component?: string
+  }
+  bundler: BundlerOptions
+  pages: AdminJSOptions['pages']
 }

src/frontend/components/app/sidebar/sidebar-pages.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Navigation, NavigationElementProps } from '@adminjs/design-system'
 
-import { useNavigate, useLocation } from 'react-router'
+import { useHistory, useLocation } from 'react-router'
 import ViewHelpers from '../../../../backend/utils/view-helpers/view-helpers'
 import { useTranslation } from '../../../hooks/use-translation'
 import { ReduxState } from '../../../store/store'
 
 type Props = {
-  pages?: ReduxState['pages'];
+  pages?: ReduxState['pages']
 }
 
 const h = new ViewHelpers()
@@ -17,36 +17,29 @@ const SidebarPages: React.FC<Props> = (props) => {
 
   const { translateLabel } = useTranslation()
   const location = useLocation()
-  const navigate = useNavigate()
+  const history = useHistory()
 
   if (!pages || !pages.length) {
-    return null
+    return <></>
   }
 
-  const isActive = (page): boolean => (
-    !!location.pathname.match(`/pages/${page.name}`)
-  )
+  const isActive = (page): boolean => !!location.pathname.match(`/pages/${page.name}`)
 
   const elements: Array<NavigationElementProps> = pages.map((page) => ({
     id: page.name,
     label: page.name,
     isSelected: isActive(page),
+    isShown: page.isShown,
     icon: page.icon,
     href: h.pageUrl(page.name),
     onClick: (event, element): void => {
       event.preventDefault()
       if (element.href) {
-        navigate(element.href)
+        history.push(element.href)
       }
     },
   }))
-
-  return (
-    <Navigation
-      label={translateLabel('pages')}
-      elements={elements}
-    />
-  )
+  return <Navigation label={translateLabel('pages')} elements={elements} />
 }
 
 export default SidebarPages

src/frontend/interfaces/page-json.interface.ts

@@ -1,3 +1,5 @@
+import { ActionJSON } from './action'
+
 /**
  * Representing the page in the sidebar
  * @subcategory Frontend
@@ -6,14 +8,19 @@ export interface PageJSON {
   /**
    * Page name
    */
-  name: string;
+  name: string
   /**
    * Page component. Bundled with {@link AdminJS.bundle}
    */
-  component: string;
+  component: string
 
   /**
    * Page icon
    */
-  icon?: string;
+  icon?: string
+
+  /**
+   * Page visibility
+   */
+  isShown: boolean
 }

src/frontend/store/pages-to-store.ts

@@ -2,11 +2,12 @@ import { AdminJSOptions } from '../../adminjs-options.interface'
 
 import { PageJSON } from '../interfaces'
 
-const pagesToStore = (pages: AdminJSOptions['pages'] = {}): Array<PageJSON> => Object.entries(pages)
-  .map(([key, adminPage]) => ({
+const pagesToStore = (pages: AdminJSOptions['pages'] = {}): Array<PageJSON> =>
+  Object.entries(pages).map(([key, adminPage]) => ({
     name: key,
     component: adminPage.component,
     icon: adminPage.icon,
+    isShown: adminPage.isShown,
   }))
 
 export default pagesToStore