feat: [CDE-528]: Get started screen changes (#3077)

* Get started screen changes

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

@@ -92,7 +92,6 @@ const GitspaceListing = () => {
   }
   const [pageConfig, setPageConfig] = useState(pageInit)
   const [filter, setFilter] = useState(filterInit)
-  const [hasFilter, setHasFilter] = useState(!!(pageBrowser.gitspace_states || pageBrowser.gitspace_owner))
 
   const sortInit: sortProps = { sort: (pageBrowser.sort as EnumGitspaceSort) ?? SortByType.LAST_USED, order: 'desc' }
   const [sortConfig, setSortConfig] = useState(sortInit)
@@ -108,10 +107,14 @@ const GitspaceListing = () => {
   function useParsePaginationInfo(responseData: Nullable<Response>) {
     const totalData = useMemo(() => parseInt(responseData?.headers?.get('x-total') || '0'), [responseData])
     const totalPages = useMemo(() => parseInt(responseData?.headers?.get('x-total-pages') || '0'), [responseData])
+    const gitspaceExists = useMemo(
+      () => !!parseInt(responseData?.headers?.get('x-total-no-filters') || '0'),
+      [responseData]
+    )
 
-    return { totalItems: totalData, totalPages }
+    return { totalItems: totalData, totalPages, gitspaceExists }
   }
-  const { totalItems, totalPages } = useParsePaginationInfo(response)
+  const { totalItems, totalPages, gitspaceExists } = useParsePaginationInfo(response)
 
   const handleFilterChange = (key: string, value: any) => {
     const payload: any = { ...filter }
@@ -122,9 +125,6 @@ const GitspaceListing = () => {
     } else if (Array.isArray(value)) {
       updateQueryParams({ [key]: value?.toString() })
     }
-    if (payload.gitspace_states?.length || payload.gitspace_owner) {
-      setHasFilter(true)
-    }
   }
 
   const handleSort = (key: string, value: string) => {
@@ -149,7 +149,7 @@ const GitspaceListing = () => {
 
   return (
     <>
-      {((data && data?.length !== 0) || hasFilter) && (
+      {((data && data?.length !== 0) || gitspaceExists) && (
         <>
           <Page.Header
             className={standalone ? '' : css.pageHeaderStyles}
@@ -228,9 +228,9 @@ const GitspaceListing = () => {
           )}
         </>
       )}
-      <Container className={data?.length === 0 && !hasFilter ? zeroDayCss.background : css.main}>
+      <Container className={data?.length === 0 && !gitspaceExists ? zeroDayCss.background : css.main}>
         <Layout.Vertical spacing={'large'}>
-          {data && data?.length === 0 && !hasFilter ? (
+          {data && data?.length === 0 && !gitspaceExists ? (
             <CDEHomePage />
           ) : (
             <Page.Body
@@ -248,18 +248,18 @@ const GitspaceListing = () => {
                 ) : null
               }
               noData={{
-                when: () => data?.length === 0 && !hasFilter,
+                when: () => data?.length === 0 && !gitspaceExists,
                 image: noSpace,
                 message: getString('cde.noGitspaces')
               }}>
-              {(data?.length || hasFilter) && (
+              {(data?.length || gitspaceExists) && (
                 <>
                   <Text className={css.totalItems}>
                     {getString('cde.total')}: {totalItems}
                   </Text>
                   <ListGitspaces
                     data={(data as Unknown) || []}
-                    hasFilter={hasFilter}
+                    hasFilter={gitspaceExists}
                     refreshList={refetch}
                     gotoPage={(pageNumber: number) => handlePagination('page', pageNumber + 1)}
                     onPageSizeChange={(newSize: number) => handlePagination('limit', newSize)}

web/src/images/graduation-hat.svg

@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.33301 6.66655V10.674C3.33301 10.9133 3.33301 11.0329 3.36944 11.1386C3.40167 11.232 3.45425 11.3171 3.5234 11.3877C3.60158 11.4675 3.70861 11.521 3.92265 11.628L7.52265 13.428C7.69755 13.5155 7.78501 13.5592 7.87674 13.5764C7.95799 13.5917 8.04136 13.5917 8.12261 13.5764C8.21434 13.5592 8.3018 13.5155 8.4767 13.428L12.0767 11.628C12.2907 11.521 12.3978 11.4675 12.476 11.3877C12.5451 11.3171 12.5977 11.232 12.6299 11.1386C12.6663 11.0329 12.6663 10.9133 12.6663 10.674V6.66655M1.33301 5.66655L7.76116 2.45247C7.84862 2.40874 7.89234 2.38688 7.93821 2.37827C7.97883 2.37065 8.02052 2.37065 8.06114 2.37827C8.10701 2.38688 8.15073 2.40874 8.23819 2.45247L14.6663 5.66655L8.23819 8.88062C8.15073 8.92435 8.10701 8.94621 8.06114 8.95482C8.02052 8.96244 7.97883 8.96244 7.93821 8.95482C7.89234 8.94621 7.84862 8.92435 7.76116 8.88062L1.33301 5.66655Z" stroke="#0278D5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.333 6.667v4.007c0 .24 0 .359.036.465a.667.667 0 0 0 .154.249c.079.08.186.133.4.24l3.6 1.8c.175.087.262.131.354.148a.664.664 0 0 0 .246 0c.091-.017.179-.06.354-.148l3.6-1.8c.214-.107.32-.16.399-.24a.667.667 0 0 0 .154-.25c.036-.105.036-.225.036-.464V6.667m-11.333-1 6.428-3.215c.088-.043.131-.065.177-.074a.333.333 0 0 1 .123 0c.046.009.09.03.177.074l6.428 3.215L8.238 8.88c-.087.043-.131.065-.177.074a.333.333 0 0 1-.123 0c-.046-.009-.09-.03-.177-.074L1.333 5.667Z" stroke="#0278D5" stroke-linecap="round" stroke-linejoin="round"/></svg>