Merge pull request #8020 from weseek/support/128306-129265-bs-five-javascript

support: Bootstrap v5 braking changes JavaScript

apps/app/src/components/Admin/App/AwsSetting.tsx

@@ -32,7 +32,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
               className="btn btn-outline-secondary dropdown-toggle"
               type="button"
               id="ddS3ReferenceFileWithRelayMode"
-              data-toggle="dropdown"
+              data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="true"
             >

apps/app/src/components/Admin/App/GcsSetting.tsx

@@ -43,7 +43,7 @@ export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element
               className="btn btn-outline-secondary dropdown-toggle"
               type="button"
               id="ddGcsReferenceFileWithRelayMode"
-              data-toggle="dropdown"
+              data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="true"
             >

apps/app/src/components/Admin/AuditLog/SelectActionDropdown.tsx

@@ -77,7 +77,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
 
   return (
     <div className="btn-group me-2 admin-audit-log">
-      <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
+      <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
         <i className="fa fa-fw fa-bolt" />{t('admin:audit_log_management.action')}
       </button>
       <ul className="dropdown-menu select-action-dropdown" aria-labelledby="dropdownMenuButton">

apps/app/src/components/Admin/Common/AdminNavigation.tsx

@@ -131,7 +131,7 @@ export const AdminNavigation = (): JSX.Element => {
           type="button"
           id="dropdown-admin-navigation"
           data-display="static"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
         >

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -63,7 +63,7 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
 
           <a
             className="text-muted"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             href="#collapseExampleHtml"
             role="button"
             aria-expanded="false"

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -60,7 +60,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
 
           <a
             className="text-muted"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             href="#collapseExampleScript"
             role="button"
             aria-expanded="false"

apps/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -65,7 +65,7 @@ class StatusTable extends React.PureComponent {
       <div className="card">
         <div className="card-header">
 
-          <a role="button" className="text-nowrap me-2" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
+          <a role="button" className="text-nowrap me-2" data-bs-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
             <i className="fa fa-fw fa-database"></i> {indexName}
           </a>
           <span className="ms-md-3">{aliasLabels}</span>

apps/app/src/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.tsx

@@ -14,7 +14,7 @@ const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps):JSX.Element =>
 
   return (
     <div className="btn-group admin-user-menu dropdown">
-      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
+      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
         <i className="icon-settings"></i> <span className="caret"></span>
       </button>
       <ul className="dropdown-menu" role="menu">

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx

@@ -118,7 +118,7 @@ export default class ImportCollectionItem extends React.Component {
             type="button"
             id="ddmMode"
             disabled={isImporting}
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="true"
           >

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -45,7 +45,7 @@ class SlackConfiguration extends React.Component {
                 className="btn btn-secondary dropdown-toggle"
                 type="button"
                 id="dropdownMenuButton"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
@@ -109,7 +109,7 @@ class SlackConfiguration extends React.Component {
                 <br />
                 <a
                   href="#slack-incoming-webhooks"
-                  data-toggle="tab"
+                  data-bs-toggle="tab"
                   onClick={() => adminSlackIntegrationLegacyContainer.switchSlackOption('Incoming Webhooks')}
                 >
                   {t('notification_settings.use_instead')}
@@ -141,7 +141,7 @@ class SlackConfiguration extends React.Component {
 
         <h3>
           <i className="icon-question" aria-hidden="true"></i>{' '}
-          <a href="#collapseHelpForIwh" data-toggle="collapse">{t('notification_settings.how_to.header')}</a>
+          <a href="#collapseHelpForIwh" data-bs-toggle="collapse">{t('notification_settings.how_to.header')}</a>
         </h3>
 
         <ol id="collapseHelpForIwh" className="collapse">

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

@@ -139,7 +139,7 @@ class GlobalNotificationList extends React.Component {
                     className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="false"
                   >

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

@@ -173,7 +173,7 @@ class GitHubSecurityManagementContents extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForGitHubOauth" data-toggle="collapse"> {t('security_settings.OAuth.how_to.github')}</a>
+            <a href="#collapseHelpForGitHubOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.github')}</a>
           </h4>
           <ol id="collapseHelpForGitHubOauth" className="collapse">
             {/* eslint-disable-next-line max-len */}

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

@@ -176,7 +176,7 @@ class GoogleSecurityManagementContents extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForGoogleOauth" data-toggle="collapse"> {t('security_settings.OAuth.how_to.google')}</a>
+            <a href="#collapseHelpForGoogleOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.google')}</a>
           </h4>
           <ol id="collapseHelpForGoogleOauth" className="collapse">
             {/* eslint-disable-next-line max-len */}

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

@@ -116,7 +116,7 @@ class LdapSecuritySettingContents extends React.Component {
                     className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="true"
                   >

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

@@ -97,7 +97,7 @@ class LocalSecuritySettingContents extends React.Component {
                     className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="true"
                   >

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

@@ -450,7 +450,7 @@ class OidcSecurityManagementContents extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true" />
-            <a href="#collapseHelpForOidcOauth" data-toggle="collapse"> {t('security_settings.OAuth.how_to.oidc')}</a>
+            <a href="#collapseHelpForOidcOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.oidc')}</a>
           </h4>
           <ol id="collapseHelpForOidcOauth" className="collapse">
             <li>{t('security_settings.OAuth.OIDC.register_1')}</li>

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

@@ -192,7 +192,7 @@ class SecuritySetting extends React.Component {
           className="btn btn-outline-secondary dropdown-toggle text-end"
           type="button"
           id="dropdownMenuButton"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="true"
         >
@@ -403,7 +403,7 @@ class SecuritySetting extends React.Component {
                             col-md-auto ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
                 type="button"
                 id="dropdownMenuButton"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >

apps/app/src/components/Admin/SlackIntegration/ManageCommandsProcess.jsx

@@ -97,7 +97,7 @@ const PermissionSettingForEachPermissionTypeComponent = ({
             className="btn btn-outline-secondary dropdown-toggle text-end col-12 col-md-auto"
             type="button"
             id="dropdownMenuButton"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="true"
           >

apps/app/src/components/Admin/SlackIntegration/ManageCommandsProcessWithoutProxy.jsx

@@ -89,7 +89,7 @@ const SinglePermissionSettingComponent = ({
             className="btn btn-outline-secondary dropdown-toggle text-end col-12 col-md-auto"
             type="button"
             id="dropdownMenuButton"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="true"
           >

apps/app/src/components/Admin/UserGroup/UserGroupDropdown.tsx

@@ -29,7 +29,7 @@ export const UserGroupDropdown: FC<Props> = (props: Props) => {
   return (
     <>
       <div className="dropdown">
-        <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
+        <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
           {t('admin:user_group_management.add_child_group')}
         </button>
 

apps/app/src/components/Admin/UserGroup/UserGroupForm.tsx

@@ -104,7 +104,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
             <button
               type="button"
               id="dropdownMenuButton"
-              data-toggle="dropdown"
+              data-bs-toggle="dropdown"
               className={`
                 btn btn-outline-secondary dropdown-toggle mb-3 ${isSelectableParentUserGroups ? '' : 'disabled'}
               `}

apps/app/src/components/Admin/UserGroup/UserGroupTable.tsx

@@ -189,7 +189,7 @@ export const UserGroupTable: FC<Props> = (props: Props) => {
                           type="button"
                           id={`admin-group-menu-button-${group._id}`}
                           className="btn btn-outline-secondary btn-sm dropdown-toggle"
-                          data-toggle="dropdown"
+                          data-bs-toggle="dropdown"
                         >
                           <i className="icon-settings"></i>
                         </button>

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserTable.tsx

@@ -54,7 +54,7 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
                     type="button"
                     id={`admin-group-menu-button-${relatedUser._id}`}
                     className="btn btn-outline-secondary btn-sm dropdown-toggle"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                   >
                     <i className="icon-settings"></i>
                   </button>

apps/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -57,7 +57,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                 <span
                   role="button"
                   className="text-muted mx-2"
-                  data-toggle="popper"
+                  data-bs-toggle="popper"
                   data-placement="top"
                   data-trigger="hover"
                   data-html="true"
@@ -91,7 +91,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                 <td>{dateFnsFormat(new Date(ea.createdAt), 'yyyy-MM-dd')}</td>
                 <td>
                   <div className="btn-group admin-user-menu">
-                    <button type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+                    <button type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                       <i className="icon-settings"></i> <span className="caret"></span>
                     </button>
                     <ul className="dropdown-menu" role="menu">

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

@@ -53,7 +53,7 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
       <button
         className="btn btn-outline-primary btn-lg dropdown-toggle text-end"
         type="button"
-        data-toggle="dropdown"
+        data-bs-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
       >

apps/app/src/components/InstallerForm.tsx

@@ -108,7 +108,7 @@ const InstallerForm = memo((): JSX.Element => {
                 className="btn btn-secondary dropdown-toggle form-control text-end rounded-end"
                 id="dropdownLanguage"
                 data-testid="dropdownLanguage"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >

apps/app/src/components/LoginForm.tsx

@@ -310,7 +310,7 @@ export const LoginForm = (props: LoginFormProps): JSX.Element => {
           <button
             type="button"
             className="btn btn-secondary btn-external-auth-tab btn-sm rounded-0 mb-3"
-            data-toggle={isExternalAuthCollapsible ? 'collapse' : ''}
+            data-bs-toggle={isExternalAuthCollapsible ? 'collapse' : ''}
             data-target="#external-auth"
             aria-expanded="false"
             aria-controls="external-auth"

apps/app/src/components/Navbar/GlobalSearch.tsx

@@ -94,7 +94,7 @@ export const GlobalSearch = (props: GlobalSearchProps): JSX.Element => {
           <button
             className="btn btn-secondary dropdown-toggle py-0"
             type="button"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             data-testid="select-search-scope"
           >

apps/app/src/components/Navbar/GrowiNavbarBottom.tsx

@@ -53,7 +53,7 @@ export const GrowiNavbarBottom = (): JSX.Element => {
                   role="button"
                   className="nav-link btn-lg"
                   data-target="#grw-global-search-collapse"
-                  data-toggle="collapse"
+                  data-bs-toggle="collapse"
                 >
                   <i className="icon-magnifier"></i>
                 </a>

apps/app/src/components/PageAlert/FixPageGrantAlert.tsx

@@ -178,7 +178,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                   <button
                     type="button"
                     className="btn btn-secondary dropdown-toggle text-end w-100 border-0 shadow-none"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     disabled={selectedGrant !== PageGrant.GRANT_USER_GROUP} // disable when its radio input is not selected
                   >
                     <span className="float-start ms-2">

apps/app/src/components/PageAlert/TrashPageAlert.tsx

@@ -88,7 +88,7 @@ export const TrashPageAlert = (): JSX.Element => {
           type="button"
           className="btn btn-info rounded-pill btn-sm ms-auto me-2"
           onClick={openPutbackPageModalHandler}
-          data-toggle="modal"
+          data-bs-toggle="modal"
           data-testid="put-back-button"
         >
           <i className="icon-action-undo" aria-hidden="true"></i> {t('Put Back')}

apps/app/src/components/PageEditor/GridEditModal.jsx

@@ -208,7 +208,7 @@ class GridEditModal extends React.Component {
                       className="btn btn-outline-secondary dropdown-toggle"
                       type="button"
                       id="dropdownMenuButton"
-                      data-toggle="dropdown"
+                      data-bs-toggle="dropdown"
                       aria-haspopup="true"
                       aria-expanded="false"
                     >

apps/app/src/components/PageEditor/HandsontableModal.tsx

@@ -458,7 +458,7 @@ export const HandsontableModal = (): JSX.Element => {
           <button
             type="button"
             className="me-4 data-import-button btn btn-secondary"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             data-target="#collapseDataImport"
             aria-expanded={isDataImportAreaExpanded}
             onClick={toggleDataImportArea}

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -43,7 +43,7 @@ const ThemeSelector = (): JSX.Element => {
         <button
           type="button"
           className="btn btn-outline-secondary dropdown-toggle"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
           aria-describedby="igt-theme"
@@ -98,7 +98,7 @@ const KeymapSelector = memo((): JSX.Element => {
         <button
           type="button"
           className="btn btn-outline-secondary dropdown-toggle"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
           aria-describedby="igt-keymap"
@@ -140,7 +140,7 @@ const IndentSizeSelector = memo(({ isIndentSizeForced, selectedIndentSize, onCha
         <button
           type="button"
           className="btn btn-outline-secondary dropdown-toggle"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
           aria-describedby="igt-indent"

apps/app/src/components/SearchPage/SortControl.tsx

@@ -39,7 +39,7 @@ const SortControl: FC <Props> = (props: Props) => {
           <button
             type="button"
             className="btn dropdown-toggle py-1"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
           >
             <span className="me-2 text-secondary">{t(`search_result.sort_axis.${sort}`)}</span>
           </button>