DEV Community: Srikanth Kyatham

How to add custom org and role in grafana with AWS cognito as oauth provider

Srikanth Kyatham — Mon, 31 Mar 2025 18:02:19 +0000

AWS Cognito + Grafana

Idea

To be able to configure the user to a given organisation.
In AWS cognito there are users and groups.
If a user is added to a group based on the group which would be of format (GRAFANA_{orgName}_{role}), where the orgName is organisation name in grafana, then user to would be added to respective organisation on successful oauth sign in.
In order that to happen, we need to add pre token generation lambda, which would add custom claims to the id token.
Grafana needs to configure role and org attributes to in order extract the role and orgs and assign the user to correct organisations with the correct role.

Grafana role and org attributes

role_attribute_path - the documentation is quite straight forward, in our case we want to extract the role from custom_role in the id_token response.
org mapping - this was a bit tricky, we need to configure two attributes
- org_attribute_path
- org_mapping
in our case we want the users to be assigned to organisations found in the org_attribute_path. In order that to happen
- org_mapping needs to be updated, when an organisation is created in grafana. Meaning
- Lets say that the org_mapping is

org_mapping = org1:2:Viewer

Now we have created a new organisation org2, then the org_mapping needs to be updated as

org_mapping = org1:2:Viewer,org2:3:Viewer

where
org1 is the organisation name
2 is the organisation id
You can find these details in the grafana>Administration>general>organisations

Grafana configuration

The following attributes needs to updated
- role, org mapping attributes
- clientId
- clientSecret
- authUrl
- tokenUrl
- apiUrl
Domain url could be fetched from AWS cognito like shown in the figure

in custom.ini, *.ini

[log]
level = debug
[users]
auto_assign_org = true
[auth.basic_auth]
enabled = debug
[auth.generic_oauth]
client_id = <client_id>
client_secret = <client_secret>
scopes = <scopes>
auth_url = <domain_url>/oauth2/authorize
token_url = <domain_url>/oauth2/token
api_url = <domain_url>/oauth2/userInfo 
signout_redirect_url = <domain_url>/logout?client_id=<client_id>&logout_uri=<logout_url>
role_attribute_path = ("custom_role" || contains([*], 'ADMIN') && 'Admin') || ("custom_role" || contains([*], 'EDITOR') && 'Editor') || 'Viewer'
role_attribute_strict = true
org_attribute_path = "custom_orgs"

if you are using docker-compose then the environment variables would be.

The variables

example docker-compose.yml

services:
  grafana:
    image: grafana/grafana-oss
    container_name: grafana
    restart: unless-stopped
    environment:
      - GF_AUTH_GENERIC_OAUTH_ENABLED=true
      - GF_AUTH_GENERIC_OAUTH_CLIENT_ID=<client_id>
      - GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET=<client_secret>
      - GF_AUTH_GENERIC_OAUTH_AUTH_URL=<domain_url>/oauth2/authorize
      - GF_AUTH_GENERIC_OAUTH_TOKEN_URL=<domain_url>/oauth2/token
      - GF_AUTH_GENERIC_OAUTH_API_URL=<domain_url>/oauth2/userInfo
      - GF_AUTH_GENERIC_OAUTH_API_URL=<domain_url>/logout?client_id=<client_id>&logout_uri=<logout_url>
      - GF_AUTH_GENERIC_OAUTH_SCOPES=<scopes>
      - GF_AUTH_GENERIC_OAUTH_ROLE_ATTRIBUTE_PATH=("custom_role" || contains([*], 'ADMIN') && 'Admin') || ("custom_role" || contains([*], 'EDITOR') && 'Editor') || 'Viewer'
      - GF_AUTH_GENERIC_OAUTH_ROLE_ATTRIBUTE_STRICT=true
      - GF_AUTH_GENERIC_OAUTH_ORG_ATTRIBUTE_PATH="custom_orgs"
      - GF_LOG_LEVEL=debug
      - GF_USERS_AUTO_ASSIGN_ORG=true
      - GF_AUTH_BASIC_ENABLED=true

AWS Lambda

AWS lambda - Purpose is to populate the custom claims, which in our case are the organisation (custom_orgs) and role of the user (custom_role), which would be extract in the grafana upon succesfull oauth
- In order to add pre auth token lambda we need to click on the extensions in the cognito user pool

Add pre token generation lambda options should be as shown in the figure
- Trigger type - Authentication
- Authentication - Pre token generation trigger
- Trigger event version - Basic features + access token customization atleast
- Select the lambda to be added

code for the lambda is

interface Event {
    request: {
        groupConfiguration: {
            groupsToOverride: string[]
        }
    }
    response: {
        claimsAndScopeOverrideDetails?: {
            idTokenGeneration?: {
                claimsToAddOrOverride?: {
                    custom_orgs: string[]
                    custom_role: string | null
                }
            }
        }
    }
}

export async function handler(event: Event) {
    // Log the event for debugging
    const cognitoGroups = event.request.groupConfiguration.groupsToOverride
    // Extract groups from Cognite or other attribute sources
    // For example, if you have groups stored in a cognito:groups attribute
    const groups = cognitoGroups

    // Filter for Grafana groups and format them
    const grafanaGroups = groups.filter((group: string) => group.startsWith("GRAFANA_"))

    const customOrgs = grafanaGroups.map((group: string) => group.split("_")[1])

    const customRole =
        grafanaGroups.length > 0 && grafanaGroups[0].split("_").length > 2 ? grafanaGroups[0].split("_")[2] : null



    // Add the custom claim to the ID token
    event.response = {
        claimsAndScopeOverrideDetails: {
            idTokenGeneration: {
                claimsToAddOrOverride: {
                    custom_org: customOrgs,
                    custom_role: customRole,
                },
            },
        },
    }

    return event
}

When the user is created in the AWS Cognito
- Create AWS cognito user
- Create AWS cognito group GRAFANA_{ORGNAME}_{ROLE}
- Assign the cogito user to the group
- Create the grafana org - POST /org

const grafanaUrl = "http://localhost:3000"

const orgsEndPoint = "/api/orgs"
const orgUrl = grafanaUrl + orgsEndPoint
const clientId = "you_client_id"
const clientSecret = "you_client_secret"

function basicAuthHeader(user, pwd) {
    const combo = `${user}:${pwd}`
    const base64String = Buffer.from(combo).toString('base64');
    const header = `Basic ${base64String}`
    return header
}

function commonHeaders() {
    const headers = {
        'authorization': basicAuthHeader(grafanaUser, grafanaPwd)
    }
    return headers
}

const commonHeader = commonHeaders()


async function createOrg(orgName) {
    const body = { "name": orgName }
    const url = orgUrl
    const response = await fetch(url, {
        method: 'POST',
        headers: {
            ...commonHeader,
            'User-Agent': 'undici-stream-example',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(body),
    });
    const data = await response.json()
    return data
}

Update the sso-settings/generic_oauth, orgMapping

async function getSsoSettings() {
    const url = ""
    const options = { method: 'GET', headers: commonHeader }
    const response = await fetch(url, options);

    const data = await response.json();
    return data
}

async function updateSsoSettings(body) {
    const url = `${grafanaUrl}/api/v1/sso-settings/generic_oauth`
    const response = await fetch(url, {
        method: 'PUT',
        headers: {
            ...commonHeader,
            'User-Agent': 'undici-stream-example',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(body),
    });
    const data = await response.json()
    return data
}

async function updateOrgMapping(newOrgName, newOrgId) {
   const ssoSettings = await getSsoSettings()
   const genericProvider = ssoSettings.filter(setting => setting["provider"] === "generic_oauth")
   const genericOauthSettings = genericProvider["settings"]
   const orgMapping = JSON.parse(genericOauthSettings["orgMapping"])
   const updatedOrgMapping = [...orgMapping, `${newOrgName}:${newOrgId}:Viewer`]
   const putBody = {
    "settings": {
        "clientId": clientId,
        "authUrl": `${DomainUrl}/oauth2/authorize`,
        "tokenUrl": `${DomainUrl}/oauth2/token`,
        "orgMapping": updatedOrgMapping
      }
    }
   await updateSsoSettings(putBody)
}

Debugging with breakpoints in ExUnit

Srikanth Kyatham — Wed, 28 Feb 2024 13:35:18 +0000

The following is a demonstration on how to debug using debugger. Of course, IO.inspect works. Where it does not.

defmodule Math do
  def add(a, b) do
    a + b
  end
end

defmodule MathTest do

  # timeout: :infinity is needed as the exunit timeouts around 3 seconds 
  @tag timeout: :infinity
  test ~c"test add" do
    :debugger.start()
    :int.ni(Math)
    # break_in take module, function, arity
    # module - Math
    # function - add
    # arity - 2 no of parameters
    :int.break_in(Math, :add, 2)
  end
end

Migrating to Create react app v5, single bundle with craco and fast-refresh disable

Srikanth Kyatham — Tue, 23 Jan 2024 07:52:33 +0000

Until recently we have been working on node v16 and react-scripts v4. Our pipelines have migrated to v20 and we were forced to migrate. Due to our internal application framework limitations, our app cannot have more the one chunk.

We had the following problems

limiting chunks to one
skipping the limitation that all modules being imported need to have an file extension, like for example

// Earlier it was
import add from "./add"
// Now the expected is
import add from "./add.js"

After googling and stack overflow, found that we could modify the web pack config without eject, using craco.

npm i -D @craco/craco

Respective config file is, which solve the above problems is

const webpack = require("webpack");

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.optimize.LimitChunkCountPlugin({
          maxChunks: 1,
        }),
      ],
      skipEnvChecks: true,
      skipEnvCheck: true,
    },
    configure: {
      module: {
        rules: [
          {
            test: /\.m?js$/,
            resolve: {
              fullySpecified: false,
            },
          },
        ],
      },
    },
  },
};

Respective package.json changes are

"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test:build": "craco build"
+. "test:build": "cross-env-shell NODE_ENV=test craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}

All was good, then came the next issue. Building for test enviroment. When I tried for it I have faced the following issue

Error: [BABEL] /Users/srikanthkyatham/Projects/ajv/appointmentclerkapp/app/appointmentclerkapp-frontend/js/src/index.tsx: React Refresh Babel transform should only be enabled in development environment. Instead, the environment is: "production". If you want to override this check, pass {skipEnvCheck: true} as plugin options. (While processing: "/Users/srikanthkyatham/Projects/ajv/appointmentclerkapp/app/appointmentclerkapp-frontend/js/node_modules/react-refresh/babel.js")
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at Generator.next (<anonymous>)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor.next (<anonymous>)
    at loadPluginDescriptors.next (<anonymous>)
    at Generator.next (<anonymous>)
    at loadFullConfig.next (<anonymous>)
    at transform.next (<anonymous>)

Solution for that is add env variable FAST_REFRESH=false

"scripts": {
  "test:build": "cross-env-shell NODE_ENV=test FAST_REFRESH=false craco build"
}

Rescript Http Error Response

Srikanth Kyatham — Sat, 12 Aug 2023 18:37:50 +0000

Have you ever wondered how would you get Http Error Response out of the Js.Exn.t. Js.Exn.t is intentionally opaque. We need to cast to the appropriate object type. In this particular case we are trying to get Http Error response

module Response = {
  type t = {
    status: int
  }
}
@get external getResponse: Js.Exn.t => option<Response.t> = "response"
let handleError = (error: Js.Exn.t) => {
  let response = getResponse(error)
  switch response {
    | Some(response) => Js.log2("response status", response.status)
    | None => Js.log2("no response available")
  }
}

exception MyError(string)


// Now assume that we are trying to fetch 
open Promise
fetch("")
->then(todos => resolve(todos))
->catch(error => {
  handleError(error)
let err = switch e {
  | MyError(str) => "found MyError: " ++ str
  | _ => "Some unknown error"
  }

  // Here we are using the same type (`t<result>`) as in the previous `then` call
  Error(err)->resolve
})

Hope you found it useful.

Mock React hooks based on environment

Srikanth Kyatham — Mon, 13 Mar 2023 07:41:42 +0000

Recently I had an issue that there exists on React hook which was available only in the production environment since our application is being loaded inside other framework, which provided it.

Basic issue is you cannot place the hook inside a condition.

I needed to mock the hook, I have searched on the web and found hook mocking using jest.

Hence the following approach.

Let says my hook is useServerData very unintuitive. But for this purpose its fine.

I have created a mock hook, useServerDataMock in my mock file.

useServerData would given an object

{
  userId: string,
  meta: any
}

In my mock.ts

const useServerDataMock = () => {
  return {
    userId: "testId",
    meta: {}
  }
}

Now how to use mock hook based on Dev or Prod environment

interface ContainerProps {
  serverData: ServerData
}
const Container = (props: ContainerProps) => {
  ..
}
const ProdContainer = () => {
  const serverData = useServerData()
  return <Container serverData={serverData} />
}
const DevContainer = () => {
  const serverData = useServerDataMock()
  return <Container serverData={serverData} />
}

const App = () => {
  if (process.env.NODE_ENV === "production") {
    return <ProdContainer />
  } else {
    return <DevContainer />
  }
}

Hope this helps someone facing similar issue.

Rescript React useStateMachine without useEffect usage

Srikanth Kyatham — Mon, 23 Jan 2023 12:47:51 +0000

Lately I have been using too much useEffect, its becoming hard to track the state. After seeing David Piano (author of XState) I have been thinking on how to do it in Rescript.

I have been using React.useReducer quite extensively. I have come up with a hook which combines React.useReducer and React.useEffect named it un-intuitively as useStateMachine.

Let's see how useStateMachine is

structured
how to structure your state
how to use it in the project
how to trigger side effects as well as part of the state actions

State and actions

type effectulActions = 
| #Network(networkReducer)
| #Db(dbReducer)
| #Storage(storageReducer)

actions with some tags(network, database, storage) would trigger the functions in the useEffect

If the actions are part of this then trigger the effectful action in the useEffect

Thus shielding the complexity from the react component
How the dependencies should be added to the useEffect ?
How the state should be part of the useEffect dependencies ?
The above are the outstanding questions for now.
For starters we can add the whole state to the dependencies.

How the action should translate to sideEffect triggering function call ?

How it should reflect/update in the state ?

This is a basic structure I could come up with.

  let reducer = (state, action) => {
    switch action {
    | #Network(networkReducer) => {
      networkReducer(state, action)
    } 
  }

  let sideEffectReducer = (state, action) => {
  }

useStateMachine hook

type stateMachineState<'state, 'effectfulAction> = {
  state: 'state,
  effectfulAction: option<'effectfulAction>,
}

type stateMachineActions<'state, 'action, 'effectfulAction> =
  | StateWithoutSideEffect('action)
  | StateAfterSideEffect(stateMachineState<'state, 'effectfulAction>)

type reducerType<'state, 'action, 'effectfulAction> = (
  stateMachineState<'state, 'effectfulAction>,
  stateMachineActions<'state, 'action, 'effectfulAction>,
) => stateMachineState<'state, 'effectfulAction>

type sideEffectReducerType<'state, 'effectfulAction> = (
  stateMachineState<'state, 'effectfulAction>,
  'effectfulAction,
) => Js.Promise.t<stateMachineState<'state, 'effectfulAction>>

let useStateMachine = (
  reducer: reducerType<'state, 'action, 'effectfulAction>,
  sideEffectReducer: sideEffectReducerType<'state, 'effectfulAction>,
  initialState: stateMachineState<'state, 'effectfulAction>,
) => {
  let (stateMachineState, dispatch) = React.useReducer(reducer, initialState)
  // This does not handle the clean up
  React.useEffect3(() => {
    switch stateMachineState.effectfulAction {
    | Some(effectfulAction) => {
        open Promise
        sideEffectReducer(stateMachineState, effectfulAction)
        ->then(newState => {
          dispatch(StateAfterSideEffect(newState))
          resolve()
        })
        ->catch(error => {
          Js.log2("error", error)
          resolve()
        })
        ->ignore
      }

    | None => ()
    }
    None
  }, (sideEffectReducer, stateMachineState, dispatch))

  (stateMachineState.state, dispatch)
}

A lot going on in the above code. Lets break down

type stateMachineState<'state, 'effectfulAction> = {
  state: 'state,
  effectfulAction: option<'effectfulAction>,
}

stateMachine state type is parameterised over state type and effectfulAction which is optional. The component using this state would pass the state and type of the sideEffectul actions it intends to deal with.

type stateMachineActions<'state, 'action, 'effectfulAction> =
  | StateWithoutSideEffect('action)
  | StateAfterSideEffect(stateMachineState<'state, 'effectfulAction>)

stateMachine actions are parameterised our the state, action and effectulActions. There are two states this statemachine could be in (this was the simplest I could make, there could be more extensions for now this would suffice).

Whenever there are an action dispatch then StateWithoutSideEffect action is dispatched in the reducer case could decide whether there could be any effectulActions that needs to be done based on the given case. If so then state.effectulAction is populated else it is None.

useStateMachine hook explanation. Whenever there effectulAction is populated then sideEffectReducer is invoke with appropriate parameters inside the useEffect hook. Thus all sideEffects happen in the sideEffectReducer inside the useEffect. Thus we could keep our code clean of the useEffect as much as possible.

Usage of the useStateMachine

type action = INFO(array<string>)

type state = {options: array<string>}
type rec sideEffectActions =
  INFO_UPDATE(StateMachine.stateMachineState<state, sideEffectActions>, string)

let getInitialState = () => {
  let state = {
    options: [],
  }

  let stateMachineState: StateMachine.stateMachineState<state, sideEffectActions> = {
    state,
    effectfulAction: None,
  }
  stateMachineState
}

let reducer = (state, action) => {
  switch action {
  | INFO(_) => state
  }
}

let sideEffectReducer = (
  state: StateMachine.stateMachineState<state, sideEffectActions>,
  action: sideEffectActions,
): Js.Promise.t<StateMachine.stateMachineState<state, sideEffectActions>> => {
  open Promise

  switch action {
  | INFO_UPDATE(_state, _str) =>
    // side effectul action
    resolve(state)
  }
}

let stateMachineReducer = (
  state: StateMachine.stateMachineState<state, sideEffectActions>,
  action: StateMachine.stateMachineActions<state, action, sideEffectActions>,
): StateMachine.stateMachineState<'state, 'effectfulAction> => {
  switch action {
  | StateWithoutSideEffect(action) =>
    switch action {
    | INFO(_options) => // every state change should trigger the debounce api call
      {
        ...state,
        effectfulAction: Some(INFO_UPDATE(state, "asd")),
      }
    }
  | _ => state
  }
}

How we solved Gnarly bug with React table + useGlobalFilter + useRowSelect

Srikanth Kyatham — Fri, 13 Jan 2023 09:42:30 +0000

Application

We have react table showing data related to customers
We have external filters, to filter out customer based on a selected filter criteria

Usage which cause issue

Whenever the master checkbox is checked, we get the list of selected indices from the react table.
The selected indices are an array of strings like ["0", "1"..]
We parse the string to number and then iterate over given customers and filter the customer which match the indices given us
This was working fine till the global filter came in to play.

With Global filter

Lets say we have filter which filters the customers based on the age

let customers = [
  {
    name: "name1",
    age: 60,
  },
  {
    name: "name2",
    age: 20
  }
]

We have picked the age-group [0-20]
Since the external data has changed the globalFilter function is invoked and after the filter is applied the result would be

customers = [
  {
    name: "name2",
    age: 20
  }
]

Now if we select the master-checkbox of the react table, the selected indices returned is ["1"] not ["0"], this minor details caught us off guard. Meaning the selected customers is always based on the original data set which is fed to the react table.

Code sandbox link for the above code - https://codesandbox.io/s/unruffled-dubinsky-lrxixo?file=/src/App.js

Rescript bindings for Typescript union types

Srikanth Kyatham — Mon, 08 Aug 2022 12:51:17 +0000

Typescript has a beautiful concept of combining different types for a given interface attribute/variable/parameter etc.
Rescript is more strict you can have only one type for a given attribute/variable/parameter. So in this post, I would like show on how to create a union type in Rescript which would be accepted by typescript as well.

Let's assume we have a prop type, which accepts string | number.

interface Props {
  ...otherProps,
  badgeContent: string | number
}

In rescript side we have to come up with module which would wrap Number and String like this

@unboxed
type rec t = Any('a): t

module String_or_number: {
  type t
  type case =
    | Number(float)
    | String(string)
  let number: float => t
  let string: string => t
  let classify: t => case
} = {
  @unboxed
  type rec t = Any('a): t
  type case =
    | Number(float)
    | String(string)
  let number = (v: float) => Any(v)
  let string = (v: string) => Any(v)
  let classify = (Any(v): t): case =>
    if Js.typeof(v) == "number" {
      Number((Obj.magic(v): float))
    } else {
      String((Obj.magic(v): string))
    }
}

The usage of the String_or_number type

module Badge = {

  @genType.import("./Badge") @react.component
  external make: (
    ...,
    ~badgeContent: String_or_number.t=?,
  ) => React.element = "Badge"

In case we want to pass number to badgeContent then we use it as follows

<Badge badgeContent=String_or_number.number(1.0) />

Rescript bindings for JSX.IntrinsicElements prop type

Srikanth Kyatham — Thu, 04 Aug 2022 08:02:00 +0000

In our workplace the react library relies heavily on typescript. Lately certain props have a type
keyof JSX.IntrinsicElements

For example:

interface Props {
  ...,
  tagName?: keyof JSX.IntrinsicElements
}

Now how to pass this prop from the rescript side. After checking out the documentation https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements and type definitions in @types/react/index.d.ts, I came up with polymorphic variant which would solve prop type issue.

module JSX = {
  module IntrinsicElements = {
    type t = [
      | #a
      | #abbr
      | #address
      | #area
      | #article
      | #aside
      | #audio
      | #b
      | #base
      | #bdi
      | #bdo
      | #big
      | #blockquote
      | #body
      | #br
      | #button
      | #canvas
      | #caption
      | #cite
      | #code
      | #col
      | #colgroup
      | #data
      | #datalist
      | #dd
      | #del
      | #details
      | #dfn
      | #dialog
      | #div
      | #dl
      | #dt
      | #em
      | #embed
      | #fieldset
      | #figcaption
      | #figure
      | #footer
      | #form
      | #h1
      | #h2
      | #h3
      | #h4
      | #h5
      | #h6
      | #head
      | #header
      | #hgroup
      | #hr
      | #html
      | #i
      | #iframe
      | #img
      | #input
      | #ins
      | #kbd
      | #keygen
      | #label
      | #legend
      | #li
      | #link
      | #main
      | #map
      | #mark
      | #menu
      | #menuitem
      | #meta
      | #meter
      | #nav
      | #noindex
      | #noscript
      | #object
      | #ol
      | #optgroup
      | #option
      | #output
      | #p
      | #param
      | #picture
      | #pre
      | #progress
      | #q
      | #rp
      | #rt
      | #ruby
      | #s
      | #samp
      | #slot
      | #script
      | #section
      | #select
      | #small
      | #source
      | #span
      | #strong
      | #style
      | #sub
      | #summary
      | #sup
      | #table
      | #template
      | #tbody
      | #td
      | #textarea
      | #tfoot
      | #th
      | #thead
      | #time
      | #title
      | #tr
      | #track
      | #u
      | #ul
      | #var
      | #video
      | #wbr
      | #webview
      | #svg
      | #animate
      | #animateMotion
      | #animateTransform
      | #circle
      | #clipPath
      | #defs
      | #desc
      | #ellipse
      | #feBlend
      | #feColorMatrix
      | #feComponentTransfer
      | #feComposite
      | #feConvolveMatrix
      | #feDiffuseLighting
      | #feDisplacementMap
      | #feDistantLight
      | #feDropShadow
      | #feFlood
      | #feFuncA
      | #feFuncB
      | #feFuncG
      | #feFuncR
      | #feGaussianBlur
      | #feImage
      | #feMerge
      | #feMergeNode
      | #feMorphology
      | #feOffset
      | #fePointLight
      | #feSpecularLighting
      | #feSpotLight
      | #feTile
      | #feTurbulence
      | #filter
      | #foreignObject
      | #g
      | #image
      | #line
      | #linearGradient
      | #marker
      | #mask
      | #metadata
      | #mpath
      | #path
      | #pattern
      | #polygon
      | #polyline
      | #radialGradient
      | #rect
      | #stop
      | #"switch"
      | #symbol
      | #text
      | #textPath
      | #tspan
      | #use
      | #view
    ]
  }
}


module Tile = {
  @genType.import("./Tile") @react.component
  external make: (
    ~tagName: JSX.IntrinsicElements.t
  ) => React.element = "Tile"
}

This is working fine. If anyone has a better suggestion please comment.

Rescript React Error boundary usage

Srikanth Kyatham — Wed, 03 Aug 2022 21:09:56 +0000

I was trying to capture the react errors. I had to write the bindings for the ErrorBoundary and its usage is shown below.

The actual ErrorBoundary component is below

// ErrorBoundary.js
import React from "react";

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    //logErrorToMyService(error, errorInfo);
    console.log({ error, errorInfo });
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Bindings to the ErrorBoundary for Rescript.

// ReactErrorBoundary.res
@react.component @module("./ErrorBoundary.js")
external make: (
  ~children: React.element,
  ~onError: ('e, 'i) => unit=?,
  ~renderFallback: ('e, 'i) => React.element=?,
) => React.element = "ErrorBoundary"

Error component to show the react error

// Error.res
module Error = {
  @react.component
  let make = (~error) => {
    <div> {React.string(error)} </div>
  }
}

How to use ReactErrorBoundary in rescript

// ReactErrorBoundary usage
<ReactErrorBoundary fallback={params => <Error 
  error=params.error />}>
  <ComponentThrowingException />
</ReactErrorBoundary>

How to run Cypress tests in parallel with code example

Srikanth Kyatham — Wed, 03 Aug 2022 19:14:00 +0000

Lately we have been adding multiple cypress tests and the tests run have been taking more and more time on ci and local environments as the cypress spec files are run or executed sequentially.

Luckily we have organised our tests in different folders.
I wrote a small script which would spawn cypress run for different folders.

Here is the script

// run_test_in_parallel.js
const { exec } = require("child_process");
const util = require("util");
const execPromisified = util.promisify(exec);

const baseCommand = "npx cypress run --env coverage=false --spec ";

const specs = [
  "cypress/e2e/folder1/*.cy.*",
  "cypress/e2e/folder2/*.cy.*",
];

const runCypressSpec = async (command) => {
  try {
    const { stdout, stderr } = await execPromisified(command);
    console.log("stdout:", stdout);
    console.log("stderr:", stderr);
    return Promise.resolve();
  } catch (e) {
    console.error(e);
    return Promise.reject(e);
  }
};

const runAllTests = async () => {
  const promises = specs.map((spec) => {
    const specRunCommand = baseCommand + spec;
    return runCypressSpec(specRunCommand);
  });
  console.log("all spec runs started");
  try {
    console.time("all tests");
    // using Promise.all waiting for 
    // all successful execution of test cases 
    await Promise.all(promises);
    console.timeEnd("all tests");
    // Continuous Integration expects 0 for success case
    return 0;
  } catch (e) {
    console.error(e);
    // Continuous Integration expects non-zero for failure case
    return 255;
  }
};

runAllTests();

I have added a package.json script to run the above command

"scripts": {
  "test:e2e_run_parallel": "node ./location/of/run_test_in_parallel.js"
}

Hope this helps any one having the same issues.

Rescript React Lifting Component state

Srikanth Kyatham — Tue, 12 Oct 2021 19:20:18 +0000

Let's see how lift state in rescript

Let's assume there is button component which increments count like below

// button.res
type action =
    | Add

type state = {
  count: int
}

let reducer = (state, action) => {
    switch action {
        | Add => {count: state.count + 1}
    }
}

let getInitialState = () => {
    let initialState = {
       count: 0
    }
    initialState
}

let make = (state, dispatch) => {
    let onClick = () => {
        dispatch(Add)
    }

    <button onClick>{React.string("add")}</button>
}

Now we want to use the component in a parent component, which uses the component but also wants to store the state of the child in it. One of the way I figured is like below, in two steps

One of the parent action would be variant encapsulating the child action
dispatch which is passed to the child component here button would take the child action and encapsulate in the parent action and dispatch to the parent state

You can see the above steps in action below

// parent
type action = {
    | Text(string)
    | Button(Button.action)
}

type state = {
    text: string,
    buttonState: Button.state
}

let reducer = (state, action) => {
    switch action {
        | Text(text) => {...state, text: text}
        | Button(action) => 
            let {buttonState} = state
            let newButtonState = Button.reducer(buttonState, action)
            {...state, buttonState: newButtonState}
    }
}

let getInitialState = () => {
    let initialState = {
        text: "",
        buttonState: Button.getInitialState()
    }
    initialState
}


let make = () => {
   let {state, dispatch}  = React.useReducer(reducer, getInitialState())

    let childDispatch = (action: Button.action) => {
    dispatch(Button(action))
    }

    let onChange = () => {

    }

   <div>
    <TextInput onChange=onChange value=state.text />
    <Button state=state.buttonState dispatch=childDispatch />
   </div>
}

Hope this helps!