extract TipIcon and add one to Role column header

Author: david-crespo

app/pages/project/access/ProjectAccessPage.tsx

@@ -39,6 +39,7 @@ import { Button } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
+import { TipIcon } from '~/ui/lib/TipIcon'
 import { accessTypeLabel, getBadgeColor } from '~/util/access'
 import { groupBy, isTruthy, sortBy } from '~/util/array'
 
@@ -130,7 +131,15 @@ export function ProjectAccessPage() {
         cell: (props) => accessTypeLabel(props.getValue()),
       }),
       colHelper.accessor('roleBadges', {
-        header: 'Role',
+        header: () => (
+          <span className="inline-flex items-center">
+            Role
+            <TipIcon className="ml-2">
+              A user or group&apos;s effective role for this project is the strongest role
+              on either the silo or project.
+            </TipIcon>
+          </span>
+        ),
         cell: (props) => (
           <ListPlusCell tooltipTitle="Other roles">
             {props.getValue().map(({ roleName, roleSource }) => (

app/ui/lib/FieldLabel.tsx

@@ -8,9 +8,7 @@
 import cn from 'classnames'
 import type { ElementType, PropsWithChildren } from 'react'
 
-import { Question12Icon } from '@oxide/design-system/icons/react'
-
-import { Tooltip } from '~/ui/lib/Tooltip'
+import { TipIcon } from './TipIcon'
 
 interface FieldLabelProps {
   id: string
@@ -43,13 +41,7 @@ export const FieldLabel = ({
           </span>
         )}
       </Component>
-      {tip && (
-        <Tooltip content={tip} placement="top">
-          <button className="svg:pointer-events-none" type="button">
-            <Question12Icon className="text-quinary" />
-          </button>
-        </Tooltip>
-      )}
+      {tip && <TipIcon>{tip}</TipIcon>}
     </div>
   )
 }

app/ui/lib/TipIcon.tsx

@@ -0,0 +1,29 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import cn from 'classnames'
+
+import { Question12Icon } from '@oxide/design-system/icons/react'
+
+import { Tooltip } from './Tooltip'
+
+type TipIconProps = {
+  children: React.ReactNode
+  className?: string
+}
+export function TipIcon({ children, className }: TipIconProps) {
+  return (
+    <Tooltip content={children} placement="top">
+      <button
+        className={cn('inline-flex svg:pointer-events-none', className)}
+        type="button"
+      >
+        <Question12Icon className="text-quinary" />
+      </button>
+    </Tooltip>
+  )
+}