feat(centraldashboard): Add i18n to dashboard links

StatCan · Sep 9, 2022 · ca45a13 · ca45a13
1 parent b154025
commit ca45a13
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 64 deletions.
diff --git a/components/centraldashboard/app/api.ts b/components/centraldashboard/app/api.ts
@@ -22,7 +22,6 @@ export class Api {
       private metricsService?: MetricsService,
     ) {}
 
-
   /**
    * Returns the Express router for the API routes.
    */
@@ -100,4 +99,19 @@ export class Api {
             res.json(settings);
           });
   }
+
+  resolveLanguage(requested: string[], supported: string[], defaultLang: string) {
+    return requested.find(lang => supported.indexOf(lang) > -1) || defaultLang;
+  }
+
+  getBrowserLanguages(acceptlanguage: string) {
+    if (!acceptlanguage) {
+      return [];
+    }
+    const languages = acceptlanguage.split(',');
+    // Append fallbacks not explicit in browser languages.
+    // Non-destructive: string keys will be reported back in order of insertion.
+    const languagelist = Array.from(new Set(languages.map(lang => lang.split(/-|;/)[0])));
+    return languagelist;
+  }
 }
diff --git a/components/centraldashboard/config/centraldashboard-config.yaml b/components/centraldashboard/config/centraldashboard-config.yaml
@@ -6,65 +6,130 @@ data:
     }
   links: |-
     {
-      "menuLinks": [
+     "en":
+      { 
+        "menuLinks": [
         {
           "link": "/pipeline/",
-          "text": "mainPage.menuPipelines",
+          "text": "Pipelines"
         },
         {
           "link": "/jupyter/",
-          "text": "mainPage.menuNotebookServers",
+          "text": "Notebook Servers"
         },
         {
           "link": "/katib/",
-          "text": "mainPage.menuKatib",
-        },
+          "text": "Katib"
+        }
       ],
-      "externalLinks": [],
-      "quickLinks": [
+     "externalLinks": [],
+     "quickLinks": [
         {
-          "text": "dashboardView.quicklinkUploadText",
-          "desc": "dashboardView.quicklinkUploadDesc",
-          "link": "/pipeline/",
+          "text": "Upload a pipeline",
+          "desc": "Pipelines",
+          "link": "/pipeline/"
         },
         {
-          "text": "dashboardView.quicklinkViewAllText",
-          "desc": "dashboardView.quicklinkViewAllDesc",
-          "link": "/pipeline/#/runs",
+          "text": "View all pipeline runs",
+          "desc": "Pipelines",
+          "link": "/pipeline/#/runs"
         },
         {
-          "text": "dashboardView.quicklinkCreateNewText",
-          "desc": "dashboardView.quicklinkCreateNewDesc",
-          "link": "/jupyter/new?namespace=kubeflow",
+          "text": "Create a new Notebook server",
+          "desc": "Notebook Servers",
+          "link": "/jupyter/new?namespace=kubeflow"
+        },
+        {
+          "text": "View Katib Studies",
+          "desc": "Katib",
+          "link": "/katib/"
+        }
+       ],
+      "documentationItems": [
+        {
+          "text": "Advanced Analytics Workspace Docs",
+          "desc": "Helpful guides about our data and analysis tools",
+          "link": "https://statcan.github.io/daaas/"
+        },
+        {
+          "text": "Video Tutorial Series",
+          "desc": "YouTube playlist of videos for getting started with Advanced Analytics Workspace tools",
+          "link": "https://www.youtube.com/playlist?list=PL1zlA2D7AHugkDdiyeUHWOKGKUd3MB_nD"
+        },
+        {
+          "text": "Community Chat",
+          "desc": "Slack workspace for discussion/support - requires sign-up for emails outside @canada.ca",
+          "link": "https://statcan-aaw.slack.com/"
+        },
+        {
+          "text": "Official Kubeflow Docs",
+          "desc": "Advanced documentation for installing, running, and using Kubeflow",
+          "link": "https://www.kubeflow.org/docs/"
+        }
+       ]
+     },
+     "fr":
+      {
+        "menuLinks": [
+        {
+          "link": "/pipeline/",
+          "text": "Pipelines"
+        },
+        {
+          "link": "/jupyter/",
+          "text": "Serveur Bloc-notes"
         },
         {
-          "text": "dashboardView.quicklinkViewKatibText",
-          "desc": "dashboardView.quicklinkViewKatibDesc",
           "link": "/katib/",
+          "text": "Katib"
+        }
+       ],
+      "externalLinks": [],
+      "quickLinks": [
+        {
+          "text": "Télécharger un pipeline",
+          "desc": "Pipelines",
+          "link": "/pipeline/"
         },
-      ],
-      "documentationItems": [
         {
-          "text": "dashboardView.docItemAawdText",
-          "desc": "dashboardView.docItemAawdDesc",
-          "link": "dashboardView.docItemAawdLink",
+          "text": "Voir tous les pipelines exécutés",
+          "desc": "Pipelines",
+          "link": "/pipeline/#/runs"
         },
         {
-          "text": "dashboardView.docItemVideoTutorialText",
-          "desc": "dashboardView.docItemVideoTutorialDesc",
-          "link": "dashboardView.docItemVideoTutorialLink",
+          "text": "Créer un nouveau serveur bloc-notes",
+          "desc": "Serveur bloc-notes",
+          "link": "/jupyter/new?namespace=kubeflow"
         },
         {
-          "text": "dashboardView.docItemCommunityChatText",
-          "desc": "dashboardView.docItemCommunityChatDesc",
-          "link": "dashboardView.docItemCommunityChatLink",
+          "text": "Voir Katib Studies",
+          "desc": "Katib",
+          "link": "/katib/"
+        }
+       ],
+      "documentationItems": [
+        {
+          "text": "Documents de l'espace d'analyses avancées",
+          "desc": "Guides utiles pour nos données et outils d'analyse",
+          "link": "https://statcan.github.io/daaas/"
         },
         {
-          "text": "dashboardView.docItemOfficialKubeflowDocsText",
-          "desc": "dashboardView.docItemOfficialKubeflowDocsDesc",
-          "link": "dashboardView.docItemOfficialKubeflowDocsLink",
+          "text": "Série de didacticiels vidéos",
+          "desc": "Playlist de vidéos YouTube pour commencer avec les outils de l'espace d'analyses avancées",
+          "link": "https://www.youtube.com/playlist?list=PL1zlA2D7AHugkDdiyeUHWOKGKUd3MB_nD"
         },
-      ]
+        {
+          "text": "Clavardage de la communauté",
+          "desc": "Espace de travail Slack pour discussion/support - besoin de s'inscrire pour les courriels en dehors de @canada.ca",
+          "link": "https://statcan-aaw.slack.com/"
+        },
+        {
+          "text": "Documents Kubeflow Officiels",
+          "desc": "Documentation avancé pour installer, exécuter et utiliser Kubeflow",
+          "link": "https://www.kubeflow.org/docs/"
+        }
+       ]
+     }
     }
 kind: ConfigMap
 metadata:

diff --git a/components/centraldashboard/public/components/dashboard-view.pug b/components/centraldashboard/public/components/dashboard-view.pug
@@ -6,8 +6,8 @@ div#grid
                     paper-icon-item
                         iron-icon(icon='kubeflow:bolt', slot='item-icon')
                         paper-item-body(two-line)
-                            .header {{localize(item.text)}}
-                            aside(secondary) {{localize(item.desc)}}
+                            .header [[item.text]]
+                            aside(secondary) [[item.desc]]
                         paper-ripple
         template(is='dom-if', if='[[platformDetails.resourceChartsLink]]')
             resource-chart(header-text='Cluster CPU Utilization', metric='cpu',
@@ -37,12 +37,12 @@ div#grid
                                 slot='item-icon', alt='[[item.text]]', tabindex=-1)
         paper-card#Documentation(heading="{{localize('dashboardView.headingDocumentation')}}")
             template(is='dom-repeat', items='[[documentationItems]]')
-                a.link(href$="{{localize(item.link)}}", tabindex='-1',
+                a.link(href$="[[item.link]]", tabindex='-1',
                             target='_blank')
                     paper-icon-item.external
                         paper-ripple
                         paper-item-body(two-line)
-                            .header  {{localize(item.text)}}
-                            aside(secondary) {{localize(item.desc)}}
+                            .header  [[item.text]]
+                            aside(secondary) [[item.desc]]
                         paper-icon-button.button(icon='open-in-new',
-                            slot='item-icon', alt='{{localize(item.text)}}', tabindex=-1)
+                            slot='item-icon', alt='[[item.text]]', tabindex=-1)
diff --git a/components/centraldashboard/public/components/main-page.js b/components/centraldashboard/public/components/main-page.js
@@ -175,33 +175,30 @@ export class MainPage extends utilitiesMixin(localizationMixin(PolymerElement))
      * Set state for loading registration flow in case no dashboard links exists
      * @param {Event} ev AJAX-response
      */
-    /*
-     * _onHasDashboardLinksError(ev) {
-     *  const error = ((ev.detail.request||{}).response||{}).error ||
-     *      ev.detail.error;
-     *  this.showError(error);
-     *  return;
-     *}
-     */
+      _onHasDashboardLinksError(ev) {
+       const error = ((ev.detail.request||{}).response||{}).error ||
+           ev.detail.error;
+       this.showError(error);
+       return;
+     }
+
     /**
      * Set state for Central dashboard links
      * @param {Event} ev AJAX-response
      */
-    /*
-     * _onHasDashboardLinksResponse(ev) {
-     *  const {
-     *      menuLinks,
-     *      externalLinks,
-     *      quickLinks,
-     *      documentationItems,
-     *  } = ev.detail.response;
-     *     this.menuLinks = menuLinks || [];
-     *     this.externalLinks = externalLinks || [];
-     *     this.quickLinks = quickLinks || [];
-     *     this.documentationItems = documentationItems || [];
-     *}
-     */
-
+      _onHasDashboardLinksResponse(ev) {
+       const {
+           menuLinks,
+           externalLinks,
+           quickLinks,
+           documentationItems,
+       } = ev.detail.response;
+          this.menuLinks = menuLinks || [];
+          this.externalLinks = externalLinks || [];
+          this.quickLinks = quickLinks || [];
+          this.documentationItems = documentationItems || [];
+     }
+
     /**
      * Set state for loading registration flow in case no workgroup exists
      * @param {Event} ev AJAX-response

diff --git a/components/centraldashboard/public/components/main-page.pug b/components/centraldashboard/public/components/main-page.pug
@@ -1,5 +1,7 @@
 iron-ajax(auto, url='/api/workgroup/exists', handle-as='json',
     on-response='_onHasWorkgroupResponse', on-error='_onHasWorkgroupError', loading='{{pageLoading}}')
+iron-ajax(auto, url='/api/dashboard-links', handle-as='json',
+    on-response='_onHasDashboardLinksResponse', on-error='_onHasDashboardLinksError', loading='{{pageLoading}}')
 iron-ajax#envInfo(auto='[[_shouldFetchEnv]]', url='/api/workgroup/env-info', handle-as='json',
     on-response='_onEnvInfoResponse')
 aside#PageLoader(hidden='{{!pageLoading}}')
@@ -19,7 +21,7 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                 paper-item.menu-item {{localize('mainPage.menuHome')}}
             template(is='dom-repeat', items='[[menuLinks]]')
                 iframe-link(href$="[[buildHref(item.link, queryParams)]]")
-                    paper-item.menu-item {{localize(item.text)}}
+                    paper-item.menu-item [[item.text]]
             template(is='dom-repeat', items='[[externalLinks]]')
                 template(is='dom-if', if='[[item.iframe]]')
                     iframe-link(href$="[[buildHref(item.link, queryParams)]]")