feat: refresh button

packages/dm-core/src/components/EntityView.tsx

@@ -1,16 +1,18 @@
-import React, { Suspense } from 'react'
+import React, { useState, Suspense } from 'react'
 
 import styled from 'styled-components'
 import { ErrorBoundary, ErrorGroup } from '../utils/ErrorBoundary'
 import { useRecipe } from '../hooks'
 import { IUIPlugin } from '../types'
 import { Loading } from './Loading'
 import { Typography } from '@equinor/eds-core-react'
+import RefreshButton from './RefreshButton'
 
 const Wrapper = styled.div`
   align-self: start;
   justify-content: space-evenly;
   width: 100%;
+  position: relative;
 `
 
 type IEntityView = IUIPlugin & {
@@ -28,13 +30,19 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
     dimensions
   )
 
+  // Refresh Button stuff
+  const [reloadCounter, setReloadCounter] = useState(0)
+  const [hoverOver, setHoverOver] = useState({
+    refreshButton: false,
+    component: false,
+  })
+
   if (isLoading)
     return (
       <div style={{ alignSelf: 'center', padding: '50px' }}>
         <Loading />
       </div>
     )
-
   if (error)
     return (
       <ErrorGroup>
@@ -44,7 +52,6 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
         <pre>{JSON.stringify(error, null, 2)}</pre>
       </ErrorGroup>
     )
-
   if (!recipe || !Object.keys(recipe).length)
     return <Wrapper>No compatible uiRecipes for entity</Wrapper>
 
@@ -53,15 +60,45 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
   return (
     <Wrapper>
       <Suspense fallback={<Loading />}>
-        {/*@ts-ignore*/}
         <ErrorBoundary message={`Plugin "${recipe.plugin}" crashed...`}>
-          <UiPlugin
-            idReference={idReference}
-            type={type}
-            onSubmit={onSubmit}
-            onOpen={onOpen}
-            config={recipe.config || {}}
-          />
+          <div
+            onMouseEnter={() => setHoverOver({ ...hoverOver, component: true })}
+            onMouseLeave={() =>
+              setHoverOver({ refreshButton: false, component: false })
+            }
+            style={
+              hoverOver.refreshButton
+                ? {
+                    outline: '1px solid rgba(220,220,220)',
+                    outlineOffset: '10px',
+                    borderRadius: '10px',
+                  }
+                : {}
+            }
+          >
+            {(recipe.showRefreshButton === undefined ||
+              recipe.showRefreshButton) && (
+              <RefreshButton
+                hidden={!hoverOver.component}
+                tooltip={recipe.plugin.split('/').at(-1)}
+                onMouseLeave={() =>
+                  setHoverOver({ ...hoverOver, refreshButton: false })
+                }
+                onMouseEnter={() =>
+                  setHoverOver({ ...hoverOver, refreshButton: true })
+                }
+                onClick={() => setReloadCounter(reloadCounter + 1)}
+              />
+            )}
+            <UiPlugin
+              idReference={idReference}
+              type={type}
+              onSubmit={onSubmit}
+              onOpen={onOpen}
+              config={recipe.config || {}}
+              key={reloadCounter}
+            />
+          </div>
         </ErrorBoundary>
       </Suspense>
     </Wrapper>

packages/dm-core/src/components/RefreshButton.tsx

@@ -0,0 +1,62 @@
+import { Icon, Tooltip } from '@equinor/eds-core-react'
+import React from 'react'
+import styled from 'styled-components'
+import { refresh } from '@equinor/eds-icons'
+
+const StyledRefreshButton = styled.button`
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  z-index: 1;
+  display: flex;
+  border: hidden;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+  border-radius: 100%;
+  height: 24px;
+  width: 24px;
+  overflow: scroll;
+  padding: 0;
+  color: rgba(0, 112, 121, 1); // eds green color
+  transition: opacity 0.2s;
+  background-size: 16px;
+  opacity: 0.3;
+
+  &:hover {
+    background: rgba(222, 237, 238, 1); // eds ghost-icon hover background color
+    opacity: 1;
+  }
+`
+
+interface Props {
+  onClick: () => void
+  onMouseEnter: () => void
+  onMouseLeave: () => void
+  hidden: boolean
+  tooltip: string | undefined
+}
+
+const RefreshButton = ({
+  onClick,
+  tooltip,
+  onMouseEnter,
+  onMouseLeave,
+  hidden,
+}: Props) => {
+  return (
+    <Tooltip title={`Refresh ${tooltip}`}>
+      <StyledRefreshButton
+        style={hidden ? { opacity: 0 } : {}}
+        onClick={() => onClick()}
+        onMouseLeave={() => onMouseLeave()}
+        onMouseEnter={() => onMouseEnter()}
+      >
+        <Icon data={refresh} size={16} title="refresh" />
+      </StyledRefreshButton>
+    </Tooltip>
+  )
+}
+
+export default RefreshButton

packages/dm-core/src/types.ts

@@ -141,6 +141,7 @@ export interface IUIPlugin {
   onSubmit?: (data: any) => void
   onOpen?: TOnOpen
   config?: any
+  refresh?: boolean
 }
 
 export type TOnOpen = (
@@ -156,6 +157,7 @@ export type TUiRecipe = {
   name: string
   plugin: string
   description?: string
+  showRefreshButton?: boolean
   category?: string
   config?: TGenericObject
   roles?: string[]