Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Deleted user
0 / 0 points
Next:
badges earned

Your Points Tracker
Challenges
Leaderboard
  • Global
  • Feed

Badge for your thoughts?

You're enrolled in our new beta rewards program. Join our group to get the inside scoop and share your feedback.

Join group
Recognition
Give the gift of kudos
You have 0 kudos available to give
Who do you want to recognize?
Why do you want to recognize them?
Kudos
Great job appreciating your peers!
Check back soon to give more kudos.

Past Kudos Given
No kudos given
You haven't given any kudos yet. Share the love above and you'll see it here.

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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

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:

previmage.png

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

Screenshot 2021-05-09 at 07.32.23.png

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:

Screenshot 2021-05-09 at 07.37.39.png

Frontend

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

Screenshot 2021-05-09 at 07.39.25.png

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:

Screenshot 2021-05-09 at 07.32.23.png

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.

2 comments

G subramanyam Community Leader Jun 02, 2021

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

Mohammed Amine Community Leader Jun 04, 2021

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

Comment

Log in or Sign up to comment
TAGS
Community showcase
Published in Marketplace Apps & Integrations

New cloud apps roundup - June 2021

Since our last roundup in April, Atlassian's Marketplace Partners have added over 100 new cloud apps to the Atlassian Marketplace to help your teams work more efficiently. Let’s take a quick look a...

374 views 5 12
Read article

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you