diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ab55c97..e56548a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Changed + +- Update layout and tabs to the new admin style + ## [1.24.6] - 2023-07-11 ### Changed diff --git a/react/admin/OrganizationsTable.tsx b/react/admin/OrganizationsTable.tsx index 65ff6510..d2593fc1 100644 --- a/react/admin/OrganizationsTable.tsx +++ b/react/admin/OrganizationsTable.tsx @@ -1,5 +1,15 @@ import React from 'react' -import { PageHeader, PageBlock, Layout, Tabs, Tab } from 'vtex.styleguide' +import { + Page, + PageHeader, + PageHeaderTop, + PageHeaderTitle, + PageHeaderBottom, + TabList, + Tab, + PageContent, + useTabState, +} from '@vtex/admin-ui' import { useIntl } from 'react-intl' import { HashRouter, Switch, Route } from 'react-router-dom' @@ -17,12 +27,6 @@ import CheckCustomerSchema from '../components/CheckCustomerSchema' const SESSION_STORAGE_KEY = 'organization-tab' -const Container = ({ children }: any) => ( -
- {children} -
-) - const OrganizationsTable = () => { const { formatMessage } = useIntl() const { tab, handleTabChange, routerRef } = useHashRouter({ @@ -31,35 +35,44 @@ const OrganizationsTable = () => { routes: ['organizations', 'requests', 'settings', 'custom-fields'], }) + const tabsState = useTabState({ selectedId: tab }) + return ( - } - > - - - handleTabChange('organizations')} - /> - handleTabChange('requests')} - /> - handleTabChange('settings')} - /> - handleTabChange('custom-fields')} - /> - - + + + + + + {formatMessage(messages.tablePageTitle)} + + + + + handleTabChange('organizations')} + > + {formatMessage(messages.tablePageTitle)} + + + handleTabChange('requests')}> + {formatMessage(requestMessages.tablePageTitle)} + + + handleTabChange('settings')}> + {formatMessage(settingsMessages.tablePageTitle)} + + + handleTabChange('custom-fields')} + > + {formatMessage(settingsMessages.customFieldsTitle)} + + + + +
@@ -77,9 +90,9 @@ const OrganizationsTable = () => { component={OrganizationCustomFields} /> -
-
-
+ + + ) }