feat(links): add ability to customize help links (#18)

.env.example

@@ -3,7 +3,7 @@
 # /_/--\ |_|   |_|
 #
 
-# Vela api server address, typically runs on port :8080 locally.
+# Vela API server address, typically runs on port :8080.
 # Should match the "VELA_ADDR" value in docker-compose.yml
 # when running locally.
 VELA_API=http://localhost:8080
@@ -14,18 +14,25 @@ VELA_SOURCE_URL=
 # github oauth app client id
 VELA_SOURCE_CLIENT=
 
-# github oauth app client secret
-VELA_SOURCE_SECRET=
+# customize the location where you want users to provide feedack
+# (default) https://github.com/go-vela/ui/issues/new
+# VELA_FEEDBACK_URL=
+
+# customize the location where users can review documentation
+# (default) https://go-vela.github.io/docs
+# VELA_DOCS_URL=
 
 #   __    ___   _
 #  / /\  | |_) | |
 # /_/--\ |_|   |_|
 #
 
-# note: same as used by APP, henced commented out
+# These should only be needed if you are running
+# the docker compose stack as they are used by the api/server
 
+# note: same as used by APP, henced commented out
 # github oauth app client id
 # VELA_SOURCE_CLIENT=
 
 # github oauth app client secret
-# VELA_SOURCE_SECRET=
+VELA_SOURCE_SECRET=

docker-entrypoint.sh

@@ -4,7 +4,7 @@ set -eu
 for f in /usr/share/nginx/html/*.js
 do  
     # shellcheck disable=SC2016
-    envsubst '${VELA_API},${VELA_SOURCE_URL},${VELA_SOURCE_CLIENT}' < "$f" > "$f".tmp && mv "$f".tmp "$f"
+    envsubst '${VELA_API},${VELA_SOURCE_URL},${VELA_SOURCE_CLIENT},${VELA_FEEDBACK_URL},{$VELA_DOCS_URL}' < "$f" > "$f".tmp && mv "$f".tmp "$f"
 done
 
 exec "$@"

src/elm/Main.elm

@@ -47,7 +47,7 @@ import Html.Attributes
         , value
         )
 import Html.Events exposing (onClick, onInput)
-import Html.Lazy exposing (lazy)
+import Html.Lazy exposing (lazy2)
 import Http exposing (Error(..))
 import Http.Detailed
 import Interop
@@ -103,6 +103,8 @@ type alias Flags =
     , velaAPI : String
     , velaSourceBaseURL : String
     , velaSourceClient : String
+    , velaFeedbackURL : String
+    , velaDocsURL : String
     , velaSession : Maybe Session
     }
 
@@ -120,6 +122,8 @@ type alias Model =
     , velaAPI : String
     , velaSourceBaseURL : String
     , velaSourceOauthStartURL : String
+    , velaFeedbackURL : String
+    , velaDocsURL : String
     , navigationKey : Navigation.Key
     , zone : Time.Zone
     , time : Time.Posix
@@ -174,6 +178,8 @@ init flags url navKey =
                     , UB.string "client_id" flags.velaSourceClient
                     ]
             , velaSourceBaseURL = flags.velaSourceBaseURL
+            , velaFeedbackURL = flags.velaFeedbackURL
+            , velaDocsURL = flags.velaDocsURL
             , navigationKey = navKey
             , toasties = Alerting.initialState
             , zone = Time.utc
@@ -664,7 +670,7 @@ view model =
     in
     { title = "Vela - " ++ title
     , body =
-        [ lazy viewHeader model.session
+        [ lazy2 viewHeader model.session { feedbackLink = model.velaFeedbackURL, docsLink = model.velaDocsURL }
         , viewNav model
         , div [ class "util" ] [ Build.viewBuildHistory model.time model.zone model.page model.builds.org model.builds.repo model.builds.builds ]
         , main_ []
@@ -1088,8 +1094,8 @@ navButton model =
             text ""
 
 
-viewHeader : Maybe Session -> Html Msg
-viewHeader maybeSession =
+viewHeader : Maybe Session -> { feedbackLink : String, docsLink : String } -> Html Msg
+viewHeader maybeSession { feedbackLink, docsLink } =
     let
         session : Session
         session =
@@ -1115,8 +1121,8 @@ viewHeader maybeSession =
                         ]
             ]
         , div [ class "help-links" ]
-            [ a [ href "https://github.com/go-vela/ui/issues/new" ] [ text "feedback" ]
-            , a [ href "https://go-vela.github.io/docs" ] [ text "docs" ]
+            [ a [ href feedbackLink ] [ text "feedback" ]
+            , a [ href docsLink ] [ text "docs" ]
             , FeatherIcons.terminal |> FeatherIcons.withSize 18 |> FeatherIcons.toHtml []
             ]
         ]

src/elm/Main/index.d.ts

@@ -51,6 +51,10 @@ export type Flags = {
   readonly velaSourceBaseURL: string;
   /** @property velaSourceClient the "Client ID" for the OAuth app set up in the source management tool */
   readonly velaSourceClient: string;
+  /** @property velaFeedbackURL allows you to customize the destination of the feedback link */
+  readonly velaFeedbackURL: string;
+  /** @property velaDocsURL allows you to customize the destination of the docs link */
+  readonly velaDocsURL: string;
   /** @property velaSession used for passsing in an existing Vela session to Elm */
   readonly velaSession: Session | null;
 };

src/static/index.ts

@@ -5,6 +5,10 @@
 import { Elm, Flags, App, Config, Session } from "../elm/Main";
 import "../scss/style.scss";
 
+// Vela consts
+const feedbackURL: string = "https://github.com/go-vela/ui/issues/new";
+const docsURL: string = "https://go-vela.github.io/docs";
+
 // setup for session state
 const storageKey: string = "vela";
 const storedSessionState: string | null = sessionStorage.getItem(storageKey);
@@ -18,6 +22,14 @@ const flags: Flags = {
   velaAPI: process.env.VELA_API || "$VELA_API",
   velaSourceBaseURL: process.env.VELA_SOURCE_URL || "$VELA_SOURCE_URL",
   velaSourceClient: process.env.VELA_SOURCE_CLIENT || "$VELA_SOURCE_CLIENT",
+  velaFeedbackURL:
+    process.env.VELA_FEEDBACK_URL ||
+    envOrNull("VELA_FEEDBACK_URL", "$VELA_FEEDBACK_URL") ||
+    feedbackURL,
+  velaDocsURL:
+    process.env.VELA_DOCS_URL ||
+    envOrNull("VELA_DOCS_URL", "$VELA_DOCS_URL") ||
+    docsURL,
   velaSession: currentSessionState || null
 };
 
@@ -40,3 +52,25 @@ app.ports.storeSession.subscribe(sessionMessage => {
 
   setTimeout(() => app.ports.onSessionChange.send(sessionMessage), 0);
 });
+
+/**
+ * envOrNull is a basic helper that returns a substituted
+ * environment variable or null
+ *
+ * @param env the env variable to be substituted, sans "$" prefix
+ * @param subst the substituted variable (or not)
+ */
+function envOrNull(env: string, subst: string): string | null {
+  // substituted value is empty
+  if (!subst || !subst.trim()) {
+    return null;
+  }
+
+  // value was not substituted; ignore
+  if (subst.indexOf(env) !== -1) {
+    return null;
+  }
+
+  // value was substituted, return it
+  return subst;
+}