use reactstrap dropdown component

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

@@ -1,7 +1,9 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { Progress } from 'reactstrap';
+import {
+  Progress, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem,
+} from 'reactstrap';
 
 import { GrowiArchiveImportOption } from '~/models/admin/growi-archive-import-option';
 
@@ -49,6 +51,8 @@ export default class ImportCollectionItem extends React.Component {
     onOptionChange(collectionName, { mode });
   }
 
+  // No toggle state needed when using UncontrolledDropdown
+
   configButtonClickedHandler() {
     const { collectionName, onConfigButtonClicked } = this.props;
 
@@ -103,66 +107,28 @@ export default class ImportCollectionItem extends React.Component {
     const {
       collectionName, option, isImporting,
     } = this.props;
-
-    const attrMap = MODE_ATTR_MAP[option.mode];
+    const currentMode = option?.mode || 'insert';
+    const attrMap = MODE_ATTR_MAP[currentMode];
     const modes = MODE_RESTRICTED_COLLECTION[collectionName] || Object.keys(MODE_ATTR_MAP);
 
-    // btn-primaryを保持してBootstrapの動作を維持し、色はinline styleで変更
-    let backgroundColor = '#0d6efd'; // default primary
-    let borderColor = '#0d6efd';
-
-    if (attrMap.color === 'info') {
-      backgroundColor = '#0dcaf0';
-      borderColor = '#0dcaf0';
-    }
-    else if (attrMap.color === 'success') {
-      backgroundColor = '#198754';
-      borderColor = '#198754';
-    }
-    else if (attrMap.color === 'danger') {
-      backgroundColor = '#dc3545';
-      borderColor = '#dc3545';
-    }
-
-    const buttonStyle = {
-      backgroundColor,
-      borderColor,
-    };
-
     return (
       <span className="d-inline-flex align-items-center">
         Mode:&nbsp;
-        <div className="dropdown d-inline-block">
-          <button
-            className="btn btn-primary btn-sm dropdown-toggle"
-            style={buttonStyle}
-            type="button"
-            id="ddmMode"
-            disabled={isImporting}
-            data-bs-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-          >
-            {this.renderModeLabel(option.mode)}
-            <span className="caret ms-2"></span>
-          </button>
-          <ul className="dropdown-menu" aria-labelledby="ddmMode">
-            { modes.map((mode) => {
-              return (
-                <li key={`buttonMode_${mode}`}>
-                  <button
-                    type="button"
-                    className="dropdown-item"
-                    data-bs-dismiss="dropdown"
-                    onClick={() => this.modeSelectedHandler(mode)}
-                  >
-                    {this.renderModeLabel(mode, true)}
-                  </button>
-                </li>
-              );
-            }) }
-          </ul>
-        </div>
+        <UncontrolledDropdown size="sm" className="d-inline-block">
+          <DropdownToggle color={attrMap.color} caret disabled={isImporting} id={`ddmMode-${collectionName}`}>
+            {this.renderModeLabel(currentMode)}
+          </DropdownToggle>
+          <DropdownMenu>
+            {modes.map(mode => (
+              <DropdownItem
+                key={`buttonMode_${mode}`}
+                onClick={() => this.modeSelectedHandler(mode)}
+              >
+                {this.renderModeLabel(mode, true)}
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </UncontrolledDropdown>
       </span>
     );
   }