Merge pull request #21 from vtex-apps/fix/navigation-avatars

Update navigation and avatars

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Navigation in sidebar 
+
+### Removed
+
+- Broken avatars
+
 ## [0.0.11] - 2021-08-11
 
 ## [0.0.10] - 2021-08-11

admin/navigation.json

@@ -4,11 +4,6 @@
   "subSection": "example",
   "searchKeyWordsHelpers": "admin-example.navigation.search.kws",
   "subSectionItems": [
-    {
-      "labelId": "admin-example.navigation.label-details",
-      "path": "/admin/example",
-      "searchKeyWordsHelpers": "admin-example.navigation.details.search.kws"
-    },
     {
       "labelId": "admin-example.navigation.label-table",
       "path": "/admin/example",

messages/en.json

@@ -1,9 +1,9 @@
 {
   "admin-example.navigation.label-group": "Example admins",
-  "admin-example.navigation.label-details": "Example details",
   "admin-example.navigation.label-table": "Example table",
   "admin-example.navigation.search.kws": "test, mock, fake",
   "admin-example.navigation.details.search.kws": "details, mock, test, hello",
   "admin-example.navigation.table.search.kws": "table, mock, test, bye",
-  "admin-example.hello-world": "Example Admin"
+  "admin-example.hello-world": "Example Admin",
+  "admin-example.details": "Details page"
 }

messages/es.json

@@ -1,9 +1,9 @@
 {
   "admin-example.navigation.label-group": "Admins de ejemplo",
-  "admin-example.navigation.label-details": "Ejemplo de detalhes",
   "admin-example.navigation.label-table": "Ejemplo de tabela",
   "admin-example.navigation.search.kws": "teste, mock, fake",
   "admin-example.navigation.details.search.kws": "detalhe, mock, test, oi",
   "admin-example.navigation.table.search.kws": "tabela, mock, test, tchau",
-  "admin-example.hello-world": "Admin de ejemplo"
+  "admin-example.hello-world": "Admin de ejemplo",
+  "admin-example.details": "Página de detalles"
 }

messages/pt.json

@@ -1,9 +1,9 @@
 {
-  "admin-example.navigation.label-group": "Admins de exemplo",
-  "admin-example.navigation.label-details": "Exemplo de detalhes",
+  "admin-example.navigation.label-group": "Admin de exemplo",
   "admin-example.navigation.label-table": "Exemplo de tabela",
   "admin-example.navigation.search.kws": "teste, mock, fake",
   "admin-example.navigation.details.search.kws": "detalhe, mock, test, oi",
   "admin-example.navigation.table.search.kws": "tabela, mock, test, tchau",
-  "admin-example.hello-world": "Admin de exemplo"
+  "admin-example.hello-world": "Admin de exemplo",
+  "admin-example.details": "Admin detalhes"
 }

package.json

@@ -29,6 +29,6 @@
     "lint-staged": "^10.2.2",
     "prettier": "^2.0.5",
     "typescript": "^3.8.3",
-    "@vtex/danger": "^0.2.7"
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime"
   }
 }

react/AdminExampleDetail.tsx

@@ -1,10 +1,27 @@
 import React, { FC } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { Layout, PageBlock, PageHeader } from 'vtex.styleguide'
 
 import './styles.global.css'
 
-const AdminExampleDetail: FC = () => {
-  return <FormattedMessage id="admin-example.hello-world" />
+const AdminExampleDetail: FC<Props> = ({ params }) => {
+  return (
+    <Layout
+      pageHeader={
+        <PageHeader title={<FormattedMessage id="admin-example.details" />} />
+      }
+    >
+      <PageBlock variation="full">
+        <div>
+          Params: <pre>{JSON.stringify(params, null, 2)}</pre>
+        </div>
+      </PageBlock>
+    </Layout>
+  )
+}
+
+interface Props {
+  params: any
 }
 
 export default AdminExampleDetail

react/UsersTable/index.tsx

@@ -7,17 +7,21 @@ import {
   Input,
 } from 'vtex.styleguide'
 import faker from 'faker'
+import { withRuntimeContext } from 'vtex.render-runtime'
 
 const EXAMPLE_LENGTH = 100
 const MOCKED_DATA = [...Array(EXAMPLE_LENGTH)].map(() => ({
-  avatar: faker.internet.avatar(),
   name: faker.name.findName(),
   streetAddress: faker.address.streetAddress(),
   cityStateZipAddress: `${faker.address.city()}, ${faker.address.stateAbbr()} ${faker.address.zipCode()}`,
   email: faker.internet.email().toLowerCase(),
 }))
 
-export default class UsersTable extends Component {
+interface Props {
+  runtime: any
+}
+
+class UsersTable extends Component<Props> {
   constructor(props: any) {
     super(props)
     this.state = {
@@ -30,56 +34,29 @@ export default class UsersTable extends Component {
 
   private getSchema() {
     const { tableDensity }: any = this.state
-    let avatarScale = 'scale(1,1)'
+
     let fontSize = 'f5'
-    let avatarColumnWidth = 100
+
     switch (tableDensity) {
       case 'low': {
-        avatarScale = 'scale(0.9, 0.75)'
         fontSize = 'f5'
-        avatarColumnWidth = 100
         break
       }
       case 'medium': {
-        avatarScale = 'scale(0.82, 0.53)'
         fontSize = 'f6'
-        avatarColumnWidth = 90
         break
       }
       case 'high': {
-        avatarScale = 'scale(0.75, 0.32)'
         fontSize = 'f7'
-        avatarColumnWidth = 75
         break
       }
       default: {
-        avatarScale = 'scale(1,1)'
         fontSize = 'f5'
-        avatarColumnWidth = 100
         break
       }
     }
     return {
       properties: {
-        avatar: {
-          title: 'Avatar',
-          width: avatarColumnWidth,
-          cellRenderer: ({ cellData }: any) => {
-            return (
-              <div
-                className="pa4 tc"
-                style={{
-                  transform: avatarScale,
-                }}
-              >
-                <img src={cellData} className="br-100 h3 w3 dib" alt="avatar" />
-              </div>
-            )
-          },
-          headerRenderer: ({ title }: any) => (
-            <span className="w-100 tc">{title}</span>
-          ),
-        },
         name: {
           title: 'Name',
         },
@@ -161,6 +138,10 @@ export default class UsersTable extends Component {
       filterStatements,
       tableDensity,
     }: any = this.state
+    const {
+      runtime: { navigate },
+    } = this.props
+
     return (
       <div>
         <Table
@@ -169,6 +150,12 @@ export default class UsersTable extends Component {
           items={items}
           schema={this.getSchema()}
           density="low"
+          onRowClick={({ rowData }: any) =>
+            navigate({
+              page: 'admin.app.example-detail',
+              params: { id: rowData.id },
+            })
+          }
           toolbar={{
             density: {
               buttonLabel: 'Line density',
@@ -283,10 +270,6 @@ export default class UsersTable extends Component {
               handleCallback: (_params: any) => alert('TODO: SHOW EMAIL FORM'),
             },
             others: [
-              {
-                label: 'Reset avatar',
-                handleCallback: (params: any) => console.warn(params),
-              },
               {
                 label: 'Delete',
                 handleCallback: (params: any) => console.warn(params),
@@ -298,3 +281,5 @@ export default class UsersTable extends Component {
     )
   }
 }
+
+export default withRuntimeContext(UsersTable)

react/package.json

@@ -1,9 +1,6 @@
 {
   "name": "vtex.admin-example",
   "version": "0.0.11",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "devDependencies": {
     "@types/node": "^11.12.1",
     "@types/react": "^16.8.10",
@@ -15,7 +12,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-intl": "^2.7.2",
-    "typescript": "^3.9.7"
+    "typescript": "3.9.7"
   },
   "dependencies": {
     "@types/faker": "^4.1.5",

react/yarn.lock

@@ -247,10 +247,10 @@ tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
-typescript@^3.9.7:
-  version "3.9.10"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.10.tgz#70f3910ac7a51ed6bef79da7800690b19bf778b8"
-  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+[email protected]:
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
+  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
 zen-observable-ts@^0.8.18:
   version "0.8.18"