Merged PR 3: Add first pipeline build

Related work items: #2

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_NAME="Architecture Center - Sensedia"
+NEXT_PUBLIC_API_BACKEND="http://localhost/graphql"

.github/workflows/node.yaml

@@ -0,0 +1,24 @@
+name: Node.js CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm run build --if-present
+    - run: npm test
+      env:
+        CI: true

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next
+
+coverage
+
+out
+

README.md

@@ -1,20 +1,47 @@
-# Introduction 
-TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. 
-
-# Getting Started
-TODO: Guide users through getting your code up and running on their own system. In this section you can talk about:
-1.	Installation process
-2.	Software dependencies
-3.	Latest releases
-4.	API references
-
-# Build and Test
-TODO: Describe and show how to build your code and run the tests. 
-
-# Contribute
-TODO: Explain how other users and developers can contribute to make your code better. 
-
-If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files:
-- [ASP.NET Core](https://github.com/aspnet/Home)
-- [Visual Studio Code](https://github.com/Microsoft/vscode)
-- [Chakra Core](https://github.com/Microsoft/ChakraCore)
+# Architecture center front-end
+
+Open source tool to be a knowledge base for architectural solutions.
+
+**Made with**
+* ReactJs
+* NextJs
+* Apollo GrapghQl
+* Material UI
+
+## How to use
+
+
+#### For development
+
+```sh
+yarn
+
+yarn dev
+```
+
+#### For production
+Buid and run it:
+
+```sh
+yarn build
+yarn start
+```
+
+## Features
+
+* Add new solutions
+* Search of the sollutions
+* Solution details
+* **Architecture Canvas** - Visual tool to give a shared vision of architectural solutions
+
+### Add new solutions
+
+![Search solutions](docs/add-solution.png)
+
+### Search of the soluttions
+
+![Search solutions](docs/search.png)
+
+### Architecture Canvas
+
+![Search solutions](docs/architecture-canvas.png)

azure-pipelines.yml

@@ -0,0 +1,20 @@
+# Starter pipeline
+# Start with a minimal pipeline that you can customize to build and deploy your code.
+# Add steps that build, run tests, deploy, and more:
+# https://aka.ms/yaml
+
+trigger:
+  - main
+
+pool:
+  name: default
+
+steps:
+  - task: Npm@1
+    inputs:
+      command: "install"
+      verbose: true
+  - task: Npm@1
+    inputs:
+      command: "run test"
+      verbose: true

docker/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:14.16.0-alpine3.10
+
+COPY . /usr/src/app
+
+WORKDIR /usr/src/app
+
+expose 3000
+
+RUN npm install --production && npm run build
+
+CMD ["npm","run", "start"]

jest.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+    testEnvironment: "node",
+    preset: "ts-jest",
+    roots: ["<rootDir>/src"],
+    transform: {
+        "^.+\\.tsx?$": "ts-jest",
+    },
+    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+    moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+    testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
+    collectCoverage: false,
+    collectCoverageFrom: ["src/**/*.ts", "src/**/*.tsx"],
+    globals: {
+        // we must specify a custom tsconfig for tests because we need the typescript transform
+        // to transform jsx into js rather than leaving it jsx such as the next build requires. you
+        // can see this setting in tsconfig.jest.json -> "jsx": "react"
+        "ts-jest": {
+            tsConfig: "<rootDir>/tsconfig.jest.json",
+        },
+    },
+    moduleNameMapper: {
+        "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
+    },
+};

kubernetes/deployment.yaml

@@ -0,0 +1,44 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: architecture-center-frontapp
+  namespace: architecture-center-dev
+  labels:
+    app: architecture-center-frontapp
+    version: v1
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: architecture-center-frontapp
+      version: v1
+  template:
+    metadata:
+      labels:
+        app: architecture-center-frontapp
+        version: v1
+    spec:
+      containers:
+      - name: architecture-center-frontapp
+        image: ms.io:5000/architecture-center/frontapp:1.2
+        imagePullPolicy: Always
+        ports:
+        - containerPort: 3000
+#       livenessProbe:
+#         httpGet:
+#           path: /actuator/health
+#           port: 8989
+#         initialDelaySeconds: 3
+#       readinessProbe:
+#         httpGet:
+#           path: /actuator/health
+#           port: 8989
+#         initialDelaySeconds: 3
+#         periodSeconds: 3
+#        resources:
+#          requests:
+#            memory: "256Mi"
+#            cpu: "1"
+#          limits:
+#            memory: "256Mi"
+#            cpu: "1"

kubernetes/gateway.yaml

@@ -0,0 +1,15 @@
+apiVersion: networking.istio.io/v1alpha3
+kind: Gateway
+metadata:
+  name: architecture-center-frontapp
+  namespace: architecture-center-dev
+spec:
+  selector:
+    istio: ingressgateway
+  servers:
+  - hosts:
+    - ac.io
+    port:
+      name: http
+      number: 80
+      protocol: HTTP

kubernetes/namespace.yaml

@@ -0,0 +1,6 @@
+apiVersion: v1
+kind: Namespace
+metadata:
+  labels:
+    istio-injection: enabled
+  name: architecture-center-dev

kubernetes/service.yaml

@@ -0,0 +1,18 @@
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: architecture-center-frontapp
+    version: v1
+  name: architecture-center-frontapp
+  namespace: architecture-center-dev
+spec:
+  ports:
+    - name: http
+      port: 80
+      protocol: TCP
+      targetPort: 3000
+  selector:
+    app: architecture-center-frontapp
+    version: v1
+  type: ClusterIP

kubernetes/virtual-service.yaml

@@ -0,0 +1,14 @@
+apiVersion: networking.istio.io/v1alpha3
+kind: VirtualService
+metadata:
+  name: architecture-center-frontapp
+  namespace: architecture-center-dev
+spec:
+  gateways:
+    - architecture-center-frontapp
+  hosts:
+    - ac.io
+  http:
+  - route:
+    - destination:
+        host: architecture-center-frontapp

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "nextjs",
+  "version": "4.0.0",
+  "private": true,
+  "dependencies": {
+    "@apollo/client": "^3.3.6",
+    "@material-ui/core": "latest",
+    "@material-ui/icons": "^4.11.2",
+    "@types/apollo-upload-client": "^14.1.0",
+    "apollo-upload-client": "^14.1.3",
+    "axios": "^0.21.1",
+    "clsx": "latest",
+    "graphql": "^15.4.0",
+    "next": "latest",
+    "prop-types": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
+    "redux-devtools-extension": "^2.13.8",
+    "redux-thunk": "^2.3.0"
+  },
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest",
+    "test": "jest --env=jsdom",
+    "test:watch": "jest --verbose --env=jsdom --watchAll",
+    "test:coverage": "jest --coverage --env=jsdom"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.3",
+    "@types/cookie": "^0.4.0",
+    "@types/express": "^4.17.6",
+    "@types/jest": "^25.2.3",
+    "@types/node": "^14.0.6",
+    "@types/react": "^16.9.35",
+    "@types/react-autosuggest": "^9.3.14",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-toastify": "^4.1.0",
+    "@types/redux-saga": "^0.10.5",
+    "axios-mock-adapter": "^1.18.1",
+    "jest": "^26.0.1",
+    "jest-css-modules": "^2.1.0",
+    "redux-devtools-extension": "^2.13.8",
+    "ts-jest": "^26.1.0",
+    "typescript": "^3.9.3"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.js"
+    ]
+  }
+}

pages/_app.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import theme from '../src/theme';
+import { ApolloProvider } from "@apollo/client";
+import { useApollo } from "../src/lib/apolloClient";
+
+export default function MyApp(props:any) {
+  const { Component, pageProps } = props;
+  const apolloClient = useApollo(pageProps.initialApolloState);
+
+  React.useEffect(() => {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles) {
+      (jssStyles as any).parentElement.removeChild(jssStyles);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      <Head>
+        <title>Architecture Center - Company</title>
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <ApolloProvider client={apolloClient}>
+            <Component {...pageProps} />
+        </ApolloProvider>
+
+      </ThemeProvider>
+    </React.Fragment>
+  );
+}
+
+MyApp.propTypes = {
+  Component: PropTypes.elementType.isRequired,
+  pageProps: PropTypes.object.isRequired,
+};