Merge remote-tracking branch 'origin/master' into support/omit-textlint

apps/app/src/components/Admin/Notification/NotificationSetting.jsx

@@ -126,12 +126,10 @@ function NotificationSetting(props) {
       user_trigger_notification: {
         Icon: () => <i className="icon-settings" />,
         i18n: 'User trigger notification',
-        index: 0,
       },
       global_notification: {
         Icon: () => <i className="icon-settings" />,
         i18n: 'Global notification',
-        index: 1,
       },
     };
   }, []);

apps/app/src/components/Admin/Security/SecurityManagementContents.jsx

@@ -32,37 +32,30 @@ const SecurityManagementContents = () => {
       passport_local: {
         Icon: () => <i className="fa fa-users" />,
         i18n: 'ID/Pass',
-        index: 0,
       },
       passport_ldap: {
         Icon: () => <i className="fa fa-sitemap" />,
         i18n: 'LDAP',
-        index: 1,
       },
       passport_saml: {
         Icon: () => <i className="fa fa-key" />,
         i18n: 'SAML',
-        index: 2,
       },
       passport_oidc: {
         Icon: () => <i className="fa fa-key" />,
         i18n: 'OIDC',
-        index: 3,
       },
       passport_google: {
         Icon: () => <i className="fa fa-google" />,
         i18n: 'Google',
-        index: 4,
       },
       passport_github: {
         Icon: () => <i className="fa fa-github" />,
         i18n: 'GitHub',
-        index: 5,
       },
       // passport_facebook: {
       //   Icon: () => <i className="fa fa-facebook" />,
       //   i18n: '(TBD) Facebook',
-      //   index: 7,
       // },
     };
   }, []);

apps/app/src/components/CustomNavigation/CustomNav.jsx → apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -2,16 +2,20 @@ import React, {
   useEffect, useState, useRef, useMemo, useCallback,
 } from 'react';
 
-import PropTypes from 'prop-types';
+import { Breakpoint } from '@growi/ui/dist/interfaces/breakpoints';
 import {
   Nav, NavItem, NavLink,
 } from 'reactstrap';
 
+import { ICustomNavTabMappings } from '~/interfaces/ui';
+
 import styles from './CustomNav.module.scss';
 
 
-function getBreakpointOneLevelLarger(breakpoint) {
+function getBreakpointOneLevelLarger(breakpoint: Breakpoint): Omit<Breakpoint, 'xs' | 'sm'> {
   switch (breakpoint) {
+    case 'xs':
+      return 'sm';
     case 'sm':
       return 'md';
     case 'md':
@@ -25,12 +29,18 @@ function getBreakpointOneLevelLarger(breakpoint) {
 }
 
 
-export const CustomNavDropdown = (props) => {
+type CustomNavDropdownProps = {
+  navTabMapping: ICustomNavTabMappings,
+  activeTab: string,
+  onNavSelected?: (selectedTabKey: string) => void,
+};
+
+export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element => {
   const {
     activeTab, navTabMapping, onNavSelected,
   } = props;
 
-  const activeObj = navTabMapping[activeTab];
+  const { Icon, i18n } = navTabMapping[activeTab];
 
   const menuItemClickHandler = useCallback((key) => {
     if (onNavSelected != null) {
@@ -48,16 +58,15 @@ export const CustomNavDropdown = (props) => {
         aria-expanded="false"
       >
         <span className="float-left">
-          { activeObj != null && (
-            <><activeObj.Icon /> {activeObj.i18n}</>
-          ) }
+          { Icon != null && <Icon /> } {i18n}
         </span>
       </button>
       <div className="dropdown-menu dropdown-menu-right">
         {Object.entries(navTabMapping).map(([key, value]) => {
 
           const isActive = activeTab === key;
-          const isLinkEnabled = value.isLinkEnabled != null ? value.isLinkEnabled(value) : true;
+          const _isLinkEnabled = value.isLinkEnabled ?? true;
+          const isLinkEnabled = typeof _isLinkEnabled === 'boolean' ? _isLinkEnabled : _isLinkEnabled(value);
           const { Icon, i18n } = value;
 
           return (
@@ -68,7 +77,7 @@ export const CustomNavDropdown = (props) => {
               disabled={!isLinkEnabled}
               onClick={() => menuItemClickHandler(key)}
             >
-              <Icon /> {i18n}
+              { Icon != null && <Icon /> } {i18n}
             </button>
           );
         })}
@@ -77,23 +86,29 @@ export const CustomNavDropdown = (props) => {
   );
 };
 
-CustomNavDropdown.propTypes = {
-  navTabMapping: PropTypes.object.isRequired,
-  activeTab: PropTypes.string,
-  onNavSelected: PropTypes.func,
-};
 
+type CustomNavTabProps = {
+  activeTab: string,
+  navTabMapping: ICustomNavTabMappings,
+  onNavSelected?: (selectedTabKey: string) => void,
+  hideBorderBottom?: boolean,
+  breakpointToHideInactiveTabsDown?: Breakpoint,
+  navRightElement?: JSX.Element,
+};
 
-export const CustomNavTab = (props) => {
-  const navContainer = useRef();
+export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
   const [sliderWidth, setSliderWidth] = useState(0);
   const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
 
   const {
-    activeTab, navTabMapping, onNavSelected, hideBorderBottom, breakpointToHideInactiveTabsDown, navRightElement,
+    activeTab, navTabMapping, onNavSelected,
+    hideBorderBottom,
+    breakpointToHideInactiveTabsDown, navRightElement,
   } = props;
 
-  const navTabRefs = useMemo(() => {
+  const navContainerRef = useRef<HTMLDivElement>(null);
+
+  const navTabRefs: { [key: string]: HTMLAnchorElement } = useMemo(() => {
     const obj = {};
     Object.keys(navTabMapping).forEach((key) => {
       obj[key] = React.createRef();
@@ -107,9 +122,9 @@ export const CustomNavTab = (props) => {
     }
   }, [onNavSelected]);
 
-  function registerNavLink(key, elm) {
-    if (elm != null) {
-      navTabRefs[key] = elm;
+  function registerNavLink(key: string, anchorElem: HTMLAnchorElement | null) {
+    if (anchorElem != null) {
+      navTabRefs[key] = anchorElem;
     }
   }
 
@@ -123,27 +138,28 @@ export const CustomNavTab = (props) => {
       return;
     }
 
-    if (navContainer == null) {
+    if (navContainerRef.current == null) {
       return;
     }
 
-    let tempML = 0;
+    const navContainer = navContainerRef.current;
 
-    const styles = Object.entries(navTabRefs).map((el) => {
-      const width = getPercentage(el[1].offsetWidth, navContainer.current.offsetWidth);
-      const marginLeft = tempML;
-      tempML += width;
-      return { width, marginLeft };
-    });
-    const { width, marginLeft } = styles[navTabMapping[activeTab].index];
+    let marginLeft = 0;
+    for (const [key, anchorElem] of Object.entries(navTabRefs)) {
+      const width = getPercentage(anchorElem.offsetWidth, navContainer.offsetWidth);
 
-    setSliderWidth(width);
-    setSliderMarginLeft(marginLeft);
+      if (key === activeTab) {
+        setSliderWidth(width);
+        setSliderMarginLeft(marginLeft);
+        break;
+      }
 
+      marginLeft += width;
+    }
   }, [activeTab, navTabRefs, navTabMapping]);
 
   // determine inactive classes to hide NavItem
-  const inactiveClassnames = [];
+  const inactiveClassnames: string[] = [];
   if (breakpointToHideInactiveTabsDown != null) {
     const breakpointOneLevelLarger = getBreakpointOneLevelLarger(breakpointToHideInactiveTabsDown);
     inactiveClassnames.push('d-none');
@@ -152,12 +168,13 @@ export const CustomNavTab = (props) => {
 
   return (
     <div className={`grw-custom-nav-tab ${styles['grw-custom-nav-tab']}`}>
-      <div ref={navContainer} className="d-flex justify-content-between">
+      <div ref={navContainerRef} className="d-flex justify-content-between">
         <Nav className="nav-title">
           {Object.entries(navTabMapping).map(([key, value]) => {
 
             const isActive = activeTab === key;
-            const isLinkEnabled = value.isLinkEnabled != null ? value.isLinkEnabled(value) : true;
+            const _isLinkEnabled = value.isLinkEnabled ?? true;
+            const isLinkEnabled = typeof _isLinkEnabled === 'boolean' ? _isLinkEnabled : _isLinkEnabled(value);
             const { Icon, i18n } = value;
 
             return (
@@ -166,7 +183,7 @@ export const CustomNavTab = (props) => {
                 className={`p-0 ${isActive ? 'active' : inactiveClassnames.join(' ')}`}
               >
                 <NavLink type="button" key={key} innerRef={elm => registerNavLink(key, elm)} disabled={!isLinkEnabled} onClick={() => navLinkClickHandler(key)}>
-                  <Icon /> {i18n}
+                  { Icon != null && <Icon /> } {i18n}
                 </NavLink>
               </NavItem>
             );
@@ -181,27 +198,23 @@ export const CustomNavTab = (props) => {
 
 };
 
-CustomNavTab.propTypes = {
-  activeTab: PropTypes.string.isRequired,
-  navTabMapping: PropTypes.object.isRequired,
-  onNavSelected: PropTypes.func,
-  hideBorderBottom: PropTypes.bool,
-  breakpointToHideInactiveTabsDown: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  navRightElement: PropTypes.node,
-};
 
-CustomNavTab.defaultProps = {
-  hideBorderBottom: false,
+type CustomNavProps = {
+  activeTab: string,
+  navTabMapping: ICustomNavTabMappings,
+  onNavSelected?: (selectedTabKey: string) => void,
+  hideBorderBottom?: boolean,
+  breakpointToHideInactiveTabsDown?: Breakpoint,
+  breakpointToSwitchDropdownDown?: Breakpoint,
 };
 
-
-const CustomNav = (props) => {
+const CustomNav = (props: CustomNavProps): JSX.Element => {
 
   const tabClassnames = ['d-none'];
   const dropdownClassnames = ['d-block'];
 
   // determine classes to show/hide
-  const breakpointOneLevelLarger = getBreakpointOneLevelLarger(props.breakpointToSwitchDropdownDown);
+  const breakpointOneLevelLarger = getBreakpointOneLevelLarger(props.breakpointToSwitchDropdownDown ?? 'sm');
   tabClassnames.push(`d-${breakpointOneLevelLarger}-block`);
   dropdownClassnames.push(`d-${breakpointOneLevelLarger}-none`);
 
@@ -218,19 +231,4 @@ const CustomNav = (props) => {
 
 };
 
-CustomNav.propTypes = {
-  activeTab: PropTypes.string.isRequired,
-  navTabMapping: PropTypes.object.isRequired,
-  onNavSelected: PropTypes.func,
-  hideBorderBottom: PropTypes.bool,
-  breakpointToHideInactiveTabsDown: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-  breakpointToSwitchDropdownDown: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
-};
-
-CustomNav.defaultProps = {
-  hideBorderBottom: false,
-  breakpointToSwitchDropdownDown: 'sm',
-};
-
-
 export default CustomNav;

apps/app/src/components/CustomNavigation/CustomTabContent.tsx

@@ -24,11 +24,12 @@ const CustomTabContent = (props: Props): JSX.Element => {
       {Object.entries(navTabMapping).map(([key, value]) => {
 
         const { Content } = value;
+        const content = Content != null ? <Content /> : <></>;
 
         return (
           <TabPane key={key} tabId={key}>
             <LazyRenderer shouldRender={key === activeTab}>
-              <Content />
+              {content}
             </LazyRenderer>
           </TabPane>
         );

apps/app/src/components/DescendantsPageListModal.tsx

@@ -54,7 +54,6 @@ export const DescendantsPageListModal = (): JSX.Element => {
           return <DescendantsPageList path={status.path} />;
         },
         i18n: t('page_list'),
-        index: 0,
         isLinkEnabled: () => !isSharedUser,
       },
       timeline: {
@@ -66,7 +65,6 @@ export const DescendantsPageListModal = (): JSX.Element => {
           return <PageTimeline />;
         },
         i18n: t('Timeline View'),
-        index: 1,
         isLinkEnabled: () => !isSharedUser,
       },
     };

apps/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -127,13 +127,11 @@ export const InAppNotificationPage: FC = () => {
       Icon: () => <></>,
       Content: () => InAppNotificationCategoryByStatus(),
       i18n: t('in_app_notification.all'),
-      index: 0,
     },
     external_accounts: {
       Icon: () => <></>,
       Content: () => InAppNotificationCategoryByStatus(InAppNotificationStatuses.STATUS_UNOPENED),
       i18n: t('in_app_notification.unopend'),
-      index: 1,
     },
   };
 

apps/app/src/components/Me/PersonalSettings.jsx

@@ -22,37 +22,31 @@ const PersonalSettings = () => {
         Icon: () => <i className="icon-fw icon-user"></i>,
         Content: UserSettings,
         i18n: t('User Information'),
-        index: 0,
       },
       external_accounts: {
         Icon: () => <i className="icon-fw icon-share-alt"></i>,
         Content: ExternalAccountLinkedMe,
         i18n: t('admin:user_management.external_accounts'),
-        index: 1,
       },
       password_settings: {
         Icon: () => <i className="icon-fw icon-lock"></i>,
         Content: PasswordSettings,
         i18n: t('Password Settings'),
-        index: 2,
       },
       api_settings: {
         Icon: () => <i className="icon-fw icon-paper-plane"></i>,
         Content: ApiSettings,
         i18n: t('API Settings'),
-        index: 3,
       },
       // editor_settings: {
       //   Icon: () => <i className="icon-fw icon-pencil"></i>,
       //   Content: EditorSettings,
       //   i18n: t('editor_settings.editor_settings'),
-      //   index: 4,
       // },
       in_app_notification_settings: {
         Icon: () => <i className="icon-fw icon-bell"></i>,
         Content: InAppNotificationSettings,
         i18n: t('in_app_notification_settings.in_app_notification_settings'),
-        index: 5,
       },
     };
   }, [t]);

apps/app/src/components/NotFoundPage.tsx

@@ -24,13 +24,11 @@ const NotFoundPage = (props: NotFoundPageProps): JSX.Element => {
         Icon: PageListIcon,
         Content: () => <DescendantsPageList path={path} />,
         i18n: t('page_list'),
-        index: 0,
       },
       timeLine: {
         Icon: TimeLineIcon,
         Content: PageTimeline,
         i18n: t('Timeline View'),
-        index: 1,
       },
     };
   }, [path, t]);

apps/app/src/components/PageAccessoriesModal.tsx

@@ -78,7 +78,6 @@ const PageAccessoriesModal = (): JSX.Element => {
           return <PageHistory onClose={close} sourceRevisionId={sourceRevisionId} targetRevisionId={targetRevisionId}/>;
         },
         i18n: t('History'),
-        index: 0,
         isLinkEnabled: () => !isGuestUser && !isSharedUser,
       },
       [PageAccessoriesModalContents.Attachment]: {
@@ -87,7 +86,6 @@ const PageAccessoriesModal = (): JSX.Element => {
           return <PageAttachment />;
         },
         i18n: t('attachment_data'),
-        index: 1,
       },
       [PageAccessoriesModalContents.ShareLink]: {
         Icon: ShareLinkIcon,
@@ -95,7 +93,6 @@ const PageAccessoriesModal = (): JSX.Element => {
           return <ShareLink />;
         },
         i18n: t('share_links.share_link_management'),
-        index: 2,
         isLinkEnabled: () => !isGuestUser && !isSharedUser && !isLinkSharingDisabled,
       },
     };
@@ -133,7 +130,7 @@ const PageAccessoriesModal = (): JSX.Element => {
           activeTab={activeTab}
           navTabMapping={navTabMapping}
           breakpointToHideInactiveTabsDown="md"
-          onNavSelected={(v) => {
+          onNavSelected={(v: PageAccessoriesModalContents) => {
             setActiveTab(v);
           }}
           hideBorderBottom

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -36,12 +36,10 @@ const navTabMapping = {
   comment_editor: {
     Icon: () => <i className="icon-settings" />,
     i18n: 'Write',
-    index: 0,
   },
   comment_preview: {
     Icon: () => <i className="icon-settings" />,
     i18n: 'Preview',
-    index: 1,
   },
 };
 

apps/app/src/components/TrashPageList.tsx

@@ -87,7 +87,6 @@ export const TrashPageList = (): JSX.Element => {
         Icon: PageListIcon,
         Content: DescendantsPageListForTrash,
         i18n: t('page_list'),
-        index: 0,
       },
     };
   }, [t]);

apps/app/src/interfaces/ui.ts

@@ -11,10 +11,9 @@ export type SidebarContentsType = typeof SidebarContentsType[keyof typeof Sideba
 
 
 export type ICustomTabContent = {
-  Content: () => JSX.Element,
+  Content?: () => JSX.Element,
   i18n?: string,
   Icon?: () => JSX.Element,
-  index?: number,
   isLinkEnabled?: boolean | ((content: ICustomTabContent) => boolean),
 };
 

apps/app/src/pages/installer.page.tsx

@@ -46,13 +46,11 @@ const InstallerPage: NextPage<Props> = (props: Props) => {
         Icon: () => <i className="icon-fw icon-user"></i>,
         Content: InstallerForm,
         i18n: t('installer.tab'),
-        index: 0,
       },
       external_accounts: {
         Icon: () => <i className="icon-fw icon-share-alt"></i>,
         Content: DataTransferForm,
         i18n: tCommons('g2g_data_transfer.tab'),
-        index: 1,
       },
     };
   }, [t, tCommons]);

apps/app/src/server/service/page.ts

@@ -1468,6 +1468,9 @@ class PageService {
 
           throw err;
         }
+        finally {
+          this.pageEvent.emit('syncDescendantsUpdate', deletedPage, user);
+        }
       })();
     }
     else {

packages/remark-lsx/src/server/routes/lsx.ts

@@ -176,9 +176,10 @@ class Lsx {
 
 }
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
 export const routesFactory = (crowi): any => {
   const Page = crowi.model('Page');
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const actions: any = {};
 
   /**
@@ -194,9 +195,6 @@ export const routesFactory = (crowi): any => {
     const builder = new Page.PageQueryBuilder(baseQuery);
     builder.addConditionToListOnlyDescendants(pagePath);
 
-    builder
-      .addConditionToExcludeTrashed();
-
     return Page.addConditionToFilteringByViewerForList(builder, user);
   }
 

packages/remark-lsx/src/services/renderer/lsx.ts

@@ -18,7 +18,7 @@ type DirectiveAttributes = Record<string, string>
 
 export const remarkPlugin: Plugin = function() {
   return (tree) => {
-    visit(tree, (node, index) => {
+    visit(tree, (node) => {
       if (node.type === remarkGrowiDirectivePluginType.Text || node.type === remarkGrowiDirectivePluginType.Leaf) {
         if (typeof node.name !== 'string') {
           return;