diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.interface.ts new file mode 100644 index 00000000000..f2e38be7b30 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.interface.ts @@ -0,0 +1,18 @@ +/* + * 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 { GlobalSettingOptions } from '../../constants/globalSettings.constants'; + +export interface GlobalSettingProps { + activeTab: GlobalSettingOptions; +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less new file mode 100644 index 00000000000..ebb50b0ad1c --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.less @@ -0,0 +1,25 @@ +/* + * 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. + */ + +.global-setting-left-panel.ant-menu-inline { + box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15); + width: 290px; + .ant-menu-item::after { + left: 0; + right: unset; + } + .ant-menu-item-group:not(:first-child) { + margin-top: 10px; + border-top: 1px solid rgba(0, 0, 0, 0.06); + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx new file mode 100644 index 00000000000..e4dcd956e8e --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSetting.tsx @@ -0,0 +1,29 @@ +/* + * 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 React from 'react'; +import PageLayout from '../containers/PageLayout'; +import './GlobalSetting.less'; +import GlobalSettingLeftPanel from './GlobalSettingLeftPanel'; + +const GlobalSetting = () => { + return ( + }> + GlobalSettingPage + + ); +}; + +export default GlobalSetting; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx new file mode 100644 index 00000000000..807bfc28ee8 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/GlobalSetting/GlobalSettingLeftPanel.tsx @@ -0,0 +1,45 @@ +/* + * 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 { Menu, MenuProps } from 'antd'; +import { ItemType } from 'antd/lib/menu/hooks/useItems'; +import { camelCase } from 'lodash'; +import React from 'react'; +import { useHistory, useParams } from 'react-router-dom'; +import { GLOBAL_SETTINGS_MENU } from '../../constants/globalSettings.constants'; +import { getGlobalSettingMenus } from '../../utils/GlobalSettingsUtils'; +import { getSettingPath } from '../../utils/RouterUtils'; + +const GlobalSettingLeftPanel = () => { + const { tab } = useParams<{ [key: string]: string }>(); + const history = useHistory(); + const items: ItemType[] = GLOBAL_SETTINGS_MENU.map(({ category, items }) => { + return getGlobalSettingMenus(category, camelCase(category), items, 'group'); + }); + + const onClick: MenuProps['onClick'] = (e) => { + history.push(getSettingPath(e.key)); + }; + + return ( + + ); +}; + +export default GlobalSettingLeftPanel; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts index 39ea8f0eb0c..9389fea0af7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts @@ -19,6 +19,11 @@ export const LITE_GRAY_COLOR = '#DBE0EB'; export const TEXT_BODY_COLOR = '#37352F'; export const SUPPORTED_FIELD_TYPES = ['string', 'markdown', 'integer']; +export const SUPPORTED_DOMAIN_TYPES = [ + 'localhost:3000', + 'localhost:8585', + 'sandbox-beta.open-metadata.org', +]; export const FOLLOWERS_VIEW_CAP = 20; export const INITIAL_PAGIN_VALUE = 1; @@ -154,7 +159,8 @@ export const ROUTES = { SQL_BUILDER: '/sql-builder', TEAMS_AND_USERS: '/teams-and-users', TEAMS_AND_USERS_DETAILS: `/teams-and-users/${PLACEHOLDER_ROUTE_TEAM_AND_USER}`, - SETTINGS: '/settings', + SETTINGS: `/settings`, + SETTINGS_WITH_TAB: `/settings/${PLACEHOLDER_ROUTE_TAB}`, STORE: '/store', FEEDS: '/feeds', DUMMY: '/dummy', 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 new file mode 100644 index 00000000000..7d4edbe0718 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.ts @@ -0,0 +1,47 @@ +/* + * 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. + */ + +export const GLOBAL_SETTINGS_MENU = [ + { + category: 'Access', + items: ['Users', 'Teams', 'Roles', 'Policies'], + }, + { + category: 'Services', + items: ['Databases', 'Messaging', 'Dashboards', 'Pipelines', 'ML Models'], + }, + { + category: 'Custom Attributes', + items: ['Tables'], + }, + { + category: 'Integrations', + items: ['Webhook', 'Slack', 'Bots'], + }, +]; + +export enum GlobalSettingOptions { + USERS = 'users', + TEAMS = 'teams', + ROLES = 'roles', + POLICIES = 'policies', + DATABASES = 'databases', + MESSAGING = 'messaging', + DASHBOARDS = 'dashboards', + PIPELINES = 'pipelines', + MLMODELS = 'mlModels', + WEBHOOK = 'webhook', + SLACK = 'slack', + BOTS = 'bots', + TABLES = 'tables', +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx new file mode 100644 index 00000000000..d6c5aff6f2e --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/pages/GlobalSettingPage/GlobalSettingPage.tsx @@ -0,0 +1,26 @@ +/* + * 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 React from 'react'; +import PageContainerV1 from '../../components/containers/PageContainerV1'; +import GlobalSetting from '../../components/GlobalSetting/GlobalSetting'; + +const GlobalSettingPage = () => { + return ( + + + + ); +}; + +export default GlobalSettingPage; diff --git a/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx index 96565bf4fcb..63f3d7ecbbe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/router/AuthenticatedAppRouter.tsx @@ -17,8 +17,13 @@ import { Redirect, Route, Switch } from 'react-router-dom'; import AppState from '../AppState'; import AddCustomProperty from '../components/CustomEntityDetail/AddCustomProperty/AddCustomProperty'; import { ROUTES } from '../constants/constants'; +import { isAllowedHost } from '../utils/CommonUtils'; import withSuspenseFallback from './withSuspenseFallback'; +const GlobalSettingPage = withSuspenseFallback( + React.lazy(() => import('../pages/GlobalSettingPage/GlobalSettingPage')) +); + const MyDataPage = withSuspenseFallback( React.lazy(() => import('../pages/MyDataPage/MyDataPage.component')) ); @@ -343,6 +348,16 @@ const AuthenticatedAppRouter: FunctionComponent = () => { + + {!isAllowedHost() && } + + + {!isAllowedHost() && } + + ); diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx index 1ec0ed5c999..5df8e40811b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/CommonUtils.tsx @@ -31,6 +31,7 @@ import { imageTypes, LOCALSTORAGE_RECENTLY_SEARCHED, LOCALSTORAGE_RECENTLY_VIEWED, + SUPPORTED_DOMAIN_TYPES, TITLE_FOR_NON_OWNER_ACTION, } from '../constants/constants'; import { @@ -713,3 +714,7 @@ export const getFeedCounts = ( */ export const isTaskSupported = (entityType: EntityType) => TASK_ENTITIES.includes(entityType); + +export const isAllowedHost = () => { + return SUPPORTED_DOMAIN_TYPES.includes(window.location.host); +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsUtils.ts new file mode 100644 index 00000000000..38b6ac47f48 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/utils/GlobalSettingsUtils.ts @@ -0,0 +1,36 @@ +/* + * 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 { ItemType } from 'antd/lib/menu/hooks/useItems'; +import { camelCase } from 'lodash'; + +export const getGlobalSettingMenus = ( + label: string, + key: string, + children?: string[], + type?: string +): { + key: string; + children: ItemType[] | undefined; + label: string; + type: string | undefined; +} => { + return { + key, + children: children + ? children.map((child) => getGlobalSettingMenus(child, camelCase(child))) + : undefined, + label, + type, + }; +}; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts index 4dd97a8038e..f26d85b7797 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts +++ b/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts @@ -192,3 +192,13 @@ export const getAddGlossaryTermsPath = ( return path; }; + +export const getSettingPath = (tab?: string) => { + let path = tab ? ROUTES.SETTINGS_WITH_TAB : ROUTES.SETTINGS; + + if (tab) { + path = path.replace(PLACEHOLDER_ROUTE_TAB, tab); + } + + return path; +};