atlassian-connect-express 4: typescript, react and atlaskit

[#1]

Hello!

In this article we will add Typescript, React and Atlaskit to our atlassian-connect-express app.

Our code will be based on this article.

You can find the source code for this article here.

You can find the video for this article here.

In the previous articles we had the following output for our Example Page menu:

In this article we will add Typescript, React and Atlaskit to the output and the page will look like this:

To create this output we will move all files which we have to the backend folder and create a new folder called frontend. As a result our app source code will look like this:

Frontend

Now let’s see how our frontend folder looks like:

Let’s start to explore the files.

frontend/package.json

This file contains typescript, astlaskit, react, eslint and webpack dependencies for our project.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@atlaskit/section-message": "^5.2.0",
    "@atlaskit/page": "^12.0.6",
    "moment": "^2.29.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-scripts": "4.0.3",
    "webpack": "^4.44.2",
    "styled-components": "^3.2.6"
  },
  "scripts": {
    "build": "webpack --mode production",
    "prodbuild": "webpack --mode production --no-watch",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/** --fix"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-flow": "^7.13.13",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.8",
    "@types/react": "^17.0.5",
    "@types/react-dom": "^17.0.3",
    "babel-loader": "^8.2.2",
    "eslint": "^7.26.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "@typescript-eslint/eslint-plugin": "^4.22.1",
    "@typescript-eslint/parser": "^4.22.1",
    "fibers": "^5.0.0",
    "node-sass": "^6.0.0",
    "sass": "^1.32.12",
    "ts-loader": "^8.2.0",
    "typescript": "^4.2.4",
    "webpack-cli": "^4.7.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

frontend/.babelrc

This file contains settings for Babel which is a javascript compiler. Babel will compile our code in typescript, jsx to js code.

{
  "presets": ["@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
    "@babel/preset-flow"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import"

  ]
}

frontend/webpack.config.js

This file contains settings from Webpack. Webpack will bundle all files created by babel to a bundle file which we will add to our Handlebar template on the backend.

var path = require('path');


module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ["babel-loader"],
      },
      {
          test: /\.(ts|tsx)$/,
          exclude: /node_modules/,
          use: ["ts-loader"],
      },
      ],
    },
    watch: (process.argv.indexOf('--no-watch') > -1) ? false : true,
    entry: {
       'example.page': path.resolve('./src/ExamplePage.tsx'),
    },
    output: {
        filename: 'bundled.[name].js',
        path: path.resolve("../backend/public/dist")
    }
};

As you can see we use ts-loader to convert typescript files to js. Then we store the js bundle in the ../backend/public/dist folder and name the file as bundled.example.page.js

frontend/.eslintrc.json

This file contains settings for Eslint. Eslint statically analyzes our code and outputs problems which were found.

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
        "no-use-before-define": "off",
        "react/prop-types": "off",
        "no-shadow": "off",
        "no-nested-ternary": "off",
        "react/no-unescaped-entities": "off",
        "prefer-destructuring": ["error", {"object": true, "array": false}],
        "no-param-reassign": "off"
    }
    
}

As you can see I added a typescript parser and a typescript plugin which will let eslint to analyze typescript code.

frontend/tsconfig.json

This file contains settings for analyzing typescript

{
    "compilerOptions": {
        "target": "es5",
        "lib": [
            "dom",
            "dom.iterable",
            "esnext"
        ],
        "noImplicitAny": true,
        "allowJs": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noFallthroughCasesInSwitch": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": "react-jsx",
        "strictNullChecks": false
    },
    "include": [
        "src"
    ]
}

That is all for configuration files. Now let’s have a look at the code for our page.

frontend/src/ExamplePage.tsx

import React, { useState, useLayoutEffect } from 'react';
import ReactDOM from 'react-dom';
import SectionMessage from '@atlaskit/section-message';
import Page, { Grid, GridColumn } from '@atlaskit/page';
import styled from 'styled-components';

const ContainerWrapper = styled.div`
  min-width: 780px;
  max-width: 780px;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: block;
`;

interface IProps {
  displayName: string
  repoPath: string
}
declare let AP: any;

export default function ExamplePage(Props: IProps) {
  const { displayName, repoPath } = Props;
  const [apDisplayName, setApDisplayName] = useState('');
  useLayoutEffect(() => {
    AP.require('request', (request: any) => {
      request({
        url: '/2.0/user/',
        success(data: any) {
          setApDisplayName(data.display_name);
        },
      });
    });
  });
  return (
    <ContainerWrapper>
      <SectionMessage
        title="Repository Information"
      >
        <Page>
          <Grid>
            <GridColumn medium={7}>Add-on user (retrieved via server-to-server REST):</GridColumn>
            <GridColumn medium={5}><b>{displayName}</b></GridColumn>
          </Grid>
          <Grid>
            <GridColumn medium={7}>Your name (retrieved via AP.request()):</GridColumn>
            <GridColumn medium={5}><b>{apDisplayName}</b></GridColumn>
          </Grid>
          <Grid>
            <GridColumn medium={7}>This repository:</GridColumn>
            <GridColumn medium={5}><b>{repoPath}</b></GridColumn>
          </Grid>
          <Grid>
            <GridColumn medium={7}>Page visits:</GridColumn>
            <GridColumn medium={5}><b>No longer supported</b></GridColumn>
          </Grid>
        </Page>
      </SectionMessage>
    </ContainerWrapper>
  );
}

window.addEventListener('load', () => {
  const wrapper = document.getElementById('container');
  const displayName = (document.getElementById('displayName') as HTMLInputElement).value;
  const repoPath = (document.getElementById('repoPath') as HTMLInputElement).value;
  ReactDOM.render(
    <ExamplePage
      displayName={displayName}
      repoPath={repoPath}
    />,
    wrapper,
  );
});

This file is straightforward. First, I read parameters provided in the backend/views/connect-example.hbs file in the hidden field group. And call the ExamplePage function to show the desired output.

In the ExamplePage function I query the 2.0/user endpoint to get the username of the current user and save the value in the apDisplayName state variable.

Then I provide html output using Page formatting.

backend

In the backend I changed the backend/views/layout.hbs file. I deleted calls to backend/public/js/addon.js and backend/public/css/addon.css and changed backend/views/connect-example.hbs to this one:

{{!< layout}}
<script type="text/javascript" src="/dist/bundled.example.page.js"></script>
<div id="maincontainer">
    <div id="container" />
</div>
<div class="field-group hidden">
    <input class="text" type="text" id="displayName" name="displayName" value="{{displayName}}">
    <input class="text" type="text" id="repoPath" name="repoPath" value="{{repoPath}}">
</div>

As you can see I call backend/public/dist/bundled.example.page.js to output our React code, create the container for React code and create a hidden div to store parameters which I get from Handlebars.

That is all. Now if I run my app I will get the desired output:

By the way you can notice that Add-on user (retrieved via server-to-server REST) is different with the Your name (retrieved via AP.request()). If we explore the code we will see that AP.request() calls the /2.0/user endpoint and the backend calls the /2.0/user endpoint but the output is different. It happens because I installed our app under a team’s workspace that is why when I call /2.0/user in the backend I get the username of the workspace, but when I call /2.0/user in the frontend with AP.request() I get the username of the current user, not the workspace.

That is all for the article. See you next time.

[G subramanyam]

Good information and what's more interesting is the screenshots with navigation, thank you @Alexey Matveev 

[M Amine]

Great article it's very interesting, thank you @Alexey Matveev