From fb5509d82d543ec0b20d1bf0f3cb4c6f903c8a65 Mon Sep 17 00:00:00 2001 From: typescreep Date: Thu, 5 Jun 2025 22:36:31 +0300 Subject: [PATCH] wip --- .../molecules/MarketPlace/MarketPlace.tsx | 6 +- src/components/molecules/MarketPlace/index.ts | 1 + .../AddEditFormModal/AddEditFormModal.tsx | 2 +- .../molecules/CardInProject/index.ts | 1 - .../MarketplaceCard.tsx} | 19 +- .../molecules/MarketplaceCard/index.ts | 1 + .../styled.ts | 0 .../utils.ts | 0 .../molecules/MarketPlace/molecules/index.ts | 2 +- .../organisms/ProjectInfo/ProjectInfo.tsx | 216 ++-------------- .../ProjectInfoCard/ProjectInfoCard.tsx | 238 ++++++++++++++++++ .../organisms/ProjectInfoCard/index.ts | 1 + .../organisms/ProjectInfoCard/styled.ts | 27 ++ .../organisms/ProjectInfo/organisms/index.ts | 1 + .../types.ts => localTypes/marketplace.ts} | 0 15 files changed, 301 insertions(+), 214 deletions(-) delete mode 100644 src/components/molecules/MarketPlace/molecules/CardInProject/index.ts rename src/components/molecules/MarketPlace/molecules/{CardInProject/CardInProject.tsx => MarketplaceCard/MarketplaceCard.tsx} (90%) create mode 100644 src/components/molecules/MarketPlace/molecules/MarketplaceCard/index.ts rename src/components/molecules/MarketPlace/molecules/{CardInProject => MarketplaceCard}/styled.ts (100%) rename src/components/molecules/MarketPlace/molecules/{CardInProject => MarketplaceCard}/utils.ts (100%) create mode 100644 src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/ProjectInfoCard.tsx create mode 100644 src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/index.ts create mode 100644 src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/styled.ts create mode 100644 src/components/organisms/ProjectInfo/organisms/index.ts rename src/{components/molecules/MarketPlace/types.ts => localTypes/marketplace.ts} (100%) diff --git a/src/components/molecules/MarketPlace/MarketPlace.tsx b/src/components/molecules/MarketPlace/MarketPlace.tsx index cfc31a4..05c2149 100644 --- a/src/components/molecules/MarketPlace/MarketPlace.tsx +++ b/src/components/molecules/MarketPlace/MarketPlace.tsx @@ -5,9 +5,9 @@ import { AxiosError } from 'axios' import { usePermissions, useDirectUnknownResource, DeleteModal, Spacer } from '@prorobotech/openapi-k8s-toolkit' import { notification, Typography, Flex, Switch, Spin, Alert } from 'antd' import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion' +import { TMarketPlacePanelResponse, TMarketPlacePanelResource, TMarketPlacePanel } from 'localTypes/marketplace' import { AddCard } from './atoms' -import { AddEditFormModal, CardInProject, SearchTextInput } from './molecules' -import { TMarketPlacePanelResponse, TMarketPlacePanelResource, TMarketPlacePanel } from './types' +import { AddEditFormModal, MarketplaceCard, SearchTextInput } from './molecules' import { Styled } from './styled' export const MarketPlace: FC = () => { @@ -187,7 +187,7 @@ export const MarketPlace: FC = () => { namespace && filteredAndSortedData.map( ({ name, description, icon, type, pathToNav, typeName, apiGroup, apiVersion, tags, disabled }) => ( - void - onEditClick: () => void + onDeleteClick?: () => void + onEditClick?: () => void + addedMode?: boolean } & Omit -export const CardInProject: FC = ({ +export const MarketplaceCard: FC = ({ description, name, icon, @@ -71,7 +72,9 @@ export const CardInProject: FC = ({ onClick={e => { e.preventDefault() e.stopPropagation() - onDeleteClick() + if (onDeleteClick) { + onDeleteClick() + } }} > @@ -100,7 +103,9 @@ export const CardInProject: FC = ({ onClick={e => { e.preventDefault() e.stopPropagation() - onEditClick() + if (onEditClick) { + onEditClick() + } }} > diff --git a/src/components/molecules/MarketPlace/molecules/MarketplaceCard/index.ts b/src/components/molecules/MarketPlace/molecules/MarketplaceCard/index.ts new file mode 100644 index 0000000..3bc1789 --- /dev/null +++ b/src/components/molecules/MarketPlace/molecules/MarketplaceCard/index.ts @@ -0,0 +1 @@ +export * from './MarketplaceCard' diff --git a/src/components/molecules/MarketPlace/molecules/CardInProject/styled.ts b/src/components/molecules/MarketPlace/molecules/MarketplaceCard/styled.ts similarity index 100% rename from src/components/molecules/MarketPlace/molecules/CardInProject/styled.ts rename to src/components/molecules/MarketPlace/molecules/MarketplaceCard/styled.ts diff --git a/src/components/molecules/MarketPlace/molecules/CardInProject/utils.ts b/src/components/molecules/MarketPlace/molecules/MarketplaceCard/utils.ts similarity index 100% rename from src/components/molecules/MarketPlace/molecules/CardInProject/utils.ts rename to src/components/molecules/MarketPlace/molecules/MarketplaceCard/utils.ts diff --git a/src/components/molecules/MarketPlace/molecules/index.ts b/src/components/molecules/MarketPlace/molecules/index.ts index 725bb0c..49ce09c 100644 --- a/src/components/molecules/MarketPlace/molecules/index.ts +++ b/src/components/molecules/MarketPlace/molecules/index.ts @@ -1,3 +1,3 @@ export * from './AddEditFormModal' -export * from './CardInProject' +export * from './MarketplaceCard' export * from './SearchTextInput' diff --git a/src/components/organisms/ProjectInfo/ProjectInfo.tsx b/src/components/organisms/ProjectInfo/ProjectInfo.tsx index 44a9182..060c6e2 100644 --- a/src/components/organisms/ProjectInfo/ProjectInfo.tsx +++ b/src/components/organisms/ProjectInfo/ProjectInfo.tsx @@ -1,207 +1,21 @@ -import React, { FC, useCallback, useState } from 'react' -import { useNavigate, useParams } from 'react-router-dom' -import { Spacer, useDirectUnknownResource, DeleteModal, usePermissions } from '@prorobotech/openapi-k8s-toolkit' -import { Typography, Flex, Row, Col, Spin, Button } from 'antd' -import { useSelector } from 'react-redux' -import { RootState } from 'store/store' -import { BASE_API_GROUP, BASE_RPROJECTS_VERSION } from 'constants/customizationApiGroupAndVersion' +import React, { FC } from 'react' +import { Row, Col } from 'antd' import { ContentCard, MarketPlace } from 'components' -import { DropdownActions, DropdownAccessGroups } from './molecules' -import { Styled } from './styled' +import { ProjectInfoCard } from './organisms' export const ProjectInfo: FC = () => { - const navigate = useNavigate() - const { clusterName, namespace } = useParams() - const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) - - const { - data: project, - isLoading, - error, - } = useDirectUnknownResource<{ - apiVersion: string - kind: 'Project' - metadata: { - labels: { - paas: string - pj: string - } - name: string - resourceVersion: string - uid: string - } - spec: { - businessName?: string - description: string - prefix: string - } - status: { - conditions: { - lastTransitionTime: string - message: string - reason: string - status: string - type: string - }[] - } - }>({ - uri: `/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_RPROJECTS_VERSION}/projects/${namespace}`, - refetchInterval: 5000, - queryKey: ['projects', clusterName || 'no-cluster'], - isEnabled: clusterName !== undefined, - }) - - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) - - const updatePermission = usePermissions({ - apiGroup: BASE_API_GROUP, - typeName: 'projects', - namespace: '', - clusterName: clusterName || '', - verb: 'update', - refetchInterval: false, - }) - - const deletePermission = usePermissions({ - apiGroup: BASE_API_GROUP, - typeName: 'projects', - namespace: '', - clusterName: clusterName || '', - verb: 'delete', - refetchInterval: false, - }) - - const openUpdate = useCallback(() => { - navigate( - `${baseprefix}/${clusterName}/forms/apis/${BASE_API_GROUP}/${BASE_RPROJECTS_VERSION}/projects/${namespace}?backlink=${baseprefix}/clusters/${clusterName}`, - ) - }, [baseprefix, clusterName, namespace, navigate]) - - if (isLoading) { - return - } - - if (!project || error) { - return null - } - - // const readyCondition = project.status.conditions.find(({ type }) => type === 'Ready') - const readyCondition = project.status.conditions.find(({ type }) => type !== 'Ready') - return ( - <> - - - - -
- -
- Project Business Name -
-
- - {project.spec.businessName || '-'} - {readyCondition && ( - - - {readyCondition.reason} - - - )} - -
-
- {project.spec.description} -
- - - -
- Developer Instruments -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - - {readyCondition?.status === 'True' && - (updatePermission.data?.status.allowed || deletePermission.data?.status.allowed) ? ( - { - setIsDeleteModalOpen(true) - } - : undefined - } - onUpdate={updatePermission.data?.status.allowed ? openUpdate : undefined} - /> - ) : ( - - )} - - - -
- - - - - - - - - - {isDeleteModalOpen && ( - { - setIsDeleteModalOpen(false) - navigate(`${baseprefix}/clusters/${clusterName}`) - }} - endpoint={`/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_RPROJECTS_VERSION}/projects/${project.metadata.name}`} - /> - )} - + + + + + + + + + + + + ) } diff --git a/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/ProjectInfoCard.tsx b/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/ProjectInfoCard.tsx new file mode 100644 index 0000000..ba80bd2 --- /dev/null +++ b/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/ProjectInfoCard.tsx @@ -0,0 +1,238 @@ +import React, { FC, useCallback, useState } from 'react' +import { useNavigate, useParams } from 'react-router-dom' +import { Spacer, useDirectUnknownResource, DeleteModal, usePermissions } from '@prorobotech/openapi-k8s-toolkit' +import { Typography, Flex, Spin, Button } from 'antd' +import { useSelector } from 'react-redux' +import { RootState } from 'store/store' +import { BASE_API_GROUP, BASE_API_VERSION, BASE_RPROJECTS_VERSION } from 'constants/customizationApiGroupAndVersion' +import { TMarketPlacePanelResponse } from 'localTypes/marketplace' +import { MarketplaceCard } from 'components/molecules' +import { DropdownActions, DropdownAccessGroups } from '../../molecules' +import { Styled } from './styled' + +export const ProjectInfoCard: FC = () => { + const navigate = useNavigate() + const { clusterName, namespace } = useParams() + const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) + + const { + data: marketplacePanels, + isLoading: marketplaceIsLoading, + // error: marketplaceError, + } = useDirectUnknownResource({ + uri: `/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_API_VERSION}/marketplacepanels/`, + refetchInterval: 5000, + queryKey: ['marketplacePanels', clusterName || 'no-cluster'], + isEnabled: clusterName !== undefined, + }) + + const { + data: project, + isLoading, + error, + } = useDirectUnknownResource<{ + apiVersion: string + kind: 'Project' + metadata: { + labels: { + paas: string + pj: string + } + name: string + resourceVersion: string + uid: string + } + spec: { + businessName?: string + description: string + prefix: string + } + status: { + conditions: { + lastTransitionTime: string + message: string + reason: string + status: string + type: string + }[] + } + }>({ + uri: `/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_RPROJECTS_VERSION}/projects/${namespace}`, + refetchInterval: 5000, + queryKey: ['projects', clusterName || 'no-cluster'], + isEnabled: clusterName !== undefined, + }) + + const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false) + + const updatePermission = usePermissions({ + apiGroup: BASE_API_GROUP, + typeName: 'projects', + namespace: '', + clusterName: clusterName || '', + verb: 'update', + refetchInterval: false, + }) + + const deletePermission = usePermissions({ + apiGroup: BASE_API_GROUP, + typeName: 'projects', + namespace: '', + clusterName: clusterName || '', + verb: 'delete', + refetchInterval: false, + }) + + const openUpdate = useCallback(() => { + navigate( + `${baseprefix}/${clusterName}/forms/apis/${BASE_API_GROUP}/${BASE_RPROJECTS_VERSION}/projects/${namespace}?backlink=${baseprefix}/clusters/${clusterName}`, + ) + }, [baseprefix, clusterName, namespace, navigate]) + + if (isLoading) { + return + } + + if (!project || error) { + return null + } + + // const readyCondition = project.status.conditions.find(({ type }) => type === 'Ready') + const readyCondition = project.status.conditions.find(({ type }) => type !== 'Ready') + + return ( + <> + +
+ +
+ Project Business Name +
+
+ + {project.spec.businessName || '-'} + {readyCondition && ( + + + {readyCondition.reason} + + + )} + +
+
+ {project.spec.description} +
+ + + +
+ Developer Instruments +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + {readyCondition?.status === 'True' && + (updatePermission.data?.status.allowed || deletePermission.data?.status.allowed) ? ( + { + setIsDeleteModalOpen(true) + } + : undefined + } + onUpdate={updatePermission.data?.status.allowed ? openUpdate : undefined} + /> + ) : ( + + )} + + + +
+ + + Added Products + + + {marketplaceIsLoading && } + {clusterName && + namespace && + marketplacePanels?.items + .map(({ spec }) => spec) + .sort() + .map(({ name, description, icon, type, pathToNav, typeName, apiGroup, apiVersion, tags, disabled }) => ( + + ))} + + {isDeleteModalOpen && ( + { + setIsDeleteModalOpen(false) + navigate(`${baseprefix}/clusters/${clusterName}`) + }} + endpoint={`/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_RPROJECTS_VERSION}/projects/${project.metadata.name}`} + /> + )} + + ) +} diff --git a/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/index.ts b/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/index.ts new file mode 100644 index 0000000..826b6d5 --- /dev/null +++ b/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/index.ts @@ -0,0 +1 @@ +export * from './ProjectInfoCard' diff --git a/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/styled.ts b/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/styled.ts new file mode 100644 index 0000000..cba314c --- /dev/null +++ b/src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/styled.ts @@ -0,0 +1,27 @@ +import styled from 'styled-components' +import { Typography } from 'antd' + +const ActionMenuPlaceholder = styled.div` + width: 45.33px; + height: 1px; +` + +const BigValue = styled(Typography.Text)` + font-size: 36px; + line-height: 36px; + font-weight: 700; + /* stylelint-disable-next-line value-no-vendor-prefix */ + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -ms-line-clamp: 1; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; + line-clamp: 1; + word-break: break-all; +` + +export const Styled = { + ActionMenuPlaceholder, + BigValue, +} diff --git a/src/components/organisms/ProjectInfo/organisms/index.ts b/src/components/organisms/ProjectInfo/organisms/index.ts new file mode 100644 index 0000000..826b6d5 --- /dev/null +++ b/src/components/organisms/ProjectInfo/organisms/index.ts @@ -0,0 +1 @@ +export * from './ProjectInfoCard' diff --git a/src/components/molecules/MarketPlace/types.ts b/src/localTypes/marketplace.ts similarity index 100% rename from src/components/molecules/MarketPlace/types.ts rename to src/localTypes/marketplace.ts