Merge pull request #598 from tailwarden/develop

v3.0.6 release 🚀

.circleci/config.yml

@@ -1,5 +1,28 @@
 version: 2.1
 jobs:
+  test_lint_frontend:
+    docker:
+      - image: circleci/node:14.15-stretch-browsers
+    working_directory: ~/komiser
+    resource_class: large
+    steps:
+      - checkout
+      - restore_cache:
+          key: node-modules-{{checksum "dashboard/package.json"}}
+      - run:
+          name: Install dependencies
+          command: cd dashboard && npm ci
+      - save_cache:
+          key: node-modules-{{checksum "dashboard/package.json"}}
+          paths:
+            - dashboard/node_modules
+      - run:
+          name: Run lint
+          command: cd dashboard && npm run lint
+      - run:
+          name: Run npm test
+          command: cd dashboard && npm run test
+
   build_frontend:
     docker:
       - image: circleci/node:14.15-stretch-browsers
@@ -19,6 +42,9 @@ jobs:
       - run:
           name: Build artifact
           command: cd dashboard && npm run build
+      - run:
+          name: Run npm test
+          command: cd dashboard && npm run test
       - persist_to_workspace:
           root: dashboard
           paths:
@@ -39,74 +65,85 @@ jobs:
       - run:
           name: Install go-bin-data
           command: |
-           go install -a -v github.com/go-bindata/go-bindata/...@latest
-           go install -v github.com/elazarl/go-bindata-assetfs/...
+            go install -a -v github.com/go-bindata/go-bindata/...@latest
+            go install -v github.com/elazarl/go-bindata-assetfs/...
       - run:
-         name: Fix path
-         command: mv /tmp/dashboard/out .
+          name: Fix path
+          command: mv /tmp/dashboard/out .
       - run:
-         name: Create assets
-         command: |
+          name: Create assets
+          command: |
             go-bindata-assetfs -o internal/api/v1/template.go out/...
             sed -i -e 's/package main/package v1/g' internal/api/v1/template.go
       - run:
-         name: Build binary
+         name: Run tests
          command: |
+            make test
+      - run:
+          name: Build binary
+          command: |
             make build
             make package
       - run:
-         name: Install AWS CLI
-         command: |
-          apt-get update
-          apt-get install -y awscli
-          chmod +x bin/komiser_windows_amd64.exe bin/komiser_darwin_amd64 bin/komiser_darwin_arm64 bin/komiser_linux_amd64
+          name: Install AWS CLI
+          command: |
+            apt-get update
+            apt-get install -y awscli
+            chmod +x bin/komiser_windows_amd64.exe bin/komiser_darwin_amd64 bin/komiser_darwin_arm64 bin/komiser_linux_amd64
       - run:
           name: Push Linux binary
-          command: aws s3 cp bin/komiser_linux_amd64 s3://komiser-releases/3.0.5/linux/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
+          command: aws s3 cp bin/komiser_linux_amd64 s3://komiser-releases/3.0.6/linux/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
       - run:
           name: Push Windows binary
-          command: aws s3 cp bin/komiser_windows_amd64.exe s3://komiser-releases/3.0.5/windows/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
+          command: aws s3 cp bin/komiser_windows_amd64.exe s3://komiser-releases/3.0.6/windows/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
       - run:
           name: Push Mac OS X binary
           command: |
-            aws s3 cp bin/komiser_darwin_amd64 s3://komiser-releases/3.0.5/osx/amd/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
-            aws s3 cp bin/komiser_darwin_arm64 s3://komiser-releases/3.0.5/osx/arm/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
-            
+            aws s3 cp bin/komiser_darwin_amd64 s3://komiser-releases/3.0.6/osx/amd/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
+            aws s3 cp bin/komiser_darwin_arm64 s3://komiser-releases/3.0.6/osx/arm/komiser --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers
+
   build_docker:
     docker:
-       - image: docker:20.10.17
+      - image: docker:20.10.17
     resource_class: large
     steps:
-        - checkout
-        - setup_remote_docker
-        - run:
-            name: Build & Push Komiser Docker Image
-            command: |
-                docker context create tls-env
-                docker buildx create tls-env --use
-                docker login -u$DOCKERHUB_LOGIN -p$DOCKERHUB_PASSWORD
-                docker buildx build --push --platform linux/amd64,linux/arm64 --build-arg SEGMENT_WRITE_KEY=$SEGMENT_WRITE_KEY -t tailwarden/komiser:latest -t tailwarden/komiser:${CIRCLE_SHA1} -t tailwarden/komiser:3.0.5 .
+      - checkout
+      - setup_remote_docker
+      - run:
+          name: Build & Push Komiser Docker Image
+          command: |
+            docker context create tls-env
+            docker buildx create tls-env --use
+            docker login -u$DOCKERHUB_LOGIN -p$DOCKERHUB_PASSWORD
+            docker buildx build --push --platform linux/amd64,linux/arm64 --build-arg SEGMENT_WRITE_KEY=$SEGMENT_WRITE_KEY -t tailwarden/komiser:latest -t tailwarden/komiser:${CIRCLE_SHA1} -t tailwarden/komiser:3.0.6 .
 
 workflows:
-    version: 2
-    build_and_deploy:
-        jobs:
-            - build_frontend:
-                filters:
-                    branches:
-                        only:
-                            - master
-            - build_cli:
-                requires:
-                    - build_frontend
-                filters:
-                    branches:
-                        only:
-                            - master
-            - build_docker:
-                requires:
-                    - build_cli
-                filters:
-                    branches:
-                        only:
-                            - master
+  version: 2
+  build_and_test_frontend:
+    jobs:
+      - test_lint_frontend:
+          filters:
+            branches:
+              ignore:
+                - master
+  build_and_deploy:
+    jobs:
+      - build_frontend:
+          filters:
+            branches:
+              only:
+                - master
+      - build_cli:
+          requires:
+            - build_frontend
+          filters:
+            branches:
+              only:
+                - master
+      - build_docker:
+          requires:
+            - build_cli
+          filters:
+            branches:
+              only:
+                - master

Dockerfile

@@ -7,7 +7,7 @@ MAINTAINER mlabouardy <[email protected]>
 RUN echo "Running on $BUILDPLATFORM, building for $TARGETPLATFORM" > /log
 
 ENV SEGMENT_WRITE_KEY $SEGMENT_WRITE_KEY
-ENV VERSION 3.0.5
+ENV VERSION 3.0.6
 
 RUN apk update && apk add curl
 RUN curl -L https://cli.komiser.io/$VERSION/linux/komiser -o /usr/bin/komiser && \

README.md

@@ -161,3 +161,9 @@ We will need a URL to a svg or png logo, a text title and a company URL.
 # Versioning 🧮
 
 We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/tailwarden/komiser/tags). 
+
+# Contributors
+
+<a href="https://github.com/tailwarden/komiser/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=tailwarden/komiser" />
+</a>

dashboard/.eslintrc.json

@@ -2,11 +2,14 @@
   "extends": [
     "next",
     "next/core-web-vitals",
+    "plugin:storybook/recommended",
     "airbnb-base",
-    "prettier",
-    "plugin:storybook/recommended"
+    "prettier"
   ],
-  "plugins": ["prettier"],
+  "env": {
+    "jest/globals": true
+  },
+  "plugins": ["jest", "prettier"],
   "rules": {
     "react-hooks/exhaustive-deps": "off",
     "prettier/prettier": [
@@ -26,6 +29,26 @@
       }
     ],
     "no-unused-vars": "off",
-    "import/prefer-default-export": "off"
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*test.{ts,tsx}", // komiser tests
+          "test/**", // tape, common npm pattern
+          "tests/**", // also common npm pattern
+          "spec/**", // mocha, rspec-like pattern
+          "**/__tests__/**", // jest pattern
+          "**/__mocks__/**", // jest pattern
+          "test.{js,jsx}", // repos with a single test file
+          "test-*.{js,jsx}", // repos with multiple top-level test files
+          "**/*{.,_}{test,spec}.{js,jsx}", // tests where the extension or filename suffix denotes that it is a test
+          "**/jest.config.js", // jest config
+          "**/jest.setup.js", // jest setup
+          "**/.eslintrc.js" // eslint config
+        ],
+        "optionalDependencies": false
+      }
+    ]
   }
 }

dashboard/.husky/pre-commit

@@ -3,4 +3,5 @@
 
 cd dashboard
 npx prettier --write .
-npm run lint
+npm run lint
+npm test

dashboard/README.md

@@ -1,4 +1,6 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+Komiser dashboard is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+Full frontend stack: `Next.js`, `Typescript`, `Tailwind`, `Storybook`, `Jest` & `React Testing Library.`
 
 ## Getting Started
 
@@ -10,27 +12,120 @@ go run *.go start --config /path/to/config.toml
 
 # In a different terminal tab in the dashboard folder, run:
 NEXT_PUBLIC_API_URL=http://localhost:3000 npm run dev
+
+# Alternatively, you can create an .env file with it:
+NEXT_PUBLIC_API_URL=http://localhost:3000
 ```
 
-Open [http://localhost:3002](http://localhost:3002) with your browser to see the result.
+Open [http://localhost:3002/](http://localhost:3002). If you see the dashboard, congrats! It's all up and running correctly.
+<img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224318056-3d2c68bc-aa56-49c8-841a-bb297e380dc9.png">
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+If you get an error page such as this, please refer to the logs and our [docs](https://docs.komiser.io/docs/introduction/getting-started).
+<img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224320642-0bf6814b-d97a-4ad9-95a0-ca82e353c5d0.png">
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+## Components
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+Komiser components are documented under `/components`
 
-## Learn More
+Component convention:
 
-To learn more about Next.js, take a look at the following resources:
+- Component folder: component name in `kebab-case`
+- Component file: component name in `UpperCamelCase.*`
+- Component story: component name in `UpperCamelCase.stories.*`
+- Component story mock (if needed): component name in `UpperCamelCase.mocks.*`
+- Component unit test: component name in `UpperCamelCase.test.*`
+- Check `Card` example for more details:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+<img width="220" alt="image" src="https://user-images.githubusercontent.com/13384559/224307211-2ce62245-de24-4ee7-a156-fb54d8d34b4f.png">
+
+Additional instructions:
+
+- To view this component on Storybook, run: `npm run storybook`, then pick `Card`
+  <img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224320112-e21d2ed4-1e22-4a33-adb3-6c236c4d4208.png">
+
+- To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
+  <img width="668" alt="image" src="https://user-images.githubusercontent.com/13384559/224320260-19b1359e-1bfb-4db5-8379-918dacd7da44.png">
+
+## Testing
+
+We use Jest & React Testing Library for our unit tests.
+
+Testing convention:
+
+- All tests should be wrapped in a `describe`
+- If it's a unit test for a function: `describe('functionName outputs', () => { ... })`
+- If it's a unit test for a component: `describe('Component Name', () => { ... })`
+- A test should use 'it' for the test function: `it('should do something', () => { ... })`
+
+Testing examples:
+
+- Simple Jest unit test example (snippet from `/utils/formatNumber.test.ts`):
+
+```Typescript
+import formatNumber from './formatNumber';
+
+describe('formatNumber outputs', () => {
+  it('should format number (over a thousand) in short notation', () => {
+    const result = formatNumber(12345);
+    expect(result).toBe('12K');
+  });
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+  ...
 
-## Deploy on Vercel
+});
+```
+
+- Jest & Testing library example (snippet from `/components/card/Card.test.tsx`):
+
+```Typescript
+import { render, screen } from '@testing-library/react';
+import RefreshIcon from '../icons/RefreshIcon';
+import Card from './Card';
+
+describe('Card', () => {
+  it('should render card component without crashing', () => {
+    render(
+      <Card
+        label="Test card"
+        value={500}
+        icon={<RefreshIcon width={24} height={24} />}
+      />
+    );
+  });
+
+  it('should display the value formatted', () => {
+    render(
+      <Card
+        label="Test card"
+        value={5000}
+        icon={<RefreshIcon width={24} height={24} />}
+      />
+    );
+    const formattedNumber = screen.getByTestId('formattedNumber');
+    expect(formattedNumber).toHaveTextContent('5K');
+  });
+
+  ...
+
+});
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Contributing
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+We welcome all contributors to join us on the mission of improving Komiser, especially when it comes to writing tests and adding documentation.
+
+Not sure where to start?
+
+- Read the [contributor guidelines](https://docs.komiser.io/docs/introduction/community)
+- [Join our Discord](https://discord.tailwarden.com/) and hang with us on #contributors channel.
+
+## Learn More
+
+To learn more about our stack, take a look at the following resources:
+
+- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Tailwind documentation](https://tailwindcss.com/docs/)
+- [Storybook documentation](https://storybook.js.org/docs/react/get-started/whats-a-story)
+- [Jest documentation](https://jestjs.io/docs/getting-started)
+- [React testing library documentation](https://testing-library.com/docs/dom-testing-library/intro)