From 2800a8caea8384737a3a9c84a0a07c1d99ecf4e4 Mon Sep 17 00:00:00 2001 From: Adama Camara <48602776+acamara2016@users.noreply.github.com> Date: Fri, 23 Sep 2022 11:48:13 -0300 Subject: [PATCH] added isShow to page props --- src/adminjs-options.interface.ts | 120 +++++++++--------- .../components/app/sidebar/sidebar-pages.tsx | 23 ++-- .../interfaces/page-json.interface.ts | 13 +- src/frontend/store/pages-to-store.ts | 5 +- 4 files changed, 82 insertions(+), 79 deletions(-) diff --git a/src/adminjs-options.interface.ts b/src/adminjs-options.interface.ts index 33ee9fe86..ad1cb3a3d 100644 --- a/src/adminjs-options.interface.ts +++ b/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; + databases?: Array /** * 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,7 +98,7 @@ export interface AdminJSOptions { * * @see ResourceOptions */ - resources?: Array; + resources?: Array /** * Option to modify the dashboard */ @@ -106,24 +106,24 @@ export interface AdminJSOptions { /** * 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; + env?: Record /* 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; + settings?: Partial } 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; + styles?: Array /** * List of urls to custom scripts. If you use some particular js * library - you can pass its url here. */ - scripts?: Array; + scripts?: Array /** * 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; + theme?: Partial /** * 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} */ -export type BrandingOptionsFunction = ( - admin?: CurrentAdmin -) => BrandingOptions | Promise +export type BrandingOptionsFunction = (admin?: CurrentAdmin) => BrandingOptions | Promise /** * 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 * @memberof AdminJSOptions */ export type ResourceWithOptions = { - resource: any; - options: ResourceOptions; - features?: Array; + resource: any + options: ResourceOptions + features?: Array } /** @@ -431,11 +434,7 @@ export type FeatureType = ( * @alias PageHandler * @memberof AdminJSOptions */ -export type PageHandler = ( - request: any, - response: any, - context: PageContext, -) => Promise +export type PageHandler = (request: any, response: any, context: PageContext) => Promise /** * 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; - resources?: Array; + rootPath: string + logoutPath: string + loginPath: string + databases?: Array + 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'] } diff --git a/src/frontend/components/app/sidebar/sidebar-pages.tsx b/src/frontend/components/app/sidebar/sidebar-pages.tsx index 060177b11..7a24d9444 100644 --- a/src/frontend/components/app/sidebar/sidebar-pages.tsx +++ b/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) => { 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 = 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 ( - - ) + return } export default SidebarPages diff --git a/src/frontend/interfaces/page-json.interface.ts b/src/frontend/interfaces/page-json.interface.ts index 491d81b51..a3f2cc9ec 100644 --- a/src/frontend/interfaces/page-json.interface.ts +++ b/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 } diff --git a/src/frontend/store/pages-to-store.ts b/src/frontend/store/pages-to-store.ts index 844a213a0..f8c832bed 100644 --- a/src/frontend/store/pages-to-store.ts +++ b/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 => Object.entries(pages) - .map(([key, adminPage]) => ({ +const pagesToStore = (pages: AdminJSOptions['pages'] = {}): Array => + Object.entries(pages).map(([key, adminPage]) => ({ name: key, component: adminPage.component, icon: adminPage.icon, + isShown: adminPage.isShown, })) export default pagesToStore