refactor(console): extract toggle tip logic into a ToggleTipButton component (#2588)

packages/console/src/components/ToggleTipButton/index.module.scss

@@ -0,0 +1,19 @@
+@use '@/scss/underscore' as _;
+
+.toggleTipButton {
+  border-radius: 4px;
+  padding: _.unit(1);
+
+  .icon {
+    > svg {
+      display: block;
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &:hover {
+    background: var(--color-hover);
+  }
+}

packages/console/src/components/ToggleTipButton/index.tsx

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+import { useRef, useState } from 'react';
+
+import Tip from '@/assets/images/tip.svg';
+import type { HorizontalAlignment } from '@/hooks/use-position';
+import { onKeyDownHandler } from '@/utilities/a11y';
+
+import type { TipBubblePosition } from '../TipBubble';
+import ToggleTip from '../ToggleTip';
+import * as styles from './index.module.scss';
+
+type Props = {
+  render: (closeTipHandler: () => void) => ReactElement;
+  className?: string;
+  tipPosition?: TipBubblePosition;
+  tipHorizontalAlignment?: HorizontalAlignment;
+};
+
+const ToggleTipButton = ({ render, className, tipPosition, tipHorizontalAlignment }: Props) => {
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [isTipOpen, setIsTipOpen] = useState(false);
+
+  const closeTipHandler = () => {
+    setIsTipOpen(false);
+  };
+
+  return (
+    <div className={classNames(styles.toggleTipButton, className)}>
+      <div
+        ref={anchorRef}
+        role="tab"
+        tabIndex={0}
+        className={styles.icon}
+        onClick={() => {
+          setIsTipOpen(true);
+        }}
+        onKeyDown={onKeyDownHandler(() => {
+          setIsTipOpen(true);
+        })}
+      >
+        <Tip />
+      </div>
+      <ToggleTip
+        isOpen={isTipOpen}
+        anchorRef={anchorRef}
+        position={tipPosition}
+        horizontalAlign={tipHorizontalAlignment}
+        onClose={() => {
+          setIsTipOpen(false);
+        }}
+      >
+        {render(closeTipHandler)}
+      </ToggleTip>
+    </div>
+  );
+};
+
+export default ToggleTipButton;

packages/console/src/pages/Connectors/components/ConnectorStatusField/index.module.scss

@@ -3,14 +3,9 @@
 .field {
   display: flex;
   align-items: center;
-}
 
-.tipIcon {
+  .tipButton {
-  margin-left: _.unit(1);
+    margin-left: _.unit(1);
-
-  > svg {
-    display: block;
-    cursor: pointer;
   }
 }
 

packages/console/src/pages/Connectors/components/ConnectorStatusField/index.tsx

@@ -1,62 +1,42 @@
-import { useRef, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import Tip from '@/assets/images/tip.svg';
+import ToggleTipButton from '@/components/ToggleTipButton';
-import ToggleTip from '@/components/ToggleTip';
-import { onKeyDownHandler } from '@/utilities/a11y';
 
 import * as styles from './index.module.scss';
 
 const ConnectorStatusField = () => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const [isTipOpen, setIsTipOpen] = useState(false);
-  const anchorRef = useRef<HTMLDivElement>(null);
 
   return (
     <div className={styles.field}>
       {t('connectors.connector_status')}
-      <div ref={anchorRef} className={styles.tipIcon}>
+      <ToggleTipButton
-        <Tip
+        tipHorizontalAlignment="center"
-          tabIndex={0}
+        className={styles.tipButton}
-          onClick={() => {
+        render={(closeTipHandler) => (
-            setIsTipOpen(true);
+          <>
-          }}
+            <div className={styles.title}>{t('connectors.connector_status')}</div>
-          onKeyDown={onKeyDownHandler(() => {
+            <div className={styles.content}>
-            setIsTipOpen(true);
+              <Trans
-          })}
+                components={{
-        />
+                  a: (
-      </div>
+                    <Link
-      <ToggleTip
+                      to="/sign-in-experience/sign-up-and-sign-in"
-        isOpen={isTipOpen}
+                      target="_blank"
-        anchorRef={anchorRef}
+                      onClick={closeTipHandler}
-        position="top"
+                    />
-        horizontalAlign="center"
+                  ),
-        onClose={() => {
+                }}
-          setIsTipOpen(false);
+              >
-        }}
+                {t('connectors.not_in_use_tip.content', {
-      >
+                  link: t('connectors.not_in_use_tip.go_to_sie'),
-        <div className={styles.title}>{t('connectors.connector_status')}</div>
+                })}
-        <div className={styles.content}>
+              </Trans>
-          <Trans
+            </div>
-            components={{
+          </>
-              a: (
+        )}
-                <Link
+      />
-                  to="/sign-in-experience/sign-up-and-sign-in"
-                  target="_blank"
-                  onClick={() => {
-                    setIsTipOpen(false);
-                  }}
-                />
-              ),
-            }}
-          >
-            {t('connectors.not_in_use_tip.content', {
-              link: t('connectors.not_in_use_tip.go_to_sie'),
-            })}
-          </Trans>
-        </div>
-      </ToggleTip>
     </div>
   );
 };