From e35cfe489c99a84966d9a122eab19876c7ad70ac Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Wed, 27 Jul 2022 20:35:20 +0530 Subject: [PATCH] UI: Added custom property pages into global settings (#6381) * Added custom property i global settings * prettier formatting * addressing comment * addressing comment * added prettier --- .../src/constants/globalSettings.constants.ts | 12 +- .../CustomPropertiesPageV1.tsx | 159 ++++++++++++++++++ .../ui/src/router/GlobalSettingRouter.tsx | 13 ++ 3 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPage/CustomPropertiesPageV1.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.ts index 69b9ece042a..84a70a34123 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.ts @@ -14,7 +14,7 @@ export const GLOBAL_SETTINGS_MENU = [ { category: 'Access', - items: ['Teams', 'Users', 'Roles', 'Policies'], + items: ['Teams', 'Users', 'Roles'], }, { category: 'Services', @@ -22,7 +22,7 @@ export const GLOBAL_SETTINGS_MENU = [ }, { category: 'Custom Attributes', - items: ['Tables'], + items: ['Tables', 'Topics', 'Dashboards', 'Pipelines', 'ML Models'], }, { category: 'Integrations', @@ -30,6 +30,14 @@ export const GLOBAL_SETTINGS_MENU = [ }, ]; +export const customAttributesPath = { + tables: 'table', + topics: 'topic', + dashboards: 'dashboard', + pipelines: 'pipeline', + mlModels: 'mlmodel', +}; + export enum GlobalSettingsMenuCategory { ACCESS = 'access', SERVICES = 'services', diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPage/CustomPropertiesPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPage/CustomPropertiesPageV1.tsx new file mode 100644 index 00000000000..2dc65e21e88 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/CustomPropertiesPage/CustomPropertiesPageV1.tsx @@ -0,0 +1,159 @@ +/* + * Copyright 2022 Collate + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { AxiosError } from 'axios'; +import { compare } from 'fast-json-patch'; +import { isUndefined } from 'lodash'; +import React, { useEffect, useMemo, useState } from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { getTypeByFQN, updateType } from '../../axiosAPIs/metadataTypeAPI'; +import { Button } from '../../components/buttons/Button/Button'; +import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder'; +import TabsPane from '../../components/common/TabsPane/TabsPane'; +import { CustomPropertyTable } from '../../components/CustomEntityDetail/CustomPropertyTable'; +import Loader from '../../components/Loader/Loader'; +import SchemaEditor from '../../components/schema-editor/SchemaEditor'; +import { getAddCustomPropertyPath } from '../../constants/constants'; +import { customAttributesPath } from '../../constants/globalSettings.constants'; +import { Type } from '../../generated/entity/type'; +import jsonData from '../../jsons/en'; +import { showErrorToast } from '../../utils/ToastUtils'; + +const CustomEntityDetailV1 = () => { + const { tab } = useParams<{ [key: string]: string }>(); + const history = useHistory(); + + const [activeTab, setActiveTab] = useState(1); + const [isLoading, setIsLoading] = useState(false); + const [isError, setIsError] = useState(false); + const [selectedEntityTypeDetail, setSelectedEntityTypeDetail] = + useState({} as Type); + + const fetchTypeDetail = async (typeFQN: string) => { + setIsLoading(true); + try { + const { data } = await getTypeByFQN(typeFQN); + setSelectedEntityTypeDetail(data); + } catch (error) { + showErrorToast(error as AxiosError); + setIsError(true); + } + setIsLoading(false); + }; + + const onTabChange = (tab: number) => { + setActiveTab(tab); + }; + + const handleAddProperty = () => { + const path = getAddCustomPropertyPath(tab); + history.push(path); + }; + + const tabs = useMemo(() => { + const { customProperties } = selectedEntityTypeDetail; + + return [ + { + name: 'Custom Properties', + isProtected: false, + position: 1, + count: (customProperties || []).length, + }, + { + name: 'Schema', + isProtected: false, + position: 2, + }, + ]; + }, [selectedEntityTypeDetail]); + + const updateEntityType = async (properties: Type['customProperties']) => { + const patch = compare(selectedEntityTypeDetail, { + ...selectedEntityTypeDetail, + customProperties: properties, + }); + + try { + const { data } = await updateType( + selectedEntityTypeDetail.id || '', + patch + ); + setSelectedEntityTypeDetail((prev) => ({ + ...prev, + customProperties: data.customProperties, + })); + } catch (error) { + showErrorToast(error as AxiosError); + } + }; + + useEffect(() => { + if (!isUndefined(tab)) { + setActiveTab(1); + setIsError(false); + fetchTypeDetail( + customAttributesPath[tab as keyof typeof customAttributesPath] + ); + } + }, [tab]); + + if (isLoading) { + return ; + } + + if (isError) { + return ( + + {jsonData['message']['no-custom-entity']} + + ); + } + + return ( +
+ +
+ {activeTab === 2 && ( +
+ +
+ )} + {activeTab === 1 && ( +
+
+ +
+ +
+ )} +
+
+ ); +}; + +export default CustomEntityDetailV1; diff --git a/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx index d379191df4e..784bf52d7ee 100644 --- a/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx @@ -29,6 +29,11 @@ const ServicesPage = withSuspenseFallback( const BotsListPage = withSuspenseFallback( React.lazy(() => import('../pages/BotsListpage/BotsListpage.component')) ); +const CustomPropertiesPageV1 = withSuspenseFallback( + React.lazy( + () => import('../pages/CustomPropertiesPage/CustomPropertiesPageV1') + ) +); const GlobalSettingRouter = () => { return ( @@ -63,6 +68,14 @@ const GlobalSettingRouter = () => { component={ServicesPage} path={getSettingCategoryPath(GlobalSettingsMenuCategory.SERVICES)} /> + + ); };