Merge pull request #12925 from tvu20/CONSOLE-3687

CONSOLE-3687: Convert components in utils folder from class component…
openshift · Jul 19, 2023 · c1b38dc · c1b38dc
2 parents 2cd5a0a + 491da0d
commit c1b38dc
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 150 deletions.
diff --git a/...nd/packages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.tsx b/...nd/packages/operator-lifecycle-manager/src/components/modals/uninstall-operator-modal.tsx
@@ -643,7 +643,7 @@ export type UninstallOperatorModalProps = {
     resource: K8sResourceKind,
     data: { op: string; path: string; value: any }[],
   ) => Promise<any>;
-  subscription: SubscriptionKind;
+  subscription: SubscriptionKind | K8sResourceKind;
   csv?: ClusterServiceVersionKind;
   blocking?: boolean;
 };

diff --git a/frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx b/frontend/packages/operator-lifecycle-manager/src/components/subscription.tsx
@@ -18,6 +18,7 @@ import {
   RowFunctionArgs,
 } from '@console/internal/components/factory';
 import {
+  KebabAction,
   FieldLevelHelp,
   Kebab,
   LoadingInline,
@@ -190,7 +191,7 @@ export const SubscriptionStatus: React.FC<{ subscription: SubscriptionKind }> =
   }
 };
 
-const menuActions = [
+const menuActions: KebabAction[] = [
   Kebab.factory.Edit,
   (kind, obj) => ({
     // t('olm~Remove Subscription')

diff --git a/frontend/public/components/utils/dropdown.jsx b/frontend/public/components/utils/dropdown.jsx
@@ -642,49 +642,104 @@ Dropdown.propTypes = {
   dataTest: PropTypes.string,
 };
 
-class ActionsMenuDropdown_ extends DropdownMixin {
-  render() {
-    const { actions, title = undefined, t } = this.props;
-    const onClick = (event, option) => {
-      event.preventDefault();
+const ActionsMenuDropdown = (props) => {
+  const { t } = useTranslation();
+  const [active, setActive] = React.useState(!!props.active);
+
+  const dropdownElement = React.useRef();
+
+  const show = () => {
+    setActive(true);
+  };
+
+  const hide = (e) => {
+    e?.stopPropagation();
+    setActive(false);
+  };
+
+  const listener = React.useCallback(
+    (event) => {
+      if (!active) {
+        return;
+      }
 
-      if (option.callback) {
-        option.callback();
+      const { current } = dropdownElement;
+      if (!current) {
+        return;
       }
 
-      if (option.href) {
-        history.push(option.href);
+      if (event.target === current || current.contains(event.target)) {
+        return;
       }
 
-      this.hide();
+      hide(event);
+    },
+    [active, dropdownElement],
+  );
+
+  React.useEffect(() => {
+    if (active) {
+      window.addEventListener('click', listener);
+    } else {
+      window.removeEventListener('click', listener);
+    }
+    return () => {
+      window.removeEventListener('click', listener);
     };
-    return (
-      <div
-        ref={this.dropdownElement}
-        className={classNames({
-          'co-actions-menu pf-c-dropdown': true,
-          'pf-m-expanded': this.state.active,
-        })}
-      >
-        <button
-          type="button"
-          aria-haspopup="true"
-          aria-label={t('public~Actions')}
-          aria-expanded={this.state.active}
-          className="pf-c-dropdown__toggle"
-          onClick={this.toggle}
-          data-test-id="actions-menu-button"
-        >
-          <span className="pf-c-dropdown__toggle-text">{title || t('public~Actions')}</span>
-          <CaretDownIcon className="pf-c-dropdown__toggle-icon" />
-        </button>
-        {this.state.active && <KebabItems options={actions} onClick={onClick} />}
-      </div>
-    );
-  }
-}
+  }, [active, listener]);
+
+  const toggle = (e) => {
+    e.preventDefault();
+
+    if (props.disabled) {
+      return;
+    }
+
+    if (active) {
+      hide(e);
+    } else {
+      show(e);
+    }
+  };
 
-const ActionsMenuDropdown = withTranslation()(ActionsMenuDropdown_);
+  const onClick = (event, option) => {
+    event.preventDefault();
+
+    if (option.callback) {
+      option.callback();
+    }
+
+    if (option.href) {
+      history.push(option.href);
+    }
+
+    hide();
+  };
+
+  return (
+    <div
+      ref={dropdownElement}
+      className={classNames({
+        'co-actions-menu pf-c-dropdown': true,
+        'pf-m-expanded': active,
+      })}
+    >
+      <button
+        type="button"
+        aria-haspopup="true"
+        aria-label={t('public~Actions')}
+        aria-expanded={active}
+        className="pf-c-dropdown__toggle"
+        onClick={toggle}
+        data-test-id="actions-menu-button"
+      >
+        <span className="pf-c-dropdown__toggle-text">{props.title || t('public~Actions')}</span>
+        <CaretDownIcon className="pf-c-dropdown__toggle-icon" />
+      </button>
+      {active && <KebabItems options={props.actions} onClick={onClick} />}
+    </div>
+  );
+};
 
 const ActionsMenu_ = ({ actions, impersonate, title = undefined }) => {
   const [isVisible, setVisible] = useSafetyFirst(false);