Add tooltip (#7365)

airbyte-webapp/src/components/Table/Table.tsx

@@ -30,8 +30,8 @@ type IThProps = {
 const TableView = styled(Card).attrs({ as: "table" })`
   border-spacing: 0;
   width: 100%;
-  overflow: hidden;
   max-width: 100%;
+  border-radius: 10px;
 `;
 
 const Tr = styled.tr<{
@@ -58,6 +58,14 @@ const Td = styled.td<{ collapse?: boolean; customWidth?: number }>`
 
   tr:last-child > & {
     border-bottom: none;
+
+    &:first-child {
+      border-radius: 0 0 0 10px;
+    }
+
+    &:last-child {
+      border-radius: 0 0 10px 0;
+    }
   }
 `;
 
@@ -77,6 +85,12 @@ const Th = styled.th<IThProps>`
 
   &:first-child {
     padding-left: 45px;
+    border-radius: 10px 0 0;
+  }
+
+  &:last-child {
+    padding-left: 45px;
+    border-radius: 0 10px 0 0;
   }
 `;
 

airbyte-webapp/src/components/ToolTip/ToolTip.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+type ToolTipProps = {
+  control: React.ReactNode;
+};
+
+const Control = styled.div`
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+`;
+
+const ToolTipView = styled.div`
+  display: none;
+  position: absolute;
+  padding: 9px 8px 8px;
+  box-shadow: 0 24px 38px rgba(53, 53, 66, 0.14),
+    0 9px 46px rgba(53, 53, 66, 0.12), 0 11px 15px rgba(53, 53, 66, 0.2);
+  border-radius: 4px;
+  background: rgba(26, 26, 33, 0.9);
+  top: calc(100% + 10px);
+  left: -50px;
+  min-width: 100px;
+
+  div:hover > & {
+    display: block;
+  }
+`;
+
+const ToolTip: React.FC<ToolTipProps> = ({ children, control }) => {
+  return (
+    <Control>
+      {control}
+      <ToolTipView>{children}</ToolTipView>
+    </Control>
+  );
+};
+
+export default ToolTip;

airbyte-webapp/src/components/ToolTip/index.tsx

@@ -0,0 +1,4 @@
+import ToolTip from "./ToolTip";
+
+export default ToolTip;
+export { ToolTip };

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -89,6 +89,9 @@
   "modals.addUser.button.cancel": "Cancel",
   "modals.addUser.button.submit": "Send invitation",
   "workspaces.viewAllWorkspaces": "View all workspaces",
+  "settings.accessManagement.roleViewers": "<b>Viewers</b> are in read-only and cannot edit or\u00a0add connections.",
+  "settings.accessManagement.roleEditors": "<b>Editors</b> can edit connections",
+  "settings.accessManagement.roleAdmin": "<b>Admin</b> can also manage users",
 
   "firebase.auth.success": "A new confirmation email has been sent to you",
   "firebase.auth.error.invalidPassword": "Incorrect password",

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx

@@ -14,6 +14,7 @@ import {
   useUserHook,
 } from "packages/cloud/services/users/UseUserHook";
 import { User } from "packages/cloud/lib/domain/users";
+import RoleToolTip from "./components/RoleToolTip";
 
 const Header = styled.div`
   display: flex;
@@ -62,7 +63,12 @@ export const UsersSettingsView: React.FC = () => {
         Cell: ({ cell }: CellProps<User>) => cell.value,
       },
       {
-        Header: <FormattedMessage id="userSettings.table.column.role" />,
+        Header: (
+          <>
+            <FormattedMessage id="userSettings.table.column.role" />
+            <RoleToolTip />
+          </>
+        ),
         headerHighlighted: true,
         accessor: "userId",
         Cell: (_: CellProps<User>) => "admin",

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/InfoIcon.tsx

@@ -0,0 +1,14 @@
+const InfoIcon = ({
+  color = "currentColor",
+}: {
+  color?: string;
+}): JSX.Element => (
+  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+    <path
+      d="M7.00016 13.6663C3.31816 13.6663 0.333496 10.6817 0.333496 6.99967C0.333496 3.31767 3.31816 0.333008 7.00016 0.333008C10.6822 0.333008 13.6668 3.31767 13.6668 6.99967C13.6668 10.6817 10.6822 13.6663 7.00016 13.6663ZM7.00016 12.333C8.41465 12.333 9.77121 11.7711 10.7714 10.7709C11.7716 9.77072 12.3335 8.41416 12.3335 6.99967C12.3335 5.58519 11.7716 4.22863 10.7714 3.22844C9.77121 2.22824 8.41465 1.66634 7.00016 1.66634C5.58567 1.66634 4.22912 2.22824 3.22893 3.22844C2.22873 4.22863 1.66683 5.58519 1.66683 6.99967C1.66683 8.41416 2.22873 9.77072 3.22893 10.7709C4.22912 11.7711 5.58567 12.333 7.00016 12.333ZM6.3335 3.66634H7.66683V4.99967H6.3335V3.66634ZM6.3335 6.33301H7.66683V10.333H6.3335V6.33301Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export default InfoIcon;

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/components/RoleToolTip.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+import { FormattedMessage } from "react-intl";
+
+import InfoIcon from "./InfoIcon";
+import ToolTip from "components/ToolTip";
+
+const Info = styled.div`
+  margin-left: 7px;
+  vertical-align: middle;
+  display: inline-block;
+`;
+
+const LineBlock = styled.div`
+  text-transform: none;
+  font-weight: 500;
+  font-size: 11px;
+  line-height: 13px;
+  letter-spacing: 0.3px;
+  min-width: 230px;
+  color: ${({ theme }) => theme.whiteColor};
+  margin-bottom: 5px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const RoleToolTip: React.FC = () => {
+  return (
+    <ToolTip
+      control={
+        <Info>
+          <InfoIcon />
+        </Info>
+      }
+    >
+      <>
+        <LineBlock>
+          <FormattedMessage
+            id="settings.accessManagement.roleViewers"
+            values={{
+              b: (...b: React.ReactNode[]) => <strong>{b}</strong>,
+            }}
+          />
+        </LineBlock>
+        <LineBlock>
+          <FormattedMessage
+            id="settings.accessManagement.roleEditors"
+            values={{
+              b: (...b: React.ReactNode[]) => <strong>{b}</strong>,
+            }}
+          />
+        </LineBlock>
+
+        <LineBlock>
+          <FormattedMessage
+            id="settings.accessManagement.roleAdmin"
+            values={{
+              b: (...b: React.ReactNode[]) => <strong>{b}</strong>,
+            }}
+          />
+        </LineBlock>
+      </>
+    </ToolTip>
+  );
+};
+
+export default RoleToolTip;