Skip to content

Commit

Permalink
Merge pull request #83 from City-of-Helsinki/release/1.0.0-rc.2
Browse files Browse the repository at this point in the history
Release/1.0.0 rc.2
  • Loading branch information
klempine authored May 28, 2020
2 parents 13394ed + 108fb21 commit 7542c11
Show file tree
Hide file tree
Showing 97 changed files with 2,685 additions and 962 deletions.
5 changes: 4 additions & 1 deletion .env
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,8 @@ REACT_APP_OIDC_CLIENT_ID="https://api.hel.fi/auth/helsinkiprofile-ui"
REACT_APP_PROFILE_AUDIENCE="https://api.hel.fi/auth/helsinkiprofile"
REACT_APP_PROFILE_GRAPHQL=
REACT_APP_OIDC_SCOPE="openid profile $REACT_APP_PROFILE_AUDIENCE"
REACT_APP_SENTRY_DSN=
REACT_APP_SENTRY_DSN="https://8b5b23e2171b42cd8617e2b1ad7353b6@sentry.hel.ninja/63"
REACT_APP_VERSION=$npm_package_version
TRANSLATION_LANGUAGES=en,fi,sv
TRANSLATIONS_SHEET_ID=1Q5LfG2wC_vxsoK0Ko-J1npWzY-96QQCERqMpvA0s9hg
TRANSLATION_PROJECT_NAME=open-city-profile
2 changes: 1 addition & 1 deletion .env.development
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
REACT_APP_OIDC_AUTHORITY="https://tunnistamo.test.kuva.hel.ninja/"
REACT_APP_OIDC_AUTHORITY="https://api.hel.fi/sso-test/"
REACT_APP_OIDC_CLIENT_ID="https://api.hel.fi/auth/helsinkiprofile-ui"
REACT_APP_PROFILE_GRAPHQL="https://profiili-api.test.kuva.hel.ninja/graphql/"
5 changes: 4 additions & 1 deletion .gitlab-ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ build-review:
extends: .build
variables:
DOCKER_IMAGE_NAME: "$CI_PROJECT_NAME-review"
DOCKER_BUILD_ARG_REACT_APP_ENVIRONMENT: 'review'
DOCKER_BUILD_ARG_REACT_APP_OIDC_AUTHORITY: "https://tunnistamo.test.kuva.hel.ninja/"
DOCKER_BUILD_ARG_REACT_APP_PROFILE_GRAPHQL: "https://profiili-api.test.kuva.hel.ninja/graphql/"
only:
Expand All @@ -21,7 +22,8 @@ build-staging:
extends: .build
variables:
DOCKER_IMAGE_NAME: "$CI_PROJECT_NAME-staging"
DOCKER_BUILD_ARG_REACT_APP_OIDC_AUTHORITY: "https://tunnistamo.test.kuva.hel.ninja/"
DOCKER_BUILD_ARG_REACT_APP_ENVIRONMENT: 'staging'
DOCKER_BUILD_ARG_REACT_APP_OIDC_AUTHORITY: "https://api.hel.fi/sso-test/"
DOCKER_BUILD_ARG_REACT_APP_PROFILE_GRAPHQL: "https://profiili-api.test.kuva.hel.ninja/graphql/"
only:
refs:
Expand All @@ -31,6 +33,7 @@ build-production:
extends: .build
variables:
DOCKER_IMAGE_NAME: "$CI_PROJECT_NAME-production"
DOCKER_BUILD_ARG_REACT_APP_ENVIRONMENT: 'production'
DOCKER_BUILD_ARG_REACT_APP_OIDC_AUTHORITY: "https://api.hel.fi/sso/"
DOCKER_BUILD_ARG_REACT_APP_PROFILE_GRAPHQL: "https://profiili-api.prod.kuva.hel.ninja/graphql/"
only:
Expand Down
11 changes: 11 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Contributions are accepted as pull requests. Please observe our coding
practices at https://github.com/City-of-Helsinki/bestpractice/ .
Please make your pull requests short, elegant and only handling one
issue at a time!

<!-- TODO: Uncomment below after we have service email address -->
<!-- If you make a pull request, you may also want to contact
<INSERT SERVICE'S ROLE ADDRESS> to tell about your contribution. -->

Our contribution handling guidelines are at
https://github.com/City-of-Helsinki/bestpractice/blob/master/accepting-contributions.md
2 changes: 2 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ FROM appbase as staticbuilder

ARG REACT_APP_PROFILE_GRAPHQL
ARG REACT_APP_OIDC_AUTHORITY
ARG REACT_APP_ENVIRONMENT


COPY . /app
RUN yarn build
Expand Down
85 changes: 68 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,13 @@ UI for citizen-profile - This project was bootstrapped with [Create React App](h

## Environments

Test: https://omahelsinki.test.kuva.hel.ninja/
Test: https://profiili.test.kuva.hel.ninja/

Staging: None
Production: https://profiili.prod.kuva.hel.ninja/

Production: None
## Issues board

## Development

If running on Linux or MacOS, easiest way is to just run the app without docker. Any semi-new version of node should probably work, the docker-image is set to use node 12.

Run `yarn` to install dependencies, start app with `yarn start`.

The graphql-backend for development is located at https://helsinkiprofile.test.kuva.hel.ninja/graphql/, it has graphiql installed so you can browse it in your browser!
https://helsinkisolutionoffice.atlassian.net/projects/OM/issues/?filter=allissues&=

## CI

Expand Down Expand Up @@ -49,13 +43,16 @@ Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

## Running with docker
### `yarn codegen`

Generate static types for GraphQL queries by using the schema from the backend server.

If you really must, you can run this app with docker locally.
### `yarn update-translations`

Run `docker-compose up` to start the app in docker.
Fetches translation data from our Google Spreadsheet and updates translation files. See `.env` for configuration.

You still need to update tests and add the translation files to the git repository manually.

`docker-compose down` stops the container.

## Environment variables

Expand All @@ -68,12 +65,39 @@ The following envs are used:
- REACT_APP_PROFILE_AUDIENCE - name of the api-token that client uses profile-api with
- REACT_APP_PROFILE_GRAPHQL - URL to the profile graphql
- REACT_APP_OIDC_SCOPE - which scopes the app requires
- REACT_APP_SENTRY_DSN - not yet used
- REACT_APP_SENTRY_DSN - sentry public dns-key


## Setting up local development environment with Docker

### Set tunnistamo hostname

Add the following line to your hosts file (`/etc/hosts` on mac and linux):

127.0.0.1 tunnistamo-backend

### Create a new OAuth app on GitHub

Go to https://github.com/settings/developers/ and add a new app with the following settings:

- Application name: can be anything, e.g. local tunnistamo
- Homepage URL: http://tunnistamo-backend:8000
- Authorization callback URL: http://tunnistamo-backend:8000/accounts/github/login/callback/

Save. You'll need the created **Client ID** and **Client Secret** for configuring tunnistamo in the next step.

## Tunnistamo configuration
### Install local tunnistamo

This app uses tunnistamo for authentication. Tunnistamo needs to have the following things set up:
Clone https://github.com/City-of-Helsinki/tunnistamo/.

Follow the instructions for setting up tunnistamo locally. Before running `docker-compose up` set the following settings in tunnistamo roots `docker-compose.env.yaml`:

- SOCIAL_AUTH_GITHUB_KEY: **Client ID** from the GitHub OAuth app
- SOCIAL_AUTH_GITHUB_SECRET: **Client Secret** from the GitHub OAuth app

Run `docker-compose up`

After container is up and running, few things need to be set up at http://localhost:8000/admin

**OIDC client**

Expand All @@ -89,6 +113,33 @@ Requires the following things:

The scopes this app uses are set with the REACT_APP_OIDC_SCOPE environment variable.

### Install local open-city-profile
Clone https://github.com/City-of-Helsinki/open-city-profile/.

1. Create a `docker-compose.env.yaml` file in the project folder:
* Use `docker-compose.env.yaml.example` as a base, it does not need any changes
for getting the project running.
* Change `DEBUG` and the rest of the Django settings if needed.
* `TOKEN_AUTH_*`, settings for [tunnistamo](https://github.com/City-of-Helsinki/tunnistamo) authentication service
* Set entrypoint/startup variables according to taste.
* `CREATE_SUPERUSER`, creates a superuser with credentials `admin`:`admin` (admin@example.com)
* `APPLY_MIGRATIONS`, applies migrations on startup
* `BOOTSTRAP_DIVISIONS`, bootstrap data import for divisions

2. Run `docker-compose up`

### open-city-profile-ui

If running on Linux or MacOS, easiest way is to just run the app without docker. Any semi-new version of node should probably work, the docker-image is set to use node 12.

`docker-compose up` starts the container.

OR

Run `yarn` to install dependencies, start app with `yarn start`.

The graphql-backend for development is located at https://profiili-api.test.kuva.hel.ninja/graphql/, it has graphiql installed so you can browse it in your browser!

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
Expand Down
20 changes: 15 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
{
"name": "open-city-profile-ui",
"version": "1.0.0-rc.1",
"version": "1.0.0-rc.2",
"license": "MIT",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^3.1.3",
"@apollo/react-testing": "^3.1.3",
"@datapunt/matomo-tracker-react": "^0.1.2",
"@sentry/browser": "^5.15.4",
"@types/classnames": "^2.2.9",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "24.0.19",
"@types/node": "12.11.5",
"@types/react": "16.9.9",
"@types/react-dom": "16.9.2",
"@types/react-helmet": "^6.0.0",
"@types/react-modal": "^3.10.1",
"@types/react-redux": "^7.1.5",
"@types/react-router-dom": "^5.1.0",
Expand All @@ -25,13 +29,16 @@
"formik": "^2.0.4",
"graphql": "^14.5.8",
"graphql.macro": "^1.4.2",
"hds-core": "^0.4.0",
"hds-react": "^0.5.3",
"hds-core": "0.6.3",
"hds-design-tokens": "0.2.0",
"hds-react": "0.7.2",
"i18n-iso-countries": "^5.3.0",
"i18next": "^17.3.0",
"i18next-browser-languagedetector": "^4.0.1",
"oidc-client": "^1.9.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-helmet": "^6.0.0",
"react-i18next": "^10.13.1",
"react-modal": "^3.11.1",
"react-redux": "^7.1.1",
Expand All @@ -49,7 +56,8 @@
"test": "react-scripts test",
"ci": "CI=true yarn test --coverage",
"lint": "eslint --ext js,ts,tsx src",
"codegen": "apollo client:codegen ./src/graphql/generatedTypes.ts --outputFlat --includes=./src/**/*.graphql --target=typescript --endpoint=https://helsinkiprofile.test.kuva.hel.ninja/graphql/ --useReadOnlyTypes --addTypename"
"codegen": "apollo client:codegen ./src/graphql/generatedTypes.ts --outputFlat --includes=./src/**/*.graphql --target=typescript --endpoint=https://profiili-api.test.kuva.hel.ninja/graphql/ --useReadOnlyTypes --addTypename",
"update-translations": "ts-node -P ./scripts/tsconfig.json -r dotenv/config --files scripts/update-translations.ts"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -70,7 +78,9 @@
"apollo": "^2.21.1",
"eslint-config-prettier": "^6.4.0",
"eslint-plugin-prettier": "^3.1.1",
"helsinki-utils": "City-of-Helsinki/helsinki-utils-js#0.1.0",
"jest-fetch-mock": "^2.1.2",
"prettier": "^1.18.2"
"prettier": "^1.18.2",
"ts-node": "^8.8.2"
}
}
29 changes: 3 additions & 26 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,41 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Open city profile app"
content="Rekisteröitymällä pääset käyttämään uusia palveluita yhdellä helpolla kirjautimisella. Yksi yhtenäinen tunnus tekee kaupunkilaisen arjesta helpompaa."
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Open city profile app</title>
<title>Profiili</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
1 change: 1 addition & 0 deletions public/robots.txt
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow: /
9 changes: 9 additions & 0 deletions scripts/helsinki-utils.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
declare module 'helsinki-utils/scripts/fetch-translations' {
function fetchTranslations(
sheetId: string,
languages: string[],
output: string,
debug?: boolean
): Promise<never>;
export = fetchTranslations;
}
13 changes: 13 additions & 0 deletions scripts/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true,
"esModuleInterop": true
},
"include": [
"*"
],
}
22 changes: 22 additions & 0 deletions scripts/update-translations.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
#!/usr/bin/env ts-node-script
import * as path from 'path';

/// <reference types="./helsinki-utils" />
import fetchTranslations from 'helsinki-utils/scripts/fetch-translations';

const languages = process.env.TRANSLATION_LANGUAGES.split(',');
const sheetId = process.env.TRANSLATIONS_SHEET_ID;

const pathToLocales: string = path.join(__dirname, '../src/i18n');

const start = async () => {
try {
await fetchTranslations(sheetId, languages, pathToLocales);
console.log('Done'); // eslint-disable-line
} catch (err) {
console.error(err.message); // eslint-disable-line
process.exit(1);
}
};

start();
Loading

0 comments on commit 7542c11

Please sign in to comment.