From c469a580f7bd325793b06ea3ed8a2199b6e41192 Mon Sep 17 00:00:00 2001 From: typescreep Date: Fri, 6 Jun 2025 15:36:14 +0300 Subject: [PATCH] project & marketplace via factory --- .env | 3 + package-lock.json | 8 +- package.json | 2 +- src/App.tsx | 5 +- .../atoms/ContentCard/ContentCard.tsx | 25 -- src/components/atoms/ContentCard/index.ts | 1 - src/components/atoms/ContentCard/styled.ts | 25 -- src/components/atoms/Icons/DeleteIcon.tsx | 15 -- src/components/atoms/Icons/EditIcon.tsx | 15 -- src/components/atoms/Icons/index.ts | 2 - .../RedirectProjectInfo.tsx | 18 ++ .../atoms/RedirectProjectInfo/index.ts | 1 + src/components/atoms/index.ts | 3 +- .../molecules/MarketPlace/MarketPlace.tsx | 241 ------------------ .../MarketPlace/atoms/AddCard/AddCard.tsx | 15 -- .../MarketPlace/atoms/AddCard/index.ts | 1 - .../MarketPlace/atoms/AddCard/styled.ts | 27 -- .../molecules/MarketPlace/atoms/index.ts | 1 - src/components/molecules/MarketPlace/index.ts | 2 - .../AddEditFormModal/AddEditFormModal.tsx | 164 ------------ .../molecules/AddEditFormModal/index.ts | 1 - .../MarketplaceCard/MarketplaceCard.tsx | 150 ----------- .../molecules/MarketplaceCard/index.ts | 1 - .../molecules/MarketplaceCard/styled.ts | 97 ------- .../molecules/MarketplaceCard/utils.ts | 65 ----- .../SearchTextInput/SearchTextInput.tsx | 28 -- .../molecules/SearchTextInput/index.ts | 1 - .../molecules/MarketPlace/molecules/index.ts | 3 - .../molecules/MarketPlace/styled.ts | 21 -- src/components/molecules/index.ts | 1 - .../organisms/ListProjects/ListProjects.tsx | 4 +- .../organisms/ProjectInfo/ProjectInfo.tsx | 21 -- src/components/organisms/ProjectInfo/index.ts | 1 - .../DropdownAccessGroups.tsx | 44 ---- .../molecules/DropdownAccessGroups/index.ts | 1 - .../DropdownActions/DropdownActions.tsx | 66 ----- .../molecules/DropdownActions/index.ts | 1 - .../organisms/ProjectInfo/molecules/index.ts | 2 - .../ProjectInfoCard/ProjectInfoCard.tsx | 238 ----------------- .../organisms/ProjectInfoCard/index.ts | 1 - .../organisms/ProjectInfoCard/styled.ts | 27 -- .../organisms/ProjectInfo/organisms/index.ts | 1 - .../organisms/ProjectInfo/styled.ts | 27 -- src/components/organisms/index.ts | 1 - .../customizationApiGroupAndVersion.ts | 5 +- src/constants/tableProps.tsx | 3 +- src/hooks/useNavSelector.ts | 4 +- src/pages/FactoryPage/FactoryPage.tsx | 5 +- .../ListClustersPage/ListClustersPage.tsx | 4 +- .../ListInsideClustersAndNsPage.tsx | 4 +- .../ListProjectsPage/ListProjectsPage.tsx | 4 +- src/pages/ProjectInfoPage/ProjectInfoPage.tsx | 7 +- src/pages/TableApiPage/TableApiPage.tsx | 4 +- .../TableBuiltinPage/TableBuiltinPage.tsx | 4 +- src/pages/TableCrdPage/TableCrdPage.tsx | 4 +- 55 files changed, 59 insertions(+), 1366 deletions(-) delete mode 100644 src/components/atoms/ContentCard/ContentCard.tsx delete mode 100644 src/components/atoms/ContentCard/index.ts delete mode 100644 src/components/atoms/ContentCard/styled.ts delete mode 100644 src/components/atoms/Icons/DeleteIcon.tsx delete mode 100644 src/components/atoms/Icons/EditIcon.tsx delete mode 100644 src/components/atoms/Icons/index.ts create mode 100644 src/components/atoms/RedirectProjectInfo/RedirectProjectInfo.tsx create mode 100644 src/components/atoms/RedirectProjectInfo/index.ts delete mode 100644 src/components/molecules/MarketPlace/MarketPlace.tsx delete mode 100644 src/components/molecules/MarketPlace/atoms/AddCard/AddCard.tsx delete mode 100644 src/components/molecules/MarketPlace/atoms/AddCard/index.ts delete mode 100644 src/components/molecules/MarketPlace/atoms/AddCard/styled.ts delete mode 100644 src/components/molecules/MarketPlace/atoms/index.ts delete mode 100644 src/components/molecules/MarketPlace/index.ts delete mode 100644 src/components/molecules/MarketPlace/molecules/AddEditFormModal/AddEditFormModal.tsx delete mode 100644 src/components/molecules/MarketPlace/molecules/AddEditFormModal/index.ts delete mode 100644 src/components/molecules/MarketPlace/molecules/MarketplaceCard/MarketplaceCard.tsx delete mode 100644 src/components/molecules/MarketPlace/molecules/MarketplaceCard/index.ts delete mode 100644 src/components/molecules/MarketPlace/molecules/MarketplaceCard/styled.ts delete mode 100644 src/components/molecules/MarketPlace/molecules/MarketplaceCard/utils.ts delete mode 100644 src/components/molecules/MarketPlace/molecules/SearchTextInput/SearchTextInput.tsx delete mode 100644 src/components/molecules/MarketPlace/molecules/SearchTextInput/index.ts delete mode 100644 src/components/molecules/MarketPlace/molecules/index.ts delete mode 100644 src/components/molecules/MarketPlace/styled.ts delete mode 100644 src/components/organisms/ProjectInfo/ProjectInfo.tsx delete mode 100644 src/components/organisms/ProjectInfo/index.ts delete mode 100644 src/components/organisms/ProjectInfo/molecules/DropdownAccessGroups/DropdownAccessGroups.tsx delete mode 100644 src/components/organisms/ProjectInfo/molecules/DropdownAccessGroups/index.ts delete mode 100644 src/components/organisms/ProjectInfo/molecules/DropdownActions/DropdownActions.tsx delete mode 100644 src/components/organisms/ProjectInfo/molecules/DropdownActions/index.ts delete mode 100644 src/components/organisms/ProjectInfo/molecules/index.ts delete mode 100644 src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/ProjectInfoCard.tsx delete mode 100644 src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/index.ts delete mode 100644 src/components/organisms/ProjectInfo/organisms/ProjectInfoCard/styled.ts delete mode 100644 src/components/organisms/ProjectInfo/organisms/index.ts delete mode 100644 src/components/organisms/ProjectInfo/styled.ts diff --git a/.env b/.env index ddc386a..0e26a87 100644 --- a/.env +++ b/.env @@ -1,4 +1,7 @@ VITE_CUSTOMIZATION_API_GROUP=incloud.io VITE_CUSTOMIZATION_API_VERSION=v1alpha VITE_PROJECTS_VERSION=v1alpha +VITE_PROJECTS_RESOURCE_NAME=projects +VITE_MARKETPLACE_RESOURCE_NAME=marketplacepanels +VITE_MARKETPLACE_KIND=MarketplacePanel VITE_INSTANCES_VERSION=v1alpha1 diff --git a/package-lock.json b/package-lock.json index fcc3b6f..2c62459 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@ant-design/icons": "5.6.0", "@monaco-editor/react": "4.6.0", "@originjs/vite-plugin-federation": "1.3.6", - "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.22", + "@prorobotech/openapi-k8s-toolkit": "^0.0.1-alpha.23", "@readme/openapi-parser": "4.0.0", "@reduxjs/toolkit": "2.2.5", "@tanstack/react-query": "5.62.2", @@ -2752,9 +2752,9 @@ } }, "node_modules/@prorobotech/openapi-k8s-toolkit": { - "version": "0.0.1-alpha.22", - "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.22.tgz", - "integrity": "sha512-907Jubl1g7CcSK/YMakSTgbz/+FF4mDnL5hT2khQAUusW/7sPD0B8f2VEYa8Ace511q/XuLNo7STUDfmXEEcMQ==", + "version": "0.0.1-alpha.23", + "resolved": "https://registry.npmjs.org/@prorobotech/openapi-k8s-toolkit/-/openapi-k8s-toolkit-0.0.1-alpha.23.tgz", + "integrity": "sha512-3lxhPTGbqca3emK5zkQRUuiNc424TpotmExno7YFMN66DpXDT42MsCQQ0VF7iPbVPwVH6bWmOMtqe6M5hP6j3w==", "license": "MIT", "dependencies": { "@monaco-editor/react": "4.6.0", diff --git a/package.json b/package.json index 38a7943..a08ccca 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "@ant-design/icons": "5.6.0", "@monaco-editor/react": "4.6.0", "@originjs/vite-plugin-federation": "1.3.6", - "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.22", + "@prorobotech/openapi-k8s-toolkit": "0.0.1-alpha.23", "@readme/openapi-parser": "4.0.0", "@reduxjs/toolkit": "2.2.5", "@tanstack/react-query": "5.62.2", diff --git a/src/App.tsx b/src/App.tsx index 5842652..2c39d91 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -127,7 +127,10 @@ export const App: FC = ({ isFederation, forcedTheme }) => { path={`${prefix}/:clusterName/:namespace?/:syntheticProject?/forms/crds/:apiGroup/:apiVersion/:typeName/:entryName?/`} element={} /> - } /> + } + /> } /> ) diff --git a/src/components/atoms/ContentCard/ContentCard.tsx b/src/components/atoms/ContentCard/ContentCard.tsx deleted file mode 100644 index 3670d45..0000000 --- a/src/components/atoms/ContentCard/ContentCard.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { FC, ReactNode } from 'react' -import { theme } from 'antd' -import { Styled } from './styled' - -type TContentCardProps = { - children?: ReactNode - flexGrow?: number - displayFlex?: boolean - flexFlow?: string -} - -export const ContentCard: FC = ({ children, flexGrow, displayFlex, flexFlow }) => { - const { token } = theme.useToken() - return ( - - {children} - - ) -} diff --git a/src/components/atoms/ContentCard/index.ts b/src/components/atoms/ContentCard/index.ts deleted file mode 100644 index 9e47ca8..0000000 --- a/src/components/atoms/ContentCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './ContentCard' diff --git a/src/components/atoms/ContentCard/styled.ts b/src/components/atoms/ContentCard/styled.ts deleted file mode 100644 index 737a553..0000000 --- a/src/components/atoms/ContentCard/styled.ts +++ /dev/null @@ -1,25 +0,0 @@ -import styled from 'styled-components' - -type TContentContainerProps = { - $bgColor: string - $borderColor: string - $flexGrow?: number - $displayFlex?: boolean - $flexFlow?: string -} - -export const ContentContainer = styled.div` - border: 1px solid ${({ $borderColor }) => $borderColor}; - border-radius: 6px; - background-color: ${({ $bgColor }) => $bgColor}; - width: 100%; - height: 100%; - padding: 24px; - flex-grow: ${({ $flexGrow }) => $flexGrow}; - display: ${({ $displayFlex }) => ($displayFlex ? 'flex' : 'block')}; - flex-flow: ${({ $flexFlow }) => $flexFlow}; -` - -export const Styled = { - ContentContainer, -} diff --git a/src/components/atoms/Icons/DeleteIcon.tsx b/src/components/atoms/Icons/DeleteIcon.tsx deleted file mode 100644 index 07595ee..0000000 --- a/src/components/atoms/Icons/DeleteIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FC } from 'react' -import { theme } from 'antd' - -export const DeleteIcon: FC = () => { - const { token } = theme.useToken() - - return ( - - - - ) -} diff --git a/src/components/atoms/Icons/EditIcon.tsx b/src/components/atoms/Icons/EditIcon.tsx deleted file mode 100644 index f140ae5..0000000 --- a/src/components/atoms/Icons/EditIcon.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FC } from 'react' -import { theme } from 'antd' - -export const EditIcon: FC = () => { - const { token } = theme.useToken() - - return ( - - - - ) -} diff --git a/src/components/atoms/Icons/index.ts b/src/components/atoms/Icons/index.ts deleted file mode 100644 index 303b57f..0000000 --- a/src/components/atoms/Icons/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './DeleteIcon' -export * from './EditIcon' diff --git a/src/components/atoms/RedirectProjectInfo/RedirectProjectInfo.tsx b/src/components/atoms/RedirectProjectInfo/RedirectProjectInfo.tsx new file mode 100644 index 0000000..584263b --- /dev/null +++ b/src/components/atoms/RedirectProjectInfo/RedirectProjectInfo.tsx @@ -0,0 +1,18 @@ +import { FC, useEffect } from 'react' +import { useParams, useNavigate } from 'react-router-dom' +import { useSelector } from 'react-redux' +import { RootState } from 'store/store' + +export const RedirectProjectInfo: FC = () => { + const { clusterName, namespace } = useParams() + const navigate = useNavigate() + const baseprefix = useSelector((state: RootState) => state.baseprefix.baseprefix) + + navigate(`${baseprefix}/${clusterName}/${namespace}/factory/project/${namespace}`) + + useEffect(() => { + navigate(`${baseprefix}/${clusterName}/${namespace}/factory/project/${namespace}`) + }, [clusterName, namespace, baseprefix, navigate]) + + return null +} diff --git a/src/components/atoms/RedirectProjectInfo/index.ts b/src/components/atoms/RedirectProjectInfo/index.ts new file mode 100644 index 0000000..5e32cb1 --- /dev/null +++ b/src/components/atoms/RedirectProjectInfo/index.ts @@ -0,0 +1 @@ +export * from './RedirectProjectInfo' diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 24c8cf1..90b957f 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -4,6 +4,5 @@ export * from './TitleWithNoTopMargin' export * from './ThemeSelector' export * from './FlexEnd' export * from './BackLink' -export * from './ContentCard' export * from './FlexGrow' -export * from './Icons' +export * from './RedirectProjectInfo' diff --git a/src/components/molecules/MarketPlace/MarketPlace.tsx b/src/components/molecules/MarketPlace/MarketPlace.tsx deleted file mode 100644 index bad2d87..0000000 --- a/src/components/molecules/MarketPlace/MarketPlace.tsx +++ /dev/null @@ -1,241 +0,0 @@ -/* eslint-disable max-lines-per-function */ -import React, { FC, useEffect, useState } from 'react' -import { useParams } from 'react-router-dom' -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, MarketplaceCard, SearchTextInput } from './molecules' -import { Styled } from './styled' - -export const MarketPlace: FC = () => { - const [api, contextHolder] = notification.useNotification() - - const [isEditMode, setIsEditMode] = useState(false) - const [isAddEditOpen, setIsAddEditOpen] = useState(false) - const [isDeleteOpen, setIsDeleteOpen] = useState<{ name: string } | boolean>(false) - - const [createUpdateError, setCreateUpdateError] = useState() - const [deleteError, setDeleteError] = useState() - - const [initialData, setInitialData] = useState([]) - const [filteredAndSortedData, setFilterAndSortedData] = useState([]) - const [uniqueTags, setUniqueTags] = useState([]) - const [selectedTags, setSelectedTags] = useState([]) - - const { clusterName, namespace } = useParams() - - const { - data: marketplacePanels, - isLoading, - error, - } = 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 createPermission = usePermissions({ - apiGroup: BASE_API_GROUP, - typeName: 'marketplacepanels', - namespace: '', - clusterName: clusterName || '', - verb: 'create', - refetchInterval: false, - }) - - const updatePermission = usePermissions({ - apiGroup: BASE_API_GROUP, - typeName: 'marketplacepanels', - namespace: '', - clusterName: clusterName || '', - verb: 'update', - refetchInterval: false, - }) - - const deletePermission = usePermissions({ - apiGroup: BASE_API_GROUP, - typeName: 'marketplacepanels', - namespace: '', - clusterName: clusterName || '', - verb: 'delete', - refetchInterval: false, - }) - - const onCreateSuccess = () => - api.success({ - message: 'Card created', - key: 'create-marketplace-success', - }) - - const onUpdateSuccess = () => - api.success({ - message: 'Card modified', - key: 'update-marketplace-success', - }) - - useEffect(() => { - if (marketplacePanels) { - if (isEditMode) { - setInitialData(marketplacePanels.items.map(({ spec }) => spec).sort()) - setUniqueTags( - marketplacePanels.items - .flatMap(({ spec }) => spec.tags) - .filter((value, index, arr) => arr.indexOf(value) === index), - ) - } else { - setInitialData( - marketplacePanels.items - .map(({ spec }) => spec) - .filter(({ hidden }) => hidden !== true) - .sort(), - ) - setUniqueTags( - marketplacePanels.items - .filter(({ spec }) => spec.hidden !== true) - .flatMap(({ spec }) => spec.tags) - .filter((value, index, arr) => arr.indexOf(value) === index), - ) - } - } - }, [marketplacePanels, isEditMode]) - - useEffect(() => { - let newData: TMarketPlacePanel[] = [] - - if (selectedTags && selectedTags.length > 0) { - newData = initialData - .filter( - ({ name, description, tags }) => - selectedTags.some(tag => name.toLowerCase().includes(tag.toLowerCase())) || - selectedTags.some(tag => description.toLowerCase().includes(tag.toLowerCase())) || - selectedTags.some(tag => tags.some(el => el.toLowerCase().includes(tag.toLowerCase()))), - ) - .sort() - } else { - newData = initialData.sort() - } - - setFilterAndSortedData(newData) - }, [selectedTags, initialData]) - - if (error) { - return
{JSON.stringify(error)}
- } - - if (isLoading) { - return - } - - if (!marketplacePanels) { - return
No panels
- } - - const toggleEditMode = () => { - setIsEditMode(!isEditMode) - } - - return ( - <> - {contextHolder} - -
- -
- Available Products -
-
- Marketplace -
- -
-
- - - {(createPermission.data?.status.allowed || - updatePermission.data?.status.allowed || - deletePermission.data?.status.allowed) && ( - - Edit Mode - - )} - -
- - - {createUpdateError && ( - setCreateUpdateError(undefined)} - type="error" - /> - )} - {deleteError && ( - setDeleteError(undefined)} - type="error" - /> - )} - - {clusterName && - namespace && - filteredAndSortedData.map( - ({ name, description, icon, type, pathToNav, typeName, apiGroup, apiVersion, tags, disabled }) => ( - { - const entry = marketplacePanels.items.find(({ spec }) => spec.name === name) - setIsDeleteOpen(entry ? { name: entry.metadata.name } : false) - }} - onEditClick={() => { - setIsAddEditOpen(marketplacePanels.items.find(({ spec }) => spec.name === name) || false) - }} - /> - ), - )} - {isEditMode && ( - { - setIsAddEditOpen(true) - }} - /> - )} - - {isAddEditOpen && ( - - )} - {typeof isDeleteOpen !== 'boolean' && ( - setIsDeleteOpen(false)} - endpoint={`/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/${BASE_API_VERSION}/marketplacepanels/${isDeleteOpen.name}`} - /> - )} - - ) -} diff --git a/src/components/molecules/MarketPlace/atoms/AddCard/AddCard.tsx b/src/components/molecules/MarketPlace/atoms/AddCard/AddCard.tsx deleted file mode 100644 index 12a64d2..0000000 --- a/src/components/molecules/MarketPlace/atoms/AddCard/AddCard.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FC } from 'react' -import { PlusOutlined } from '@ant-design/icons' -import { Styled } from './styled' - -type TAddCardProps = { - onAddClick: () => void -} - -export const AddCard: FC = ({ onAddClick }) => { - return ( - - - - ) -} diff --git a/src/components/molecules/MarketPlace/atoms/AddCard/index.ts b/src/components/molecules/MarketPlace/atoms/AddCard/index.ts deleted file mode 100644 index dabc67c..0000000 --- a/src/components/molecules/MarketPlace/atoms/AddCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './AddCard' diff --git a/src/components/molecules/MarketPlace/atoms/AddCard/styled.ts b/src/components/molecules/MarketPlace/atoms/AddCard/styled.ts deleted file mode 100644 index 1e4589c..0000000 --- a/src/components/molecules/MarketPlace/atoms/AddCard/styled.ts +++ /dev/null @@ -1,27 +0,0 @@ -import styled from 'styled-components' -import { Card } from 'antd' - -const CustomCard = styled(Card)` - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; - width: 238px; - box-shadow: - 0 6px 16px 0 #00000014, - 0 3px 6px -4px #0000001f, - 0 9px 28px 8px #0000000d; - - .ant-card-body { - display: flex; - justify-content: center; - align-items: center; - height: 238px; - overflow-x: auto; - padding: 8px; - } -` - -export const Styled = { - CustomCard, -} diff --git a/src/components/molecules/MarketPlace/atoms/index.ts b/src/components/molecules/MarketPlace/atoms/index.ts deleted file mode 100644 index dabc67c..0000000 --- a/src/components/molecules/MarketPlace/atoms/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './AddCard' diff --git a/src/components/molecules/MarketPlace/index.ts b/src/components/molecules/MarketPlace/index.ts deleted file mode 100644 index 52be477..0000000 --- a/src/components/molecules/MarketPlace/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './MarketPlace' -export * from './molecules/MarketplaceCard' diff --git a/src/components/molecules/MarketPlace/molecules/AddEditFormModal/AddEditFormModal.tsx b/src/components/molecules/MarketPlace/molecules/AddEditFormModal/AddEditFormModal.tsx deleted file mode 100644 index 93f5f1f..0000000 --- a/src/components/molecules/MarketPlace/molecules/AddEditFormModal/AddEditFormModal.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import React, { FC, Dispatch, SetStateAction } from 'react' -import { isAxiosError, AxiosError } from 'axios' -import { Form, Input, Select, Switch, Modal } from 'antd' -import { createNewEntry, updateEntry } from '@prorobotech/openapi-k8s-toolkit' -import { useParams } from 'react-router-dom' -import { v4 as uuidv4 } from 'uuid' -import { BASE_API_GROUP, BASE_API_VERSION } from 'constants/customizationApiGroupAndVersion' -import { TMarketPlacePanel, TMarketPlacePanelResource } from 'localTypes/marketplace' - -type TAddEditFormModalProps = { - isOpen: boolean | TMarketPlacePanelResource - setIsOpen: Dispatch> - setError: Dispatch> - onCreateSuccess: () => void - onUpdateSuccess: () => void -} - -export const AddEditFormModal: FC = ({ - isOpen, - setIsOpen, - setError, - onCreateSuccess, - onUpdateSuccess, -}) => { - const [form] = Form.useForm() - const type = Form.useWatch('type', form) - const { clusterName } = useParams() - - const defaultValues: TMarketPlacePanel = - typeof isOpen === 'boolean' - ? { - name: '', - description: '', - icon: '', - type: 'direct', - apiGroup: '', - apiVersion: '', - typeName: '', - pathToNav: '', - tags: [], - disabled: false, - hidden: false, - } - : isOpen.spec - - const onSubmit = (values: TMarketPlacePanel) => { - if (typeof isOpen === 'boolean') { - createNewEntry({ - endpoint: `/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/{BASE_API_VERSION}/marketplacepanels`, - body: { - apiVersion: `${BASE_API_GROUP}/${BASE_API_VERSION}`, - kind: 'MarketplacePanel', - metadata: { - name: uuidv4(), - }, - spec: { ...values }, - }, - }) - .then(() => { - setIsOpen(false) - onCreateSuccess() - }) - .catch(err => { - if (isAxiosError(err) || err instanceof Error) { - setError(err) - } - }) - .finally(() => setIsOpen(false)) - - return - } - - updateEntry({ - endpoint: `/api/clusters/${clusterName}/k8s/apis/${BASE_API_GROUP}/{BASE_API_VERSION}/marketplacepanels/${isOpen.metadata.name}`, - body: { - apiVersion: `${BASE_API_GROUP}/${BASE_API_VERSION}`, - kind: 'MarketplacePanel', - metadata: { - name: isOpen.metadata.name, - resourceVersion: isOpen.metadata.resourceVersion, - }, - spec: { ...values }, - }, - }) - .then(() => { - setIsOpen(false) - onUpdateSuccess() - }) - .catch(err => { - if (isAxiosError(err) || err instanceof Error) { - setError(err) - } - }) - .finally(() => setIsOpen(false)) - } - - const submit = () => { - form - .validateFields() - .then(() => { - onSubmit(form.getFieldsValue()) - }) - // eslint-disable-next-line no-console - .catch(() => console.log('Validating error')) - } - - return ( - setIsOpen(false)} - onOk={() => submit} - > - form={form} name="control-hooks" initialValues={{ ...defaultValues }}> - - - - - - - - - - - - - - - - - - - - - - -