Update layout and tabs to the new admin style (#115)

* Update layout and tabs to the new admin style * Add CHANGELOG.md entry
vtex-apps · Jul 13, 2023 · b663d4f · b663d4f
1 parent 693f328
commit b663d4f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 38 deletions.
diff --git 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
@@ -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) => (
-  <div className="mt6">
-    <PageBlock>{children}</PageBlock>
-  </div>
-)
-
 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 (
-    <Layout
-      fullWidth
-      pageHeader={<PageHeader title={formatMessage(messages.tablePageTitle)} />}
-    >
-      <HashRouter ref={routerRef}>
-        <Tabs>
-          <Tab
-            label={formatMessage(messages.tablePageTitle)}
-            active={tab === 'organizations'}
-            onClick={() => handleTabChange('organizations')}
-          />
-          <Tab
-            label={formatMessage(requestMessages.tablePageTitle)}
-            active={tab === 'requests'}
-            onClick={() => handleTabChange('requests')}
-          />
-          <Tab
-            label={formatMessage(settingsMessages.tablePageTitle)}
-            active={tab === 'settings'}
-            onClick={() => handleTabChange('settings')}
-          />
-          <Tab
-            label={formatMessage(settingsMessages.customFieldsTitle)}
-            active={tab === 'custom-fields'}
-            onClick={() => handleTabChange('custom-fields')}
-          />
-        </Tabs>
-        <Container>
+    <HashRouter ref={routerRef}>
+      <Page>
+        <PageHeader>
+          <PageHeaderTop>
+            <PageHeaderTitle>
+              {formatMessage(messages.tablePageTitle)}
+            </PageHeaderTitle>
+          </PageHeaderTop>
+          <PageHeaderBottom>
+            <TabList state={tabsState}>
+              <Tab
+                id="organizations"
+                onClick={() => handleTabChange('organizations')}
+              >
+                {formatMessage(messages.tablePageTitle)}
+              </Tab>
+
+              <Tab id="requests" onClick={() => handleTabChange('requests')}>
+                {formatMessage(requestMessages.tablePageTitle)}
+              </Tab>
+
+              <Tab id="settings" onClick={() => handleTabChange('settings')}>
+                {formatMessage(settingsMessages.tablePageTitle)}
+              </Tab>
+
+              <Tab
+                id="custom-fields"
+                onClick={() => handleTabChange('custom-fields')}
+              >
+                {formatMessage(settingsMessages.customFieldsTitle)}
+              </Tab>
+            </TabList>
+          </PageHeaderBottom>
+        </PageHeader>
+        <PageContent layout="wide">
           <div className="mb5">
             <CheckCustomerSchema isAdmin={true} />
           </div>
@@ -77,9 +90,9 @@ const OrganizationsTable = () => {
               component={OrganizationCustomFields}
             />
           </Switch>
-        </Container>
-      </HashRouter>
-    </Layout>
+        </PageContent>
+      </Page>
+    </HashRouter>
   )
 }