wip

src/components/molecules/MarketPlace/MarketPlace.tsx

@@ -182,7 +182,7 @@ export const MarketPlace: FC = () => {
           type="error"
         />
       )}
-      <Flex gap={22}>
+      <Flex gap={22} wrap>
         {clusterName &&
           namespace &&
           filteredAndSortedData.map(

src/components/molecules/MarketPlace/molecules/MarketplaceCard/MarketplaceCard.tsx

@@ -2,10 +2,11 @@
 import React, { FC } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Typography, Flex, theme } from 'antd'
+import { useDirectUnknownResource } from '@prorobotech/openapi-k8s-toolkit'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store/store'
 import { TMarketPlacePanel } from 'localTypes/marketplace'
-import { getPathToNav } from './utils'
+import { getPathToNav, getListPath } from './utils'
 import { Styled } from './styled'
 
 type TMarketplaceCardProps = {
@@ -33,6 +34,7 @@ export const MarketplaceCard: FC<TMarketplaceCardProps> = ({
   isEditMode,
   onDeleteClick,
   onEditClick,
+  addedMode,
 }) => {
   const { useToken } = theme
   const { token } = useToken()
@@ -58,6 +60,29 @@ export const MarketplaceCard: FC<TMarketplaceCardProps> = ({
     baseprefix,
   })
 
+  const listUrl: string | undefined =
+    addedMode && type !== 'direct'
+      ? getListPath({
+          clusterName,
+          namespace,
+          type,
+          typeName,
+          apiGroup,
+          apiVersion,
+        })
+      : undefined
+
+  const { data: k8sList, error: k8sListError } = useDirectUnknownResource<{ items?: [] }>({
+    uri: listUrl || '',
+    queryKey: [listUrl || ''],
+    refetchInterval: false,
+    isEnabled: addedMode && listUrl !== undefined,
+  })
+
+  if (addedMode && (k8sListError || type === 'direct')) {
+    return null
+  }
+
   return (
     <Styled.CustomCard
       $isDisabled={disabled}
@@ -87,7 +112,9 @@ export const MarketplaceCard: FC<TMarketplaceCardProps> = ({
           )}
         </Flex>
         <Styled.OverflowContainer>
-          <Styled.TitleContainer>{name}</Styled.TitleContainer>
+          <Styled.TitleContainer>
+            {name} {addedMode && <span>x{k8sList?.items?.length}</span>}
+          </Styled.TitleContainer>
           <Styled.TagsContainer>
             {tags.map(tag => (
               <Styled.CustomTag key={tag}>{tag}</Styled.CustomTag>

src/components/molecules/MarketPlace/molecules/MarketplaceCard/styled.ts

@@ -49,6 +49,10 @@ const TitleContainer = styled(Typography.Text)`
   padding-right: 6px;
   font-size: 16px;
   line-height: 24px;
+
+  span {
+    font-weight: 700;
+  }
 `
 
 const TagsContainer = styled.div`

src/components/molecules/MarketPlace/molecules/MarketplaceCard/utils.ts

@@ -33,3 +33,33 @@ export const getPathToNav = ({
 
   return `${baseprefix}/${clusterName}/${namespace}/builtin-table/${typeName}`
 }
+
+export const getListPath = ({
+  clusterName,
+  namespace,
+  type,
+  typeName,
+  apiGroup,
+  apiVersion,
+}: {
+  clusterName: string
+  namespace: string
+  type: string
+  typeName?: string
+  apiGroup?: string
+  apiVersion?: string
+}): string | undefined => {
+  if (type === 'crd') {
+    return `/api/clusters/${clusterName}/k8s/apis/${apiGroup}/${apiVersion}${
+      namespace ? `/namespaces/${namespace}` : ''
+    }/${typeName}`
+  }
+
+  if (type === 'nonCrd') {
+    return `/api/clusters/${clusterName}/k8s/apis/${apiGroup}/${apiVersion}${
+      namespace ? `/namespaces/${namespace}` : ''
+    }/${typeName}`
+  }
+
+  return `/api/clusters/${clusterName}/k8s/api/v1${namespace ? `/namespaces/${namespace}` : ''}/${typeName}`
+}

src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/ProjectInfoCard.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import React, { FC, useCallback, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { Spacer, useDirectUnknownResource, DeleteModal, usePermissions } from '@prorobotech/openapi-k8s-toolkit'
@@ -97,8 +98,7 @@ export const ProjectInfoCard: FC = () => {
     return null
   }
 
-  // const readyCondition = project.status.conditions.find(({ type }) => type === 'Ready')
-  const readyCondition = project.status.conditions.find(({ type }) => type !== 'Ready')
+  const readyCondition = project.status.conditions.find(({ type }) => type === 'Ready')
 
   return (
     <>
@@ -196,7 +196,7 @@ export const ProjectInfoCard: FC = () => {
       <Spacer $space={24} $samespace />
       <Typography.Text type="secondary">Added Products</Typography.Text>
       <Spacer $space={12} $samespace />
-      <Flex gap={22}>
+      <Flex gap={22} wrap>
         {marketplaceIsLoading && <Spin />}
         {clusterName &&
           namespace &&