From 649957caa190fd0585bfde294a72f25408f402b0 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Wed, 11 Mar 2020 17:46:13 -0400
Subject: [PATCH] Sonar fixes (#166)

* Fix scope declaration in lang

* Rename event listener composition

* Rename compositions

* Don't export app from main

* Fix naming smell

* Add roles to asides

* Add rel to a tag in logo

* exclude storybook files from sonar cloud

* Fix a11y issues
---
 sonar-project.properties                            | 13 ++++++-------
 src/components/v-table/_table-header.vue            |  7 ++++---
 src/components/v-table/v-table.vue                  |  4 ++--
 src/compositions/readme.md                          |  4 ++--
 ...-listener.test.ts => use-event-listener.test.ts} |  2 +-
 .../{event-listener.ts => use-event-listener.ts}    |  0
 ...e-from-now.test.ts => use-time-from-now.test.ts} |  2 +-
 .../{time-from-now.ts => use-time-from-now.ts}      |  2 +-
 ...{window-size.test.ts => use-window-size.test.ts} |  2 +-
 .../{window-size.ts => use-window-size.ts}          |  0
 src/lang/index.ts                                   |  4 ++--
 src/main.ts                                         |  4 +---
 src/modules/register.ts                             | 13 ++++++++++---
 .../module-bar-logo/module-bar-logo.vue             |  2 +-
 src/views/private-view/private-view.vue             |  3 ++-
 src/views/public/_logo.vue                          |  2 +-
 16 files changed, 35 insertions(+), 29 deletions(-)
 rename src/compositions/{event-listener.test.ts => use-event-listener.test.ts} (95%)
 rename src/compositions/{event-listener.ts => use-event-listener.ts} (100%)
 rename src/compositions/{time-from-now.test.ts => use-time-from-now.test.ts} (97%)
 rename src/compositions/{time-from-now.ts => use-time-from-now.ts} (86%)
 rename src/compositions/{window-size.test.ts => use-window-size.test.ts} (95%)
 rename src/compositions/{window-size.ts => use-window-size.ts} (100%)

diff --git a/sonar-project.properties b/sonar-project.properties
index a96d5a8ed9..e13e0ec2e3 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -1,14 +1,13 @@
 sonar.organization=directus
 sonar.projectKey=app-next
 
-sonar.sources=./src
-sonar.exclusions=./src/**/*.test.ts,./src/**/*.story.ts
-sonar.tests=./src
+sonar.sources=src
+sonar.exclusions=src/**/*.story.ts
+sonar.test.sources=src/**/*.test.ts
+sonar.test.exclusions=src/**/*.test.ts
 
-sonar.test.inclusions=./src/**/*.test.ts
-
-sonar.javascript.lcov.reportPaths=./coverage/lcov.info
-sonar.testExecutionReportPaths=./coverage/sonar.xml
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+sonar.testExecutionReportPaths=coverage/sonar.xml
 
 sonar.pullrequest.provider=github
 sonar.pullrequest.github.repository=directus/app-next
diff --git a/src/components/v-table/_table-header.vue b/src/components/v-table/_table-header.vue
index beab6933f1..cf433533c1 100644
--- a/src/components/v-table/_table-header.vue
+++ b/src/components/v-table/_table-header.vue
@@ -1,10 +1,10 @@
 <template>
 	<thead class="v-table_table-header" :class="{ dragging }">
 		<tr :class="{ fixed }">
-			<th v-if="showManualSort" class="manual cell" @click="toggleManualSort">
+			<th v-if="showManualSort" class="manual cell" @click="toggleManualSort" scope="col">
 				<v-icon name="sort" class="drag-handle" small />
 			</th>
-			<th v-if="showSelect" class="select cell">
+			<th v-if="showSelect" class="select cell" scope="col">
 				<v-checkbox
 					:inputValue="allItemsSelected"
 					:indeterminate="someItemsSelected"
@@ -17,6 +17,7 @@
 				:class="getClassesForHeader(header)"
 				:style="getStyleForHeader(header, index)"
 				class="cell"
+				scope="col"
 			>
 				<div class="content" @click="changeSort(header)">
 					<slot :name="`header.${header.value}`" :header="header">{{ header.text }}</slot>
@@ -35,7 +36,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, PropType } from '@vue/composition-api';
-import useEventListener from '@/compositions/event-listener';
+import useEventListener from '@/compositions/use-event-listener';
 import { Header, Sort } from './types';
 import { throttle, clone } from 'lodash';
 
diff --git a/src/components/v-table/v-table.vue b/src/components/v-table/v-table.vue
index 57803639f1..dc7e7eb6a2 100644
--- a/src/components/v-table/v-table.vue
+++ b/src/components/v-table/v-table.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="v-table" :class="{ loading }">
-		<table>
+		<table :summary="_headers.map(header => header.text).join(', ')">
 			<table-header
 				:headers.sync="_headers"
 				:sort.sync="_sort"
@@ -17,7 +17,7 @@
 				</template>
 			</table-header>
 			<thead v-if="loading" class="loading-indicator">
-				<th :colspan="_headers.length">
+				<th :colspan="_headers.length" scope="colgroup">
 					<v-progress-linear indeterminate v-if="loading" />
 				</th>
 			</thead>
diff --git a/src/compositions/readme.md b/src/compositions/readme.md
index 794c9c9fed..ff3f7b8358 100644
--- a/src/compositions/readme.md
+++ b/src/compositions/readme.md
@@ -21,7 +21,7 @@ The composition removes the event handler whenever the component is unmounted.
 
 ```js
 import { defineComponent } from '@vue/composition-api';
-import useEventListener from '@/compositions/event-listener';
+import useEventListener from '@/compositions/use-event-listener';
 
 export default defineComponent({
 	setup() {
@@ -66,7 +66,7 @@ Returns ref string time from current datetime based on date-fns formatDistance.
 
 ```js
 import { defineComponent } from '@vue/composition-api';
-import useTimeFromNow from '@/compositions/time-from-now';
+import useTimeFromNow from '@/compositions/use-time-from-now';
 
 export default defineComponent({
 	setup() {
diff --git a/src/compositions/event-listener.test.ts b/src/compositions/use-event-listener.test.ts
similarity index 95%
rename from src/compositions/event-listener.test.ts
rename to src/compositions/use-event-listener.test.ts
index 2bcf16fb70..a6d9147226 100644
--- a/src/compositions/event-listener.test.ts
+++ b/src/compositions/use-event-listener.test.ts
@@ -1,5 +1,5 @@
 import { ref } from '@vue/composition-api';
-import useEventListener from './event-listener';
+import useEventListener from './use-event-listener';
 import mountComposition from '../../.jest/mount-composition';
 
 describe('Compositions / Event Listener', () => {
diff --git a/src/compositions/event-listener.ts b/src/compositions/use-event-listener.ts
similarity index 100%
rename from src/compositions/event-listener.ts
rename to src/compositions/use-event-listener.ts
diff --git a/src/compositions/time-from-now.test.ts b/src/compositions/use-time-from-now.test.ts
similarity index 97%
rename from src/compositions/time-from-now.test.ts
rename to src/compositions/use-time-from-now.test.ts
index 0129cb03b3..30053345c7 100644
--- a/src/compositions/time-from-now.test.ts
+++ b/src/compositions/use-time-from-now.test.ts
@@ -1,5 +1,5 @@
 import { Ref } from '@vue/composition-api';
-import useTimeFromNow from './time-from-now';
+import useTimeFromNow from './use-time-from-now';
 import mountComposition from '../../.jest/mount-composition';
 import mockdate from 'mockdate';
 
diff --git a/src/compositions/time-from-now.ts b/src/compositions/use-time-from-now.ts
similarity index 86%
rename from src/compositions/time-from-now.ts
rename to src/compositions/use-time-from-now.ts
index bded0a49d6..89d15dcae4 100644
--- a/src/compositions/time-from-now.ts
+++ b/src/compositions/use-time-from-now.ts
@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, ref } from '@vue/composition-api';
 import formatDistance from 'date-fns/formatDistance';
 
-export default function useFormatDistance(date: Date | number, autoUpdate = 60000) {
+export default function useTimeFromNow(date: Date | number, autoUpdate = 60000) {
 	let interval: number;
 
 	const formatOptions = {
diff --git a/src/compositions/window-size.test.ts b/src/compositions/use-window-size.test.ts
similarity index 95%
rename from src/compositions/window-size.test.ts
rename to src/compositions/use-window-size.test.ts
index 32c64fbf55..42f5e3ac0e 100644
--- a/src/compositions/window-size.test.ts
+++ b/src/compositions/use-window-size.test.ts
@@ -1,5 +1,5 @@
 import { watch } from '@vue/composition-api';
-import useWindowSize from './window-size';
+import useWindowSize from './use-window-size';
 import mountComposition from '../../.jest/mount-composition';
 
 describe('Compositions / Window Size', () => {
diff --git a/src/compositions/window-size.ts b/src/compositions/use-window-size.ts
similarity index 100%
rename from src/compositions/window-size.ts
rename to src/compositions/use-window-size.ts
diff --git a/src/lang/index.ts b/src/lang/index.ts
index 653d685691..113dc90a8a 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -5,7 +5,7 @@ import { merge } from 'lodash';
 import enUSBase from './en-US/index.json';
 import enUSInterfaces from './en-US/interfaces.json';
 import enUSLayouts from './en-US/layouts.json';
-import dateTimeFormats from './en-US/date-format.json';
+import defaultDateTimeFormats from './en-US/date-format.json';
 
 Vue.use(VueI18n);
 
@@ -16,7 +16,7 @@ export const i18n = new VueI18n({
 		'en-US': merge(enUSBase, enUSInterfaces, enUSLayouts)
 	},
 	dateTimeFormats: {
-		'en-US': dateTimeFormats
+		'en-US': defaultDateTimeFormats
 	},
 	silentTranslationWarn: true
 });
diff --git a/src/main.ts b/src/main.ts
index f8e35b3c6c..a09c5e53f5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,10 +15,8 @@ import './interfaces/register';
 
 Vue.config.productionTip = false;
 
-const app = new Vue({
+new Vue({
 	render: h => h('router-view'),
 	router,
 	i18n
 }).$mount('#app');
-
-export default app;
diff --git a/src/modules/register.ts b/src/modules/register.ts
index 1d9032632f..da6456f9a8 100644
--- a/src/modules/register.ts
+++ b/src/modules/register.ts
@@ -6,8 +6,15 @@ const moduleRoutes: RouteConfig[] = modules.map(module => module.routes).flat();
 
 replaceRoutes(routes => insertBeforeProjectWildcard(routes, moduleRoutes));
 
-export function insertBeforeProjectWildcard(routes: RouteConfig[], moduleRoutes: RouteConfig[]) {
+export function insertBeforeProjectWildcard(
+	currentRoutes: RouteConfig[],
+	routesToBeAdded: RouteConfig[]
+) {
 	// Find the index of the /:project/* route, so we can insert the module routes right above that
-	const wildcardIndex = routes.findIndex(route => route.path === '/:project/*');
-	return [...routes.slice(0, wildcardIndex), ...moduleRoutes, ...routes.slice(wildcardIndex)];
+	const wildcardIndex = currentRoutes.findIndex(route => route.path === '/:project/*');
+	return [
+		...currentRoutes.slice(0, wildcardIndex),
+		...routesToBeAdded,
+		...currentRoutes.slice(wildcardIndex)
+	];
 }
diff --git a/src/views/private-view/module-bar-logo/module-bar-logo.vue b/src/views/private-view/module-bar-logo/module-bar-logo.vue
index 78898774b2..0a9d87e747 100644
--- a/src/views/private-view/module-bar-logo/module-bar-logo.vue
+++ b/src/views/private-view/module-bar-logo/module-bar-logo.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="module-bar-logo">
-		<img class="custom-logo" v-if="customLogoPath" :src="customLogoPath" />
+		<img class="custom-logo" v-if="customLogoPath" :src="customLogoPath" alt="Project Logo" />
 		<div
 			v-else
 			class="logo"
diff --git a/src/views/private-view/private-view.vue b/src/views/private-view/private-view.vue
index 9e616118a9..267be9b60a 100644
--- a/src/views/private-view/private-view.vue
+++ b/src/views/private-view/private-view.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="private-view">
-		<aside class="navigation" :class="{ 'is-open': navOpen }">
+		<aside role="navigation" class="navigation" :class="{ 'is-open': navOpen }">
 			<module-bar />
 			<div class="module-nav alt-colors">
 				<div
@@ -31,6 +31,7 @@
 			</main>
 		</div>
 		<aside
+			role="contentinfo"
 			class="drawer alt-colors"
 			:class="{ 'is-open': drawerOpen }"
 			@click="drawerOpen = true"
diff --git a/src/views/public/_logo.vue b/src/views/public/_logo.vue
index 18b02ce7bc..1f3820f9e4 100644
--- a/src/views/public/_logo.vue
+++ b/src/views/public/_logo.vue
@@ -1,5 +1,5 @@
 <template functional>
-	<a href="https://directus.io" target="_blank" class="logo">
+	<a href="https://directus.io" rel="noopener noreferrer" target="_blank" class="logo">
 		<img
 			v-tooltip.right="{ classes: ['inverted'], content: `Directus v${props.version}` }"
 			alt="Directus Logo"