kf-portal-ui#821 Remove 2nd tooltip (icon-controlled-access) from pop…

src/components/FileRepo/customTableColumns.js

@@ -65,15 +65,20 @@ const DownloadColumnCellContent = compose(withApi, withTheme)(
                     <Tooltip
                       position="bottom"
                       interactive
-                      html={<Row p={'10px'}>You do not have access to this file.</Row>}
+                      hideTitle
+                      html={<Row p={'10px'}>File is locked. Click the lock to apply for access.</Row>}
                     >
-                      <ControlledIcon fill={theme.primary} />
+                      <ControlledIcon
+                        hideTitle
+                        link="https://kidsfirstdrc.org/support/studies-and-access/#applying-for-data-access"
+                        target="applying-for-data-access"
+                      />
                     </Tooltip>
                   )
                 ) : loadingQuery || loadingGen3User ? (
                   <TableSpinner style={{ width: 15, height: 15 }} />
                 ) : (
-                  <ControlledIcon fill={theme.primary} />
+                  <ControlledIcon hideTitle />
                 )}
               </Row>
             );

src/components/FileRepo/ui.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Component from 'react-component-component';
 import styled from 'react-emotion';
 import Spinner from 'react-spinkit';
 
@@ -10,6 +11,7 @@ import Column from 'uikit/Column';
 import Row from 'uikit/Row';
 import ControlledAccessIcon from 'icons/ControlledAccessIcon';
 import { css } from 'emotion';
+import { withTheme } from 'emotion-theming';
 
 const montserrat = css`
   font-family: 'Montserrat', sans-serif;
@@ -114,7 +116,42 @@ export const QuerySharingContainer = styled(Row)`
   background: ${({ theme }) => theme.backgroundGrey};
 `;
 
-export const ControlledIcon = props => <ControlledAccessIcon width={12} height={12} {...props} />;
+export const ControlledIcon = withTheme(props => {
+  const initialState = {
+    mouseIsOver: false,
+  };
+
+  const mouseEnterEvent = ({ setState }) => () => {
+    setState({ mouseIsOver: true });
+  };
+
+  const mouseLeaveEvent = ({ setState }) => () => {
+    setState({ mouseIsOver: false });
+  };
+
+  const getFillColor = ({ state }) => {
+    return !state.mouseIsOver ? props.fill || props.theme.primary : props.theme.hover;
+  };
+
+  return (
+    <Component initialState={initialState}>
+      {s => (
+        <a href={props.link} target={props.target}>
+          <ControlledAccessIcon
+            width={12}
+            height={12}
+            fill={getFillColor(s)}
+            onMouseEnter={mouseEnterEvent(s)}
+            onMouseLeave={mouseLeaveEvent(s)}
+            {...props}
+          >
+            {props.children}
+          </ControlledAccessIcon>
+        </a>
+      )}
+    </Component>
+  );
+});
 
 export const OpenIcon = () => (
   <img

src/icons/ControlledAccessIcon.js

@@ -8,12 +8,13 @@ export default ({ width = 15, height = 15, fill = '#a9adc0', className = '', ...
     viewBox="0 0 56 64.01"
     width={width}
     height={height}
+    {...props}
   >
     <defs />
-    <title>icon-controlled-access</title>
+    {props.hideTitle ? null : <title>icon-controlled-access</title>}
     <path
       fill={fill}
-      class="cls-1"
+      className="cls-1"
       d="M48,28a8,8,0,0,1,8,8V56a8,8,0,0,1-8,8H8a8,8,0,0,1-8-8V36a8,8,0,0,1,8-8h2V18.44A18.3,18.3,0,0,1,27.34,0H28A18,18,0,0,1,46,18V30c0,1.1-.9,3-2,3H38c-1.1,0-2-1.9-2-3V18.29a8.19,8.19,0,0,0-6.82-8.19A8,8,0,0,0,20,18V28Z"
     />
   </svg>

src/icons/FileIcon.js

@@ -8,7 +8,7 @@ export default ({ width = 94, height = 94, fill = '#a9adc0', ...props }) => {
       </defs>
       <title>icon-files</title>
       <path
-        class="cls-1"
+        className="cls-1"
         d="M44.8,12H34V1.2ZM32,16a2,2,0,0,1-2-2V0H2A2,2,0,0,0,0,2V54a2,2,0,0,0,2,2H44a2,2,0,0,0,2-2V16Z"
       />
     </svg>

src/icons/ParticipantIcon.js

@@ -15,11 +15,11 @@ export default ({ width = 94, height = 94, fill = '#a9adc0', ...props }) => {
       </defs>
       <title>icon-participants</title>
       <path
-        class="cls-1"
+        className="cls-1"
         d="M30.84,86.47c-.1,13.08-7.64,30.33.62,37.2,6.36,5.29,12.7-9.54,19-20.42,7.23-12.44,10.93-9.79,26.05-11.17,35.11-3.21,27.9-12.65,10.36-15.58C80.36,75.4,70.79,74,66.37,64.36c-4.2-9.13.28-17.75,7.28-27.68,9.49-13.46,12.2-21.18-8.57-9.37-21.39,12.16-22.55,15.29-45,3.52-30.15-15.8-21,.27-7.23,13.78C23.81,55.37,31,70.83,30.84,86.47Z"
       />
       <path
-        class="cls-1"
+        className="cls-1"
         d="M31.62,28.58c-5.23-5.75-4.3-18.2,1.55-23.53,7.45-6.78,14-6,18.13-1.92C65.51,17.39,43.07,41.16,31.62,28.58Z"
       />
     </svg>

src/icons/StackIcon.js

@@ -11,19 +11,19 @@ export default ({ fill = '#a9adc0', ...props }) => (
     <defs />
     <title>icon-studies-grey</title>
     <path
-      class="cls-1"
+      className="cls-1"
       d="M7.83.59l-7,3.64A.44.44,0,0,0,.85,5l7,3.64a.72.72,0,0,0,.61,0l7-3.64a.44.44,0,0,0,0-.76L8.41.59A.66.66,0,0,0,7.83.59Z"
       transform="translate(-0.64 -0.52)"
       fill={fill}
     />
     <path
-      class="cls-1"
+      className="cls-1"
       d="M15.39,7.61l-1.31-.67a.36.36,0,0,0-.25,0l-5,2.61a1.38,1.38,0,0,1-.7.16,1.67,1.67,0,0,1-.7-.16l-5-2.61a.36.36,0,0,0-.25,0L.85,7.61a.44.44,0,0,0,0,.76l7,3.64a.72.72,0,0,0,.61,0l7-3.64A.45.45,0,0,0,15.39,7.61Z"
       transform="translate(-0.64 -0.52)"
       fill={fill}
     />
     <path
-      class="cls-1"
+      className="cls-1"
       d="M15.39,11.05l-1.31-.67a.36.36,0,0,0-.25,0L8.82,13a1.48,1.48,0,0,1-.7.15,1.83,1.83,0,0,1-.7-.15l-5-2.62a.36.36,0,0,0-.25,0l-1.31.67a.45.45,0,0,0,0,.77l7,3.63a.66.66,0,0,0,.61,0l7-3.63A.46.46,0,0,0,15.39,11.05Z"
       transform="translate(-0.64 -0.52)"
       fill={fill}

src/icons/WarningIcon.js

@@ -15,12 +15,12 @@ export default ({ width = 94, height = 94, fill = '#ff9427', bg = '#fff', ...pro
       <circle fill={bg} className="cls-1" cx="47" cy="47" r="43" />
       <path
         fill={fill}
-        class="cls-2"
+        className="cls-2"
         d="M47,94A47,47,0,1,1,94,47,47,47,0,0,1,47,94ZM47,8A39,39,0,1,0,86,47,39.05,39.05,0,0,0,47,8Z"
       />
       <path
         fill={fill}
-        class="cls-2"
+        className="cls-2"
         d="M54.62,65.27A7.62,7.62,0,1,1,47,57.65,7.63,7.63,0,0,1,54.62,65.27ZM40.26,23.5l1.29,25.93a2.29,2.29,0,0,0,2.29,2.17h6.32a2.29,2.29,0,0,0,2.29-2.17L53.74,23.5a2.28,2.28,0,0,0-2.28-2.4H42.54A2.28,2.28,0,0,0,40.26,23.5Z"
       />
     </g>

src/icons/WebsiteIcon.js

@@ -7,4 +7,3 @@ export default ({ fill = '#009bb8', width = 13, height, ...props }) =>
     height: `${height}px`,
     ...props,
   });
-