[DOP-16647] Add Github actions (#15)

* [DOP-16647] Add Github actions

.github/workflows/docker_image.yml

@@ -0,0 +1,71 @@
+name: Docker image
+
+on:
+    push:
+        branches:
+            - develop
+        tags:
+            - "[0-9]+.[0-9]+.[0-9]+"
+    workflow_dispatch:
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    release:
+        name: Build & push backend image to Dockerhub
+        runs-on: ubuntu-latest
+        if: github.repository == 'MobileTeleSystems/syncmaster-ui' # prevent running on forks
+
+        steps:
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v3
+
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3
+
+            - name: Login to Docker Hub
+              uses: docker/login-action@v3
+              with:
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Set tag
+              id: set_tag
+              run: |
+                  if [[ "${{ github.ref_type }}" == "branch" && "${{ github.ref_name }}" == "develop" ]]; then
+                    echo "TAG=mtsrus/syncmaster-ui:develop" >> $GITHUB_ENV
+                  elif [[ "${{ github.ref_type }}" == "tag" ]]; then
+                    echo "TAG=mtsrus/syncmaster-ui:latest,mtsrus/syncmaster-ui:${{ github.ref_name }}" >> $GITHUB_ENV
+                  fi
+
+            - name: Build UI image
+              uses: docker/build-push-action@v6
+              with:
+                  tags: ${{ env.TAG }}
+                  context: .
+                  target: prod
+                  file: Dockerfile
+                  pull: true
+                  push: true
+                  cache-to: type=inline
+                  cache-from: mtsrus/syncmaster-ui:develop
+                  platforms: |
+                      linux/amd64
+                      linux/arm64/v8
+                  provenance: mode=max
+
+            - name: Update DockerHub Description
+              uses: peter-evans/dockerhub-description@v4
+              if: github.ref_type == 'tag'
+              with:
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
+                  # this requires token with read+write+delete permissions. read+write is not enough!
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
+                  repository: mtsrus/syncmaster-ui
+                  short-description: ${{ github.event.repository.description }}
+                  enable-url-completion: true

.github/workflows/linters.yml

@@ -0,0 +1,37 @@
+name: Code analysis
+
+on:
+    push:
+        branches:
+            - develop
+    pull_request:
+        branches-ignore:
+            - master
+    workflow_dispatch:
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    linters:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Install modules
+              run: npm ci
+
+            - name: Cache modules
+              uses: actions/cache@v4
+              with:
+                  path: ./node_modules
+                  key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+                  restore-keys: |
+                      ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+                      ${{ runner.os }}-npm-
+
+            - name: Run ESLint
+              run: npx eslint .
+
+            - name: Run Prettier
+              run: npx prettier . --check

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "tabWidth": 4,
-  "useTabs": false,
-  "printWidth": 80
+    "tabWidth": 4,
+    "useTabs": false,
+    "printWidth": 80
 }

README.md

@@ -3,36 +3,37 @@
 This interface is designed to work with the SyncMaster service.
 This interface contains 4 menu sections: Transfers, Connections, Queues, Groups.
 
-
 To explore the source code, start with [src/App.tsx](https://github.com/MobileTeleSystems/syncmaster-ui/blob/develop/src/App.tsx).
 
-## How to run
+# How to run
 
 After having cloned the SyncMaster repository, run the following commands at the root directory:
 
 ```sh
-npm install --global yarn
-
-yarn install
-
-yarn build
-
-yarn dev
+    npm install --global yarn
+    yarn install
+    yarn build
+    yarn dev
 ```
-These commands will install dependencies and launch the dev server, by going to localhost:3000 you can go to the SyncMaster_UI interface.
 
-## How to format code
+These commands will install dependencies and launch the dev server, by going to localhost:3000 you can go to the Syncmaster UI interface.
+
+# How to format code
 
 Run the following command at the root directory:
 
 ```sh
-npm run prettier-format
+    npm run prettier-format
 ```
 
-## How to run linters
+# How to run linters
 
 Run the following command at the root directory:
 
 ```sh
-npx eslint --fix
-```
+    npx eslint --fix
+```
+
+# Install pre-commit hooks
+
+Follow the instructions [here](https://prettier.io/docs/en/install).

docker-compose.yml

@@ -1,11 +1,11 @@
 version: "3.8"
 services:
     syncmaster-ui:
-        image: syncmaster_ui
+        image: mtsrus/syncmaster-ui
         build:
             dockerfile: Dockerfile
             context: .
             network: host
             target: prod
         ports:
-            - 3000:3000
+            - 3000:3000

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
@@ -55,7 +55,7 @@
             .loader:before,
             .loader:after {
                 position: absolute;
-                content: '';
+                content: "";
             }
 
             .loader:before {
@@ -111,10 +111,22 @@
             href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
             rel="stylesheet"
         />
-        <link href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;900&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap" rel="stylesheet">
+        <link
+            href="https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;700&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Gabarito:wght@500;600;700;900&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap"
+            rel="stylesheet"
+        />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500;600;700&display=swap"
+            rel="stylesheet"
+        />
     </head>
 
     <body>

index.tsx

@@ -1,8 +1,8 @@
-import 'proxy-polyfill';
+import "proxy-polyfill";
 
-import * as React from 'react';
-import ReactDOM from 'react-dom';
+import * as React from "react";
+import ReactDOM from "react-dom";
 
-import App from './src/App';
+import App from "./src/App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"));