feat: add validation in admin frontend

Author: lucvysk

graphql/schema.graphql

@@ -3,6 +3,7 @@ type Query {
   getHistory: [GetHistoryResponse] @cacheControl(scope: PRIVATE)
   getLast(workspace: String): GetLastResponse @cacheControl(scope: PRIVATE)
   getById(id: String): ConfigResponse @cacheControl(scope: PRIVATE)
+  getPermissions: GetPermissionsResponse @cacheControl(scope: PRIVATE)
 }
 
 type Mutation {
@@ -49,6 +50,9 @@ type GetHistoryResponse {
   appVersion: String
 }
 
+type GetPermissionsResponse {
+  access: Boolean
+}
 type GetSetupConfigResponse {
   adminSetup: AdminSetupResponse
 }

messages/context.json

@@ -2,6 +2,8 @@
   "admin/checkout-ui.navigation.title": "admin/checkout-ui.navigation.title",
   "admin/checkout-ui.title": "admin/checkout-ui.title",
   "admin/checkout-ui.update-warning": "admin/checkout-ui.update-warning",
+  "admin/checkout-ui.permission-warning": "admin/checkout-ui.permission-warning",
+  "admin/checkout-ui.permission-tooltip": "admin/checkout-ui.permission-tooltip",
   "admin/checkout-ui.tab.layout": "admin/checkout-ui.tab.layout",
   "admin/checkout-ui.tab.colors": "admin/checkout-ui.tab.colors",
   "admin/checkout-ui.tab.javascript": "admin/checkout-ui.tab.javascript",

messages/en.json

@@ -1,6 +1,8 @@
 {
   "admin/checkout-ui.title": "Checkout UI Custom",
   "admin/checkout-ui.update-warning": "This app has been updated. Please click PUBLISH to apply the latest fixes to your checkout.",
+  "admin/checkout-ui.permission-warning":"You have no permission to publish", 
+  "admin/checkout-ui.permission-tooltip":"License role is 'SaveOrderFormConfiguration'", 
   "admin/checkout-ui.navigation.title": "Checkout UI Custom",
   "admin/checkout-ui.tab.layout": "Layout",
   "admin/checkout-ui.tab.colors": "Colors",

messages/pt.json

@@ -1,6 +1,8 @@
 {
   "admin/checkout-ui.title": "Interface personalizada do checkout",
   "admin/checkout-ui.update-warning": "Este app foi atualizado. Clique em PUBLICAR para aplicar as últimas correções ao seu checkout.",
+  "admin/checkout-ui.permission-warning":"Você não tem permissão para publicar", 
+  "admin/checkout-ui.permission-tooltip":"A licença chave é 'SaveOrderFormConfiguration'", 
   "admin/checkout-ui.navigation.title": "Interface personalizada do checkout",
   "admin/checkout-ui.tab.layout": "Interface",
   "admin/checkout-ui.tab.colors": "Cores",

node/graphql/index.ts

@@ -8,6 +8,7 @@ import { getCountryRules } from '../middlewares/getCountryRules'
 import { holidays } from '../middlewares/holidays'
 
 import { authCheck } from './authcheck'
+import { validateAdminToken } from './helper'
 
 
 const SCHEMA_VERSION = 'v0.1.3'
@@ -237,6 +238,23 @@ export const resolvers = {
 
       return data
     },
+    getPermissions: async (_: any, __: any, ctx: any) => {
+
+      const cookie = ctx.headers?.cookie
+
+      const vtexCredentials: any = cookie
+        ? cookie
+            .split('; ')
+            .find((cookie: string) => cookie.startsWith('VtexIdclientAutCookie='))
+            ?.split('=')[1] ?? ''
+        : '';
+
+      const permission = await validateAdminToken(ctx, vtexCredentials)
+      
+      return {
+        access: permission.hasValidAdminRole
+      }
+    },
     getById: async (_: any, params: any, ctx: any) => {
       const {
         clients: { masterdata },

react/Admin.tsx

@@ -18,6 +18,9 @@ import {
   IconDeny,
   ModalDialog,
   Progress,
+  Tooltip,
+  Tag,
+  IconWarning
 } from 'vtex.styleguide'
 import { useRuntime } from 'vtex.render-runtime'
 import sessionQuery from 'vtex.store-resources/QuerySession'
@@ -30,6 +33,8 @@ import History from './components/History'
 import saveMutation from './mutations/saveConfiguration.gql'
 import GET_LAST from './queries/getLast.gql'
 import GET_CONFIG from './queries/getConfig.gql'
+import getUserPermissions from './queries/getPermissions.gql'
+
 
 const messages = defineMessages({
   title: {
@@ -93,6 +98,9 @@ const Admin: FC<any & WrappedComponentProps> = ({
 }: any) => {
   const { workspace, production } = useRuntime()
 
+
+  const { data : permission } = useQuery(getUserPermissions)
+
   const [state, setState] = useState<any>({
     ...defaultConfiguration,
     currentTab: 0,
@@ -284,7 +292,9 @@ const Admin: FC<any & WrappedComponentProps> = ({
               <div className="ma3">
                 <Button
                   variation="primary"
-                  disabled={loadingLast}
+                  disabled={
+                    permission?.getPermissions?.access ? loadingLast : true
+                  }
                   onClick={() => {
                     handlePublish()
                   }}
@@ -293,6 +303,22 @@ const Admin: FC<any & WrappedComponentProps> = ({
                 </Button>
               </div>
             </div>
+
+            {permission && !permission?.getPermissions?.access && (
+
+              <div className="cb ma3">
+              <Tag type="warning" variation="low">
+                <FormattedMessage id="admin/checkout-ui.permission-warning" />
+                <Tooltip label={<FormattedMessage id="admin/checkout-ui.permission-tooltip" />}>
+                  <span className="ml3 pointer">
+                    <IconWarning />
+                  </span>
+                </Tooltip>
+              </Tag>
+              </div>
+
+            )}
+            
           </span>
         </PageHeader>
       }

react/queries/getPermissions.gql

@@ -0,0 +1,5 @@
+query getUserPermissions {
+  getPermissions {
+    access
+  }
+}