refactor: create TooltipButton

equinor · Sep 15, 2023 · 45a71d8 · 45a71d8
1 parent 80f4a3b
commit 45a71d8
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 68 deletions.
diff --git a/packages/dm-core-plugins/src/common/TooltipButton.tsx b/packages/dm-core-plugins/src/common/TooltipButton.tsx
@@ -0,0 +1,36 @@
+import { Button, Tooltip } from '@equinor/eds-core-react'
+import React from 'react'
+
+type Prefix<T, P extends string> = {
+  [K in keyof T as `${P}-${string & K}`]: T[K]
+}
+type PrefixedButton = Prefix<
+  Omit<React.ComponentProps<typeof Button>, 'aria-label' | 'children'>,
+  'button'
+>
+type PrefixedTooltip = Prefix<
+  Omit<React.ComponentProps<typeof Tooltip>, 'title' | 'children'>,
+  'tooltip'
+>
+type TProps = PrefixedButton &
+  PrefixedTooltip & { title: string; children: React.ReactElement }
+
+const getProps = (prefix: string, dict: { [k: string]: any }) => {
+  return Object.fromEntries(
+    Object.entries(dict)
+      .filter(([k]) => k.startsWith(prefix))
+      .map(([k, v]) => [k.slice(prefix.length), v])
+  )
+}
+
+const TooltipButton = (props: TProps) => {
+  return (
+    <Tooltip title={props.title} {...getProps('tooltip-', props)}>
+      <Button {...getProps('button-', props)} aria-label={props.title}>
+        {props.children}
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default TooltipButton
diff --git a/packages/dm-core-plugins/src/form/components/OpenObjectButton.tsx b/packages/dm-core-plugins/src/form/components/OpenObjectButton.tsx
@@ -3,9 +3,10 @@ import {
   TReferenceViewConfig,
   TViewConfig,
 } from '@development-framework/dm-core'
-import { Button, Icon, Tooltip } from '@equinor/eds-core-react'
+import { Icon } from '@equinor/eds-core-react'
 import { external_link } from '@equinor/eds-icons'
 import React from 'react'
+import TooltipButton from '../../common/TooltipButton'
 import { useRegistryContext } from '../context/RegistryContext'
 
 export const OpenObjectButton = ({
@@ -20,14 +21,12 @@ export const OpenObjectButton = ({
   const { onOpen } = useRegistryContext()
 
   return (
-    <Tooltip title="Open in tab">
-      <Button
-        variant="ghost_icon"
-        onClick={() => onOpen?.(viewId, view, idReference)}
-        aria-label="Open in tab"
-      >
-        <Icon data={external_link} />
-      </Button>
-    </Tooltip>
+    <TooltipButton
+      title="Open in tab"
+      button-variant="ghost_icon"
+      button-onClick={() => onOpen?.(viewId, view, idReference)}
+    >
+      <Icon data={external_link} />
+    </TooltipButton>
   )
 }
diff --git a/packages/dm-core-plugins/src/form/fields/ArrayField.tsx b/packages/dm-core-plugins/src/form/fields/ArrayField.tsx
@@ -6,12 +6,13 @@ import {
   getKey,
   useDMSS,
 } from '@development-framework/dm-core'
-import { Button, Icon, Tooltip, Typography } from '@equinor/eds-core-react'
+import { Icon, Typography } from '@equinor/eds-core-react'
 import { AxiosError } from 'axios'
 import React from 'react'
 import { useFieldArray, useFormContext } from 'react-hook-form'
 
 import { add, delete_forever } from '@equinor/eds-icons'
+import TooltipButton from '../../common/TooltipButton'
 import { OpenObjectButton } from '../components/OpenObjectButton'
 import { useRegistryContext } from '../context/RegistryContext'
 import { ButtonRow } from '../styles'
@@ -95,23 +96,20 @@ export default function ArrayField(props: TArrayFieldProps) {
       <ButtonRow>
         <Typography bold={true}>{displayLabel}</Typography>
         {!readOnly && (
-          <Tooltip title="Add">
-            <Button
-              variant="ghost_icon"
-              aria-label="Add"
-              data-testid={`add-${namePath}`}
-              onClick={() => {
-                if (isPrimitiveType(type)) {
-                  const defaultValue = isPrimitive(type) ? ' ' : {}
-                  append(defaultValue)
-                } else {
-                  handleAddObject()
-                }
-              }}
-            >
-              <Icon data={add} />
-            </Button>
-          </Tooltip>
+          <TooltipButton
+            title="Add"
+            button-variant="ghost_icon"
+            button-onClick={() => {
+              if (isPrimitiveType(type)) {
+                const defaultValue = isPrimitive(type) ? ' ' : {}
+                append(defaultValue)
+              } else {
+                handleAddObject()
+              }
+            }}
+          >
+            <Icon data={add} />
+          </TooltipButton>
         )}
       </ButtonRow>
       {fields.map((item: any, index: number) => {
@@ -136,16 +134,13 @@ export default function ArrayField(props: TArrayFieldProps) {
               />
             </Stack>
             {!readOnly && (
-              <Tooltip title="Remove">
-                <Button
-                  variant="ghost_icon"
-                  type="button"
-                  aria-label="Remove"
-                  onClick={() => remove(index)}
-                >
-                  <Icon data={delete_forever} />
-                </Button>
-              </Tooltip>
+              <TooltipButton
+                title="Remove"
+                button-variant="ghost_icon"
+                button-onClick={() => remove(index)}
+              >
+                <Icon data={delete_forever} />
+              </TooltipButton>
             )}
           </Stack>
         )

diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField.tsx
@@ -13,12 +13,13 @@ import {
   useBlueprint,
   useDMSS,
 } from '@development-framework/dm-core'
-import { Button, Icon, Tooltip, Typography } from '@equinor/eds-core-react'
+import { Icon, Typography } from '@equinor/eds-core-react'
 import { add, delete_forever, edit } from '@equinor/eds-icons'
 import { AxiosError, AxiosResponse } from 'axios'
 import React, { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import styled from 'styled-components'
+import TooltipButton from '../../common/TooltipButton'
 import { defaultConfig } from '../FormPlugin'
 import { AttributeList } from '../components/AttributeList'
 import { OpenObjectButton } from '../components/OpenObjectButton'
@@ -68,15 +69,13 @@ const SelectReference = (props: { type: string; namePath: string }) => {
 
   return (
     <>
-      <Tooltip title={`${value ? 'Edit' : 'Add'} and save`}>
-        <Button
-          variant="ghost_icon"
-          onClick={() => setShowModal(true)}
-          aria-label={`${value ? 'Edit' : 'Add'} and save`}
-        >
-          <Icon data={value ? edit : add} />
-        </Button>
-      </Tooltip>
+      <TooltipButton
+        title={`${value ? 'Edit' : 'Add'} and save`}
+        button-variant="ghost_icon"
+        button-onClick={() => setShowModal(true)}
+      >
+        <Icon data={value ? edit : add} />
+      </TooltipButton>
       <EntityPickerDialog
         data-testid={`select-${props.namePath}`}
         onChange={onChange}
@@ -128,16 +127,13 @@ const AddObject = (props: {
       })
   }
   return (
-    <Tooltip title="Add and save">
-      <Button
-        variant="ghost_icon"
-        data-testid={`add-${namePath}`}
-        onClick={handleAdd}
-        aria-label="Add and save"
-      >
-        <Icon data={add} />
-      </Button>
-    </Tooltip>
+    <TooltipButton
+      title="Add and save"
+      button-variant="ghost_icon"
+      button-onClick={handleAdd}
+    >
+      <Icon data={add} />
+    </TooltipButton>
   )
 }
 
@@ -164,16 +160,13 @@ const RemoveObject = (props: { namePath: string }) => {
       })
   }
   return (
-    <Tooltip title="Remove and save">
-      <Button
-        variant="ghost_icon"
-        data-testid={`remove-${namePath}`}
-        onClick={onClick}
-        aria-label="Remove and save"
-      >
-        <Icon data={delete_forever} />
-      </Button>
-    </Tooltip>
+    <TooltipButton
+      title="Remove and save"
+      button-variant="ghost_icon"
+      button-onClick={onClick}
+    >
+      <Icon data={delete_forever} />
+    </TooltipButton>
   )
 }