diff --git a/packages/dm-core/src/components/EntityView.tsx b/packages/dm-core/src/components/EntityView.tsx index 666a1304e..e9b3d7438 100644 --- a/packages/dm-core/src/components/EntityView.tsx +++ b/packages/dm-core/src/components/EntityView.tsx @@ -1,4 +1,4 @@ -import React, { Suspense } from 'react' +import React, { useState, Suspense } from 'react' import styled from 'styled-components' import { ErrorBoundary, ErrorGroup } from '../utils/ErrorBoundary' @@ -6,11 +6,13 @@ 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 (
) - if (error) return ( @@ -44,7 +52,6 @@ export const EntityView = (props: IEntityView): React.ReactElement => {
{JSON.stringify(error, null, 2)}
) - if (!recipe || !Object.keys(recipe).length) return No compatible uiRecipes for entity @@ -53,15 +60,45 @@ export const EntityView = (props: IEntityView): React.ReactElement => { return ( }> - {/*@ts-ignore*/} - +
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) && ( +
diff --git a/packages/dm-core/src/components/RefreshButton.tsx b/packages/dm-core/src/components/RefreshButton.tsx new file mode 100644 index 000000000..a05449448 --- /dev/null +++ b/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 ( + + onClick()} + onMouseLeave={() => onMouseLeave()} + onMouseEnter={() => onMouseEnter()} + > + + + + ) +} + +export default RefreshButton diff --git a/packages/dm-core/src/types.ts b/packages/dm-core/src/types.ts index ad38816c6..1d133cdb3 100644 --- a/packages/dm-core/src/types.ts +++ b/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[]