117 create authentication service and forms

.github/workflows/storybook.yml

@@ -25,7 +25,8 @@ jobs:
       - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 22.17.0
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

apps/vscode-sonar-extension/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to the "creedengo-for-sonar" extension will be documented in this file.
 
-Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+Check [Keep a Changelog](https://keepachangelog.com/) for recommendations on how to structure this file.
 
 ## [Unreleased]
 

apps/vue-app/package.json

@@ -12,7 +12,7 @@
   },
   "exports": {
     "./script": "./dist/view.js",
-    "./stylesheet": "./dist/view.css" 
+    "./stylesheet": "./dist/view.css"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -34,13 +34,14 @@
   "dependencies": {
     "@creedengo/sonar-services": "workspace:*",
     "@creedengo/vue-ui": "workspace: *",
-    "vue": "^3.5.18"
+    "vue": "^3.5.18",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@creedengo/core-services": "workspace: *",
-    "@creedengo/sonar-services": "workspace: *",
     "@creedengo/eslint-config": "workspace: *",
     "@creedengo/playwright-config": "workspace:*",
+    "@creedengo/sonar-services": "workspace: *",
     "@creedengo/vitest-config": "workspace:*",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/addon-coverage": "^2.0.0",
@@ -60,7 +61,6 @@
     "jsdom": "^26.1.0",
     "msw": "^2.10.2",
     "msw-storybook-addon": "^2.0.5",
-    "@playwright/test": "^1.54.2",
     "sonarqube-scanner": "^4.3.0",
     "storybook": "^9.1.2",
     "vite-plugin-vue-devtools": "^8.0.0",

apps/vue-app/src/App.vue

@@ -4,6 +4,9 @@ import SettingsPage from './components/pages/SettingsPage.vue';
 import DashboardPage from './components/pages/DashboardPage.vue';
 import NotFoundPage from './components/pages/NotFoundPage.vue';
 
+import { isSonarPlugin, isWebExtension, isWebsite } from './context';
+import ConnectionPage from './components/pages/ConnectionPage.vue';
+
 const routes = {
   '/': DashboardPage,
   '/settings': SettingsPage
@@ -33,15 +36,43 @@ const props = defineProps({
 </script>
 
 <template>
-  <component
-    :is="currentView"
-    :project="props.project"
-    :branch="props.branch"
-  />
-  <aside>
-    <a href="#/">Dashboard</a> |
-    <a href="#/settings">Settings</a>
-  </aside>
+  <div v-if="isSonarPlugin">
+    <h2>Creedengo Sonar Dashboard</h2>
+    <DashboardPage
+      :project="props.project"
+      :branch="props.branch"
+    />
+  </div>
+  <div v-if="isWebExtension">
+    <header>
+      <h1>Creedengo Extension Dashboard</h1>
+    </header>
+    <main>
+      <component
+        :is="currentView"
+        :project="props.project"
+        :branch="props.branch"
+      />
+    </main>
+    <nav aria-labelledby="menu-web-extension">
+      <strong id="menu-web-extension">Menu</strong>
+      <a href="#/">Dashboard</a> |
+      <a href="#/settings">Settings</a>
+    </nav>
+  </div>
+  <div v-if="isWebsite">
+    <header>
+      <h1>Creedengo Website Dashboard</h1>
+    </header>
+    <main>
+      <ConnectionPage></ConnectionPage>
+    </main>
+    <nav aria-labelledby="menu-website">
+      <strong id="menu-website">Menu</strong>
+      <a href="#/">Dashboard</a> |
+      <a href="#/settings">Settings</a>
+    </nav>
+  </div>
 </template>
 
 <style scoped>

apps/vue-app/src/api/mocks/handlers.js

@@ -1,3 +1,3 @@
 import sonar from '@creedengo/sonar-services'
 
-export const handlers = [...sonar.handlers]
+export const handlers = [...sonar.mockHandlers]

apps/vue-app/src/components/Widgets/Score/ScoreWidget.stories.js

@@ -12,7 +12,7 @@ export default {
     projectKey: { control: { type: 'text' }, default: 'my-project' },
     branch: { control: { type: 'text' }, default: 'main' },
   },
-  parameters: { msw: { handlers: sonar.handlers } },
+  parameters: { msw: { handlers: sonar.mockHandlers } },
 }
 
 export const MockedSuccess = {};

apps/vue-app/src/components/pages/ConnectionPage.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { TokenConnectionForm } from '@creedengo/vue-ui'
+import core from '@creedengo/core-services';
+
+const [, authenticator] = core.api.services.authenticators;
+const onSuccess = () => this.$router.push('/projects')
+</script>
+
+<template>
+  <h2>Sonar Connection</h2>
+  <TokenConnectionForm 
+    :authenticator="authenticator"
+    :callback="onSuccess"
+  />
+</template>

apps/vue-app/src/components/pages/DashboardPage.stories.js

@@ -12,7 +12,7 @@ export default {
     projectKey: { control: { type: 'text' }, default: 'my-project' },
     branch: { control: { type: 'text' }, default: 'main' },
   },
-  parameters: { msw: { handlers: sonar.handlers } },
+  parameters: { msw: { handlers: sonar.mockHandlers } },
 }
 
 export const MockedSuccess = {};

apps/vue-app/src/components/pages/DashboardPage.vue

@@ -2,12 +2,10 @@
 import { onMounted, reactive } from 'vue';
 
 import { AbcdeScore } from '@creedengo/vue-ui'
-import SonarAPI from '@creedengo/sonar-services'
 import core from '@creedengo/core-services';
 
-const { api, calculateProjectScore } = core;
+const { calculateProjectScore } = core;
 
-api.init(SonarAPI)
 const props = defineProps({
   project: {
     type: String,
@@ -39,10 +37,10 @@ onMounted(async () => {
   <main>
     <div class="wrapper">
       <span v-if="!state.score">
-        <i class="fa fa-spinner fa-spin" /> Loading score...
+        <em>Loading score...</em>
       </span>
       <span v-else-if="state.error">
-        <i class="fa fa-exclamation-triangle" /> Score not available - {{ state.error }}
+        <em>Score not available - {{ state.error }}</em>
       </span>
       <span v-else>
         <AbcdeScore :value="state.score" />

apps/vue-app/src/context.js

@@ -0,0 +1,4 @@
+// THIS LOGIC MIGHT MOVE LATER TO PARENT APPS
+export const isSonarPlugin = Boolean(globalThis.SonarRequest)
+export const isWebExtension = (globalThis.chrome || globalThis?.browser?.action?.setTitle)
+export const isWebsite = !isSonarPlugin && !isWebExtension

apps/vue-app/src/main.js

@@ -2,11 +2,19 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import App from './App.vue'
+//import router from './router'
+
+import core from '@creedengo/core-services'
+import SonarApi from '@creedengo/sonar-services'
+
+core.api.init(SonarApi)
 
 // MOCK
 if (globalThis?.process.env.NODE_ENV === 'development') {
     const { worker } = await import('./api/mocks/browser')
     await worker.start()
 }
 
-createApp(App).mount('#app')
+createApp(App)
+    //.use(router)
+    .mount('#app')