[8.4] [drift] Update Drift Storybook to apply context, fix bug (#139510)

x-pack/plugins/cloud/public/components/chat/chat.stories.tsx

@@ -13,14 +13,16 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
+
 import { forceReRender } from '@storybook/react';
 
 import { Chat } from './chat';
+import { ServicesProvider } from '../../services';
 
 export default {
   title: 'Chat Widget',
-  description: '',
-  parameters: {},
+  description:
+    'A Chat widget, enabled in Cloud, that allows a person to talk to Elastic about their deployment',
 };
 
 const Toaster = () => {
@@ -53,11 +55,28 @@ const Toaster = () => {
   );
 };
 
-export const Component = () => {
+interface Params {
+  id: string;
+  email: string;
+  chatURL: string;
+  jwt: string;
+}
+
+export const Component = ({ id, email, chatURL, jwt }: Params) => {
   const [isHidden, setIsHidden] = useState(false);
 
   return (
-    <>
+    <ServicesProvider
+      chat={{
+        enabled: true,
+        chatURL,
+        user: {
+          jwt,
+          id,
+          email,
+        },
+      }}
+    >
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem grow={false}>
           <Toaster />
@@ -74,7 +93,14 @@ export const Component = () => {
           </EuiButton>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <Chat onHide={() => setIsHidden(true)} />
-    </>
+      {isHidden ? null : <Chat onHide={() => setIsHidden(true)} />}
+    </ServicesProvider>
   );
 };
+
+Component.args = {
+  id: '1234567890',
+  email: '[email protected]',
+  chatURL: 'https://elasticcloud-production-chat-us-east-1.s3.amazonaws.com/drift-iframe.html',
+  jwt: 'abcdefghijklmnopqrstuvwxyz',
+};

x-pack/plugins/cloud/public/components/chat/chat.tsx

@@ -36,14 +36,14 @@ export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
     return null;
   }
 
-  const { isReady, style } = config;
+  const { isReady, isResized, style } = config;
   const { bottom, height, right } = style;
 
   const buttonCSS = css`
     bottom: calc(${bottom} + ${height});
     position: fixed;
     right: calc(${right} + ${euiThemeVars.euiSizeXS});
-    visibility: hidden;
+    visibility: ${isReady && isResized ? 'visible' : 'hidden'};
   `;
 
   const button = (
@@ -52,8 +52,8 @@ export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
       data-test-subj="cloud-chat-hide"
       name="cloudChatHide"
       onClick={() => {
-        setIsClosed(true);
         onHide();
+        setIsClosed(true);
       }}
       size="xs"
     >
@@ -67,7 +67,6 @@ export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
     bottom: ${euiThemeVars.euiSizeXL};
     position: fixed;
     right: ${euiThemeVars.euiSizeXL};
-    visibility: ${isReady ? 'visible' : 'hidden'};
     z-index: ${euiThemeVars.euiZMaskBelowHeader - 1};
 
     &:focus [name='cloudChatHide'],

x-pack/plugins/cloud/public/components/chat/use_chat_config.ts

@@ -18,6 +18,7 @@ type UseChatType =
       ref: React.MutableRefObject<HTMLIFrameElement | null>;
       style: CSSProperties;
       isReady: boolean;
+      isResized: boolean;
     };
 
 const MESSAGE_WIDGET_READY = 'driftWidgetReady';
@@ -36,8 +37,9 @@ export const useChatConfig = ({
 }: ChatConfigParams): UseChatType => {
   const ref = useRef<HTMLIFrameElement>(null);
   const chat = useChat();
-  const [style, setStyle] = useState<CSSProperties>({});
+  const [style, setStyle] = useState<CSSProperties>({ height: 0, width: 0 });
   const [isReady, setIsReady] = useState(false);
+  const [isResized, setIsResized] = useState(false);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent): void => {
@@ -84,12 +86,8 @@ export const useChatConfig = ({
           const styles = message.data.styles || ({} as CSSProperties);
           setStyle({ ...style, ...styles });
 
-          // While it might appear we should set this when we receive MESSAGE_WIDGET_READY,
-          // we need to wait for the iframe to be resized the first time before it's considered
-          // *visibly* ready.
-          if (!isReady) {
-            setIsReady(true);
-            onReady();
+          if (!isResized) {
+            setIsResized(true);
           }
 
           onResize();
@@ -98,6 +96,8 @@ export const useChatConfig = ({
 
         // The chat widget is ready.
         case MESSAGE_WIDGET_READY:
+          setIsReady(true);
+          onReady();
         default:
           break;
       }
@@ -106,10 +106,10 @@ export const useChatConfig = ({
     window.addEventListener('message', handleMessage);
 
     return () => window.removeEventListener('message', handleMessage);
-  }, [chat, style, onReady, onResize, isReady]);
+  }, [chat, style, onReady, onResize, isReady, isResized]);
 
   if (chat.enabled) {
-    return { enabled: true, src: chat.chatURL, ref, style, isReady };
+    return { enabled: true, src: chat.chatURL, ref, style, isReady, isResized };
   }
 
   return { enabled: false };