ui: (fix) Tooltip component styling and props

This fix is rework of previous changes related to PR:
#46557

Prior, to customize tooltip width for two particular cases,
changes were made in shared component and affected all tooltips
across project (tooltip width was set to 500px).

Instead of this, current changes keep component styles without
local changes and extend them with specific classes (via `overlayClassName`
prop). It allows to apply changes in specific places (Statements and Jobs
tables).

Next fix: the order of destructing props in `components/tooltip/tooltip.tsx`.
`{...props}` supplied as a last prop to `<AntTooltip />` component and it
overrides all previous props which have to be preserved. To fix this, ...props
was moved as first prop.

And last fix: Tooltips for Diagnostics Status Badge was set to be visible
always and with some random conditions tooltips appeared and were displayed
instantly. To fix this, `visible` prop was removed to trigger tooltip
visibility only on mouse hover.

And to position Diagnostics Status Badge tooltip more elegantly - it is
positioned to `bottomLeft` side, because this badge is displayed in the last
columns and there is not enough place on the right side for tooltip.

Release note (bug fix): Tooltips for statement diagnostics were shown always
instead of only on hover

Release justification: bug fixes and low-risk updates to new functionality

pkg/ui/src/components/tooltip/tooltip.styl

@@ -11,9 +11,7 @@
 @require '~src/components/core/index.styl'
 
 .tooltip-overlay
-  max-width max-content
   .ant-tooltip-content
-    width 500px
     .ant-tooltip-inner
       @extend $text--body
       line-height $line-height--small

pkg/ui/src/components/tooltip/tooltip.tsx

@@ -21,13 +21,13 @@ export interface TooltipProps {
 }
 
 export function Tooltip(props: TooltipProps & AntTooltipProps) {
-  const { children, theme } = props;
-  const classes = cn("tooltip-overlay", `crl-tooltip--theme-${theme}`);
+  const { children, theme, overlayClassName } = props;
+  const classes = cn("tooltip-overlay", `crl-tooltip--theme-${theme}`, overlayClassName);
   return (
     <AntTooltip
+      {...props}
       mouseEnterDelay={0.5}
       overlayClassName={classes}
-      {...props}
     >
       {children}
     </AntTooltip>

pkg/ui/src/views/jobs/jobDescriptionCell.tsx

@@ -25,9 +25,14 @@ export class JobDescriptionCell extends React.PureComponent<{ job: Job }> {
     return (
       <Link className={`${additionalStyle}`} to={`jobs/${String(job.id)}`}>
         <div className="cl-table-link__tooltip">
-          <Tooltip arrowPointAtCenter placement="bottom" title={
-            <pre style={{whiteSpace: "pre-wrap"}} className="cl-table-link__description">{description}</pre>
-          }>
+          <Tooltip
+            arrowPointAtCenter
+            placement="bottom"
+            title={
+              <pre style={{whiteSpace: "pre-wrap"}} className="cl-table-link__description">{description}</pre>
+            }
+            overlayClassName="cl-table-link__statement-tooltip--fixed-width"
+          >
             <div className="jobs-table__cell--description">{job.statement || job.description}</div>
           </Tooltip>
         </div>

pkg/ui/src/views/statements/diagnostics/diagnosticStatusBadge.tsx

@@ -99,10 +99,9 @@ export function DiagnosticStatusBadge(props: OwnProps) {
 
   return (
     <Tooltip
-      visible={enableTooltip}
       title={tooltipContent}
       theme="blue"
-      placement="bottom"
+      placement="bottomLeft"
     >
       <div
         className="diagnostic-status-badge__content"

pkg/ui/src/views/statements/statements.styl

@@ -415,3 +415,8 @@ $plan-node-attribute-key-color = #37a806                        // light green
     text-decoration underline
   ._text-bold
     font-family RobotoMono-Bold
+
+.cl-table-link__statement-tooltip--fixed-width
+  max-width max-content
+  .ant-tooltip-content
+    max-width 500px

pkg/ui/src/views/statements/statementsTable.tsx

@@ -44,9 +44,13 @@ function StatementLink(props: { statement: string, app: string, implicitTxn: boo
   return (
     <Link to={ `${base}/${encodeURIComponent(props.statement)}` }>
       <div className="cl-table-link__tooltip">
-        <Tooltip placement="bottom" title={
-          <pre className="cl-table-link__description">{ getHighlightedText(props.statement, props.search) }</pre>
-        }>
+        <Tooltip
+          placement="bottom"
+          title={<pre className="cl-table-link__description">
+            { getHighlightedText(props.statement, props.search) }
+          </pre>}
+          overlayClassName="cl-table-link__statement-tooltip--fixed-width"
+        >
           <div className="cl-table-link__tooltip-hover-area">
             { getHighlightedText(shortStatement(summary, props.statement), props.search, true) }
           </div>