From 6e32f1f462c5e2d6b1d760c3a1886b720a2653ee Mon Sep 17 00:00:00 2001 From: damien-duignan Date: Wed, 3 Jun 2020 15:26:33 +0200 Subject: [PATCH 1/5] Fix styles --- client/public/favicon.ico | Bin 3870 -> 1529 bytes client/public/index.html | 2 +- client/src/App.js | 4 ++- client/src/components/ErrorMessage.js | 13 +++++++++- client/src/components/Products.js | 6 ++--- client/src/index.css | 34 ++++++++++++++++++++------ 6 files changed, 46 insertions(+), 13 deletions(-) diff --git a/client/public/favicon.ico b/client/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..7e38c3fc21cea68780f78b13d0b018e23b0d6272 100644 GIT binary patch literal 1529 zcmVPx)vq?ljR9FecS6ggUMHv3)oV~U5%62I&mkJizg`h}dZ4Aa>FyaN0LWv|q1rz0g z1dW#%QHdxh>Vskok#bS6_<|IH;EVA^AA~435w=S!H3VDRu3XmMclV6nKc{DJ-EF%{ z<79W|oSA?A@02D-{Atb3(q%pfVAQOkwgB@C^VY!P3()6+ty>O*5y zE5;&NTCuXi&?2ja5KE<`O7t!gf}}J|e4!Cu@R9u(ZbE-dGxP&({)7I}^p8lOsA5^E zO}D>_ojxfvEsp?bfu>U|m<+zsFoGoH{%|DpZoq%EEvu?OR>}K0G=U@2*hMM z(KO=%Jai_~3X43~(RAooDnUKfVDX&V4cN&Z667Yy;Qz9*i-ah|M(QSbDsJ|4HJwb> zG>ia)You?7tudGBu9MaCyV9X+LVFk_t|ya7h=Ix8<&VN{hXHQCHQ@1t03}2SKB@iF z*Ld8Ti4rLCE-$f>I02#Q9Bkv#%xt+5CRr2kHMTPbLe^|HK^qY?;|I<#*cf9l)(|Yh z49(+RF$)eqjmMl@Z+Z*L>J?-+LVH1%?@+U{0FvbiFv}P`9FCA-Wa=)-R>)yYrlir_ zl@3&|WtsYYU@%0Lv!+wg#C!^YNJfoa!I;3-N<{c}F0Z3ixOjm6fk9eu$1M8l^UbvL z!xyO_ZvwG3#@ZN*F&SIqgGC74Io8Fz+q>si(t(|?Q?aLz7Tz$lO(U=P`BW??PJ&mmnmGrYflkh**N zQjh>Kl9xm}0vu$YY}-H&Jy5Mc&zx_j)$6uKt-$khD{iB|t_P_ra6^IP(4p)s7aeKX zLZy?7)Ve(l$LXDqzN9RdL%qj-OaeB^mkFVNV4irf=}5$&p5A_PPs~$;^XHY5yD*mm z0Ms>&oDMrRHD6JLtetZpPMzXW*gE`}Qhf5X zFFL~MR{Pj})Ymr<9b;e(imWyWH?6K)OcprD!l|>D$Ufv6OHTFR#Ml~Nqoj<)v<^u* zu!A3d{DrQzbw$^`wEl5gwD2zFQ??NAjK92d_VcRRMYLwslBoQd^DT7l!f(;oh)&=^ zVFFw4_RI_BlB~t~KRG@SIdX3VyCF!l`2H%jHp}ItM;@$!`2_vZ9-ux17zf+*sm1jC zx;onQ@>Aq=;viK3l3v+dPZ#~a!vdx|)C7L`)+B_y&`!4ZRes44^WK?hZ zPEb9H&9Wu;Cd@IpHjrQ!Oq()^CSi5yvg#+ zxhkYw3vLOa%2r@Me)s)pDw|eJ-q~eQJuat%JVgamyC*X0JAI7}JgQv452Ia3*d6@?A(e{NRbF)#loY#RA&Efkq@T|C z>F2Y46^v}1lr6=DBuao6jO9vZfJkUCOcA)os<0fWHkg~!Z@9@VDu7CHB{OU1kW6>L z*UYz9zCc>bl6wZ={AVzZZuP~puInR$^Eye97dm{0mFX?L2?ThMZ>@ZLMXD@@M$BV- z|E00nv2z7}@$kpVs)i9@0Y$>?J&S5xgWF4?DhA0bM}5a?4mc@W5kG4?e2rhET9T3g z3-$zjmt5}hgNSC_6+|V7IL&|=*&?dQ;2#kT7euu03LBxPyZm3DN(Ihi2|<`n=zsfj fI*iab{5}5%fQ@d3Vd!TY00000NkvXXu0mjf{(0qk literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/client/public/index.html b/client/public/index.html index 56df0fb..d13e7cb 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -19,7 +19,7 @@ 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`. --> - Product Inventory + Task list diff --git a/client/src/App.js b/client/src/App.js index d7fbcbf..c021e26 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -31,6 +31,7 @@ class App extends React.Component { }).catch(err => { this.setState({ errorMessage: err.message, + productsLoading: false }); }); @@ -49,7 +50,8 @@ class App extends React.Component { render() { return (
-

Product Inventory

+

Humanitec Sample App

+

Task list

diff --git a/client/src/components/ErrorMessage.js b/client/src/components/ErrorMessage.js index 5296378..dcccb72 100644 --- a/client/src/components/ErrorMessage.js +++ b/client/src/components/ErrorMessage.js @@ -1,9 +1,20 @@ +/* eslint-disable no-template-curly-in-string */ import React from 'react'; export function ErrorMessage(props) { return (
- {props.message} + This sample-app is intended to be used with sample-service. To add tasks to your task list: +
    +
  • Add a sample-service module to your app on Humanitec.
    • + +
  • In your sample-service configuration, add a database.
    • + +
  • In Variables, define an environment variable for your database connection with a key CONNECTION_STRING and value: {'${externals.postgres.host};${externals.postgres.name};${externals.postgres.username};${externals.postgres.password};${externals.postgres.port}'}
    • + +
  • Deploy your changes and reload this page
    • +
+
); } diff --git a/client/src/components/Products.js b/client/src/components/Products.js index 14325aa..f3dd377 100644 --- a/client/src/components/Products.js +++ b/client/src/components/Products.js @@ -61,9 +61,9 @@ export class ProductCreator extends React.Component { render() { return (
- - - + + +
); } diff --git a/client/src/index.css b/client/src/index.css index edb9917..8161733 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -11,16 +11,29 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } -.products-app>h1 { - margin: 16px; + +.products-app { + max-width: 1400px; + margin: 0 auto; +} +.products-app > h1 { font-size: 1.75rem; line-height: 2rem; font-weight: 500; letter-spacing: .0125em; text-decoration: inherit; text-transform: inherit; + margin-bottom: 16px; margin-top: 0; } +.products-app > h2 { + font-size: 1.75rem; + line-height: 2rem; + font-weight: 500; + letter-spacing: .0125em; + text-decoration: inherit; + text-transform: inherit; +} .new-product { padding: 16px; border-radius: 4px; @@ -28,20 +41,19 @@ code { box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12); box-sizing: border-box; margin-top: 16px; - margin-left: 16px; - margin-right: 16px; margin-bottom: 32px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; + max-width: 700px; } .new-product .title { font-size: 1.25rem; line-height: 2rem; font-weight: 500; letter-spacing: .0125em; - width: 40rem; + width: 100%; border: none; border-bottom: 1px solid #555; margin-bottom: 8px; @@ -95,12 +107,20 @@ code { } .error-message { font-size: 1.2rem; - color: red; - font-weight: bold; font-family: monospace; padding: 16px; background-color: white; + line-height: 1.3; } .hidden-error-message { display: none; } +.highlight { + background-color: rgba(9, 30, 66, 0.08);; + padding: 0 3px; + word-wrap: break-word; +} + +.bold { + font-weight: bold; +} \ No newline at end of file From 28bedc0686814efeabc845e7ad0dc294877b91b6 Mon Sep 17 00:00:00 2001 From: damien-duignan Date: Wed, 3 Jun 2020 15:31:53 +0200 Subject: [PATCH 2/5] Add github ci --- .github/workflows/walhall-ci.yml | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 .github/workflows/walhall-ci.yml diff --git a/.github/workflows/walhall-ci.yml b/.github/workflows/walhall-ci.yml new file mode 100644 index 0000000..184757a --- /dev/null +++ b/.github/workflows/walhall-ci.yml @@ -0,0 +1,19 @@ +name: Walhall CI + +on: + push: + branches: + - deploy + +jobs: + push-to-humanitec-dev: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@master + - name: Build and Push to Humanitec Dev + uses: humanitec/build-push-to-humanitec@v1 + with: + humanitec-token: ${{ secrets.HUMANITEC_TOKEN_DEV }} + organization: damien85 + humanitec-registry: dev-registry.humanitec.io + humanitec-api: dev-api.humanitec.io \ No newline at end of file From d13e6143f57e7c051a0981abaa8ef63819e8e9c1 Mon Sep 17 00:00:00 2001 From: damien-duignan Date: Wed, 3 Jun 2020 16:22:27 +0200 Subject: [PATCH 3/5] Remove last variable --- client/src/components/ErrorMessage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/ErrorMessage.js b/client/src/components/ErrorMessage.js index dcccb72..29de746 100644 --- a/client/src/components/ErrorMessage.js +++ b/client/src/components/ErrorMessage.js @@ -10,7 +10,7 @@ export function ErrorMessage(props) {
  • In your sample-service configuration, add a database.
    • -
  • In Variables, define an environment variable for your database connection with a key CONNECTION_STRING and value: {'${externals.postgres.host};${externals.postgres.name};${externals.postgres.username};${externals.postgres.password};${externals.postgres.port}'}
    • +
  • In Variables, define an environment variable for your database connection with a key CONNECTION_STRING and value: {'${externals.postgres.host};${externals.postgres.name};${externals.postgres.username};${externals.postgres.password}'}
  • Deploy your changes and reload this page
    • From 96bb99eedcf59c250f1efe9a8d6b67eb79aa8356 Mon Sep 17 00:00:00 2001 From: damien-duignan Date: Tue, 9 Jun 2020 12:42:24 +0200 Subject: [PATCH 4/5] Update styles --- client/src/components/ErrorMessage.js | 2 +- client/src/index.css | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/client/src/components/ErrorMessage.js b/client/src/components/ErrorMessage.js index 29de746..915fe0d 100644 --- a/client/src/components/ErrorMessage.js +++ b/client/src/components/ErrorMessage.js @@ -10,7 +10,7 @@ export function ErrorMessage(props) {
  • In your sample-service configuration, add a database.
    • -
  • In Variables, define an environment variable for your database connection with a key CONNECTION_STRING and value: {'${externals.postgres.host};${externals.postgres.name};${externals.postgres.username};${externals.postgres.password}'}
    • +
  • In Variables, define an environment variable for your database connection with a key CONNECTION_STRING and value: {'postgresql://${externals.postgres.username}:${externals.postgres.password}@${externals.postgres.host}:${externals.postgres.port}/${externals.postgres.name}'}
  • Deploy your changes and reload this page
    • diff --git a/client/src/index.css b/client/src/index.css index 8161733..0eff040 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -75,10 +75,6 @@ code { align-self: flex-end; } -.products { - padding: 16px; -} - .products .product { padding: 16px; border-radius: 4px; From 1391749f3760406a47a49d366bec1460197c4af1 Mon Sep 17 00:00:00 2001 From: damien-duignan Date: Tue, 9 Jun 2020 12:44:18 +0200 Subject: [PATCH 5/5] Update default URL --- README.md | 4 ++-- server/app.js | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index be6ba4c..f2d9892 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ You can configure the product frontend with the following environment variables: | Variable | Description | |---|---| -| `PRODUCT_BE_SERVER_URL` | The URL for accessing the `product-be` service. | +| `PUBLIC_SERVER_URL` | The URL for accessing the `product-be` service. | | `PORT` | The port number where the server should be exposed. Default is `8080`. | @@ -25,7 +25,7 @@ You can run the `product-fe` package in development mode by executing the follow ```bash # Start the server $ cd server -$ PRODUCT_BE_SERVER_URL="http://localhost:8080" PORT=3001 node bin/www +$ PUBLIC_SERVER_URL="http://localhost:8080" PORT=3001 node bin/www ``` ```bash diff --git a/server/app.js b/server/app.js index 581260a..4659d0a 100644 --- a/server/app.js +++ b/server/app.js @@ -5,8 +5,7 @@ const path = require("path"); const logger = require("morgan"); // Environmental variable for configuring backend -const PRODUCT_BE_SERVER_URL=process.env.PRODUCT_BE_SERVER_URL || "PRODUCT_BE_SERVER_URL"; - +const PUBLIC_SERVER_URL=process.env.PUBLIC_SERVER_URL || "http://sample-service:8080"; const app = express(); @@ -16,7 +15,7 @@ app.use(express.json()); app.use(express.static(path.join(__dirname, "public"))); -app.use("/api", proxy(PRODUCT_BE_SERVER_URL)); +app.use("/api", proxy(PUBLIC_SERVER_URL)); app.use("/", express.static("public")); @@ -30,7 +29,7 @@ app.use(function(err, req, res, next) { if (req.path.startsWith("/api/")) { // error from Proxy const proxiedPath = req.path.substring("/api/".length); - console.error(`Unable to complete request: "${PRODUCT_BE_SERVER_URL}/${proxiedPath}"`); + console.error(`Unable to complete request: "${PUBLIC_SERVER_URL}/${proxiedPath}"`); if (err.code === "ENOTFOUND") { console.error(`Unable to find host "${err.host}"`); } else if (err.code === "ECONNREFUSED") {