feat: [CDE-348]: updated logs container behaviour (#2739)

* feat: [CDE-348]: updated logs container behaviour

web/src/cde-gitness/components/ContainerLogs/ContainerLogs.module.scss

@@ -17,7 +17,7 @@
 @import 'src/utils/utils';
 
 .consoleContainer {
-  min-height: 500px !important;
+  min-height: 120px !important;
   max-height: 70vh !important;
   overflow: scroll;
   align-items: start !important;

web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.module.scss

@@ -84,3 +84,8 @@
     }
   }
 }
+
+.containerlogsTitle {
+  width: 130px;
+  justify-content: space-between !important;
+}

web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.module.scss.d.ts

@@ -18,6 +18,7 @@
 // This is an auto-generated file
 export declare const accordionnCustomSummary: string
 export declare const cardContainer: string
+export declare const containerlogsTitle: string
 export declare const customSubheader: string
 export declare const pageMain: string
 export declare const popover: string

web/src/cde-gitness/pages/GitspaceDetails/GitspaceDetails.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import {
   Breadcrumbs,
   Button,
@@ -25,7 +25,8 @@ import {
   Accordion,
   Page,
   Text,
-  useToaster
+  useToaster,
+  AccordionHandle
 } from '@harnessio/uicore'
 import { Play } from 'iconoir-react'
 import { useHistory, useParams } from 'react-router-dom'
@@ -82,12 +83,15 @@ const GitspaceDetails = () => {
     data: responseData,
     refetch: refetchLogsData,
     response,
-    error: streamLogsError
+    error: streamLogsError,
+    loading: logsLoading
   } = useGitspacesLogs({ gitspaceId })
 
-  if (streamLogsError) {
+  useEffect(() => {
+    if (streamLogsError?.message) {
       showError(streamLogsError.message)
     }
+  }, [streamLogsError?.message])
 
   const { mutate: actionMutate, loading: mutateLoading } = useGitspaceActions({ gitspaceId })
 
@@ -201,6 +205,16 @@ const GitspaceDetails = () => {
 
   const { refetchToken, setSelectedRowUrl } = useOpenVSCodeBrowserURL()
 
+  const accordionRef = useRef<AccordionHandle | null>(null)
+
+  useEffect(() => {
+    if (standalone ? formattedlogsdata.data : responseData) {
+      accordionRef.current?.open('logsCard')
+    } else {
+      accordionRef.current?.close('logsCard')
+    }
+  }, [standalone, responseData, formattedlogsdata.data])
+
   return (
     <>
       <Page.Header
@@ -402,13 +416,16 @@ const GitspaceDetails = () => {
           </Card>
 
           <Card className={css.cardContainer}>
-            <Accordion activeId="logsCard">
+            <Accordion activeId={''} ref={accordionRef}>
               <Accordion.Panel
-                shouldRender
                 className={css.accordionnCustomSummary}
                 summary={
                   <Layout.Vertical spacing="small">
-                    <Text font={{ variation: FontVariation.CARD_TITLE }} margin={{ left: 'large' }}>
+                    <Text
+                      rightIcon={isStreamingLogs || logsLoading ? 'steps-spinner' : undefined}
+                      className={css.containerlogsTitle}
+                      font={{ variation: FontVariation.CARD_TITLE }}
+                      margin={{ left: 'large' }}>
                       {getString('cde.details.containerLogs')}
                     </Text>
                     <Text margin={{ left: 'large' }}>{getString('cde.details.containerLogsSubText')} </Text>