JS-based validation with results / remove stacLint (#412)

* JS-based validation with results #307

Author: m-mohr

README.md

@@ -231,7 +231,6 @@ You need to provide a field `stac_browser` and then you can set any of the follo
 - `defaultThumbnailSize`
 - `displayGeoTiffByDefault`
 - `showThumbnailsAsAssets`
-- `stacLint` (can only be disabled)
 
 ### Custom extensions
 

config.js

@@ -32,7 +32,6 @@ module.exports = {
     showKeywordsInItemCards: false,
     showKeywordsInCatalogCards: false,
     showThumbnailsAsAssets: false,
-    stacLint: true,
     geoTiffResolution: 128,
     redirectLegacyUrls: false,
     itemsPerPage: 12,

config.schema.json

@@ -152,11 +152,6 @@
         "boolean"
       ]
     },
-    "stacLint": {
-      "type": [
-        "boolean"
-      ]
-    },
     "geoTiffResolution": {
       "type": [
         "integer"

docs/options.md

@@ -24,7 +24,6 @@ The following ways to set config options are possible:
 * [locale](#locale)
 * [fallbackLocale](#fallbacklocale)
 * [supportedLocales](#supportedlocales)
-* [stacLint](#staclint)
 * [historyMode](#historymode)
 * [pathPrefix](#pathprefix)
 * [stacProxyUrl](#stacproxyurl)
@@ -115,18 +114,6 @@ In CLI, please provide the languages separated by a space, e.g. `--supportedLoca
 Please note that only left-to-right languages have been tested.
 I'd need help to test support for right-to-left languages.
 
-## stacLint
-
-**deprecated**
-
-Enables or disables a feature that validates the STAC catalog when opening the "Source Data" popup.
-Validation uses the external service [staclint.com](https://staclint.com).
-
-Validation is automatically disabled in the following cases:
-- the host of a catalog is `localhost`, `127.0.0.1` or `::1`
-- [private query parameters](../README.md#private-query-parameters) have been set
-- `stacProxyUrl` is set
-
 ## historyMode
 
 ***build-only option***

package.json

@@ -51,6 +51,7 @@
     "node-polyfill-webpack-plugin": "^2.0.0",
     "remove-markdown": "^0.5.0",
     "stac-layer": "^0.15.0",
+    "stac-node-validator": "^2.0.0-beta.6",
     "urijs": "^1.19.11",
     "v-clipboard": "^3.0.0-next.1",
     "vue": "^2.6.12",

src/StacBrowser.vue

@@ -1,7 +1,7 @@
 <template>
   <b-container id="stac-browser">
     <Authentication v-if="doAuth.length > 0" />
-    <ErrorAlert class="global-error" v-if="globalError" v-bind="globalError" @close="hideError" />
+    <ErrorAlert v-if="globalError" dismissible class="global-error" v-bind="globalError" @close="hideError" />
     <Sidebar v-if="sidebar" />
     <!-- Header -->
     <header>
@@ -227,8 +227,7 @@ export default {
         'crossOriginMedia',
         'defaultThumbnailSize',
         'displayGeoTiffByDefault',
-        'showThumbnailsAsAssets',
-        'stacLint' // can only be disabled
+        'showThumbnailsAsAssets'
       ];
 
       let doReset = !root || (oldRoot && Utils.isObject(oldRoot['stac_browser']));
@@ -242,11 +241,6 @@ export default {
         if (doSet && typeof root['stac_browser'][key] !== 'undefined') {
           value = root['stac_browser'][key]; // Custom value from root
         }
-        
-        // Don't enable stacLint if it has been disabled by default
-        if (key === 'stacLint' && !CONFIG.stacLint) {
-          continue;
-        }
 
         // Commit config
         if (typeof value !== 'undefined') {
@@ -392,4 +386,4 @@ export default {
 @import '~bootstrap-vue/src/index.scss';
 @import "./theme/page.scss";
 @import "./theme/custom.scss";
-</style>
+</style>

src/components/ErrorAlert.vue

@@ -52,7 +52,7 @@ export default {
     },
     dismissible: {
       type: Boolean,
-      default: true
+      default: false
     }
   }
 };
@@ -72,4 +72,4 @@ export default {
 dl {
   font-size: 0.9em;
 }
-</style>
+</style>

src/components/SearchFilter.vue

@@ -261,8 +261,8 @@ export default {
     },
     andOrOptions() {
       return [
-        { value: 'and', text: this.$i18n.t('search.logical.and') },
-        { value: 'or', text: this.$i18n.t('search.logical.or') },
+        { value: 'and', text: this.$t('search.logical.and') },
+        { value: 'or', text: this.$t('search.logical.or') },
       ];
     },
     showAdditionalFilters() {

src/components/Source.vue

@@ -38,8 +38,7 @@
 
     <b-popover
       v-if="stacUrl" id="popover-link" target="popover-link-btn" triggers="focus"
-      placement="bottom" container="stac-browser" :title="$t('source.title')" 
-      @show="validate"
+      placement="bottom" container="stac-browser" :title="$t('source.title')"
     >
       <template v-if="stac">
         <b-row v-if="stacId" class="stac-id">
@@ -53,13 +52,10 @@
           <b-col cols="4">{{ $t('source.stacVersion') }}</b-col>
           <b-col>{{ stacVersion }}</b-col>
         </b-row>
-        <b-row v-if="canValidate" class="validation">
+        <b-row class="stac-valid">
           <b-col cols="4">{{ $t('source.valid') }}</b-col>
           <b-col>
-            <b-spinner v-if="valid === null" :label="$t('source.validating')" small />
-            <template v-else-if="valid === true">✔️</template>
-            <template v-else-if="valid === false">❌</template>
-            <template v-else>{{ $t('source.validationNA') }}</template>
+            <Validation :data="stac" />
           </b-col>
         </b-row>
         <hr>
@@ -84,7 +80,6 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 
 import Url from './Url.vue';
 
-import URI from 'urijs';
 import Utils from '../utils';
 import { getBest, prepareSupported } from '../locale-id';
 import CopyButton from './CopyButton.vue';
@@ -109,6 +104,7 @@ export default {
     RootStats: () => import('./RootStats.vue'),
     Url,
     CopyButton,
+    Validation: () => import('./Validation.vue')
   },
   props: {
     title: {
@@ -125,7 +121,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['conformsTo', 'dataLanguages', 'locale', 'privateQueryParameters', 'supportedLocales', 'stacLint', 'stacProxyUrl', 'uiLanguage', 'valid']),
+    ...mapState(['conformsTo', 'dataLanguages', 'locale', 'supportedLocales', 'uiLanguage', 'valid']),
     ...mapGetters(['supportsExtension', 'root']),
     stacVersion() {
       return this.stac?.stac_version;
@@ -154,26 +150,6 @@ export default {
         return '-';
       }
     },
-    canValidate() {
-      if (!this.stacLint || typeof this.stacUrl !== 'string') {
-        return false;
-      }
-      else if (Utils.size(this.privateQueryParameters) > 0) {
-        // Don't expose private query parameters to externals
-        return false;
-      }
-      else if (Array.isArray(this.stacProxyUrl)) {
-        // Don't validate if a proxy has been set
-        return false;
-      }
-      let uri = URI(this.stacUrl);
-      let host = uri.hostname().toLowerCase();
-      if (host === 'localhost' || host.startsWith('127.') || host === '::1') {
-        // Can't validate localhost
-        return false;
-      }
-      return true;
-    },
     message() {
       return this.$t('source.share.message', {title: this.title, url: this.browserUrl()});
     },
@@ -235,12 +211,6 @@ export default {
   },
   methods: {
     ...mapActions(['switchLocale']),
-    async validate() {
-      if (!this.canValidate) {
-        return;
-      }
-      await this.$store.dispatch('validate', this.stacUrl);
-    },
     browserUrl() {
       return window.location.toString();
     }
@@ -260,7 +230,8 @@ export default {
   }
 }
 
-#popover-link .stac-id .copy-button {
+#popover-link .stac-id .btn-sm,
+#popover-link .stac-valid .btn-sm {
     padding-top: 0.1rem;
     padding-bottom: 0.1rem;
     font-size: 0.7rem;

src/components/StacHeader.vue

@@ -13,6 +13,9 @@
           <template #catalog><StacLink :data="containerLink" /></template>
         </i18n>
         <b-button-group>
+          <b-button v-if="back" :to="selfBrowserLink" :title="$t('goBack.description', {type})" variant="outline-primary" size="sm">
+            <b-icon-arrow-left /> <span class="button-label prio">{{ $t('goBack.label') }}</span>
+          </b-button>
           <b-button v-if="parentLink" :to="toBrowserPath(parentLink.href)" :title="parentLinkTitle" variant="outline-primary" size="sm">
             <b-icon-arrow-90deg-up /> <span class="button-label prio">{{ $t('goToParent.label') }}</span>
           </b-button>
@@ -43,14 +46,15 @@
 import { mapState, mapGetters } from 'vuex';
 import Source from './Source.vue';
 import StacLink from './StacLink.vue';
-import { BIconArrow90degUp, BIconBook, BIconFolderSymlink, BIconSearch, BIconLock, BIconUnlock } from "bootstrap-vue";
+import { BIconArrow90degUp, BIconArrowLeft, BIconBook, BIconFolderSymlink, BIconSearch, BIconLock, BIconUnlock } from "bootstrap-vue";
 import STAC from '../models/stac';
 import Utils from '../utils';
 
 export default {
   name: 'StacHeader',
   components: {
     BIconArrow90degUp,
+    BIconArrowLeft,
     BIconBook,
     BIconFolderSymlink,
     BIconSearch,
@@ -62,6 +66,29 @@ export default {
   computed: {
     ...mapState(['allowSelectCatalog', 'authConfig', 'authData', 'catalogUrl', 'data', 'url', 'title']),
     ...mapGetters(['canSearch', 'root', 'parentLink', 'collectionLink', 'toBrowserPath']),
+    back() {
+      return this.$route.name === 'validation';
+    },
+    selfBrowserLink() {
+      return this.toBrowserPath(this.url);
+    },
+    type() {
+      if (this.data instanceof STAC) {
+        if (this.data.isItem()) {
+          return this.$tc('stacItem');
+        }
+        else if (this.data.isCollection()) {
+          return this.$tc(`stacCollection`);
+        }
+        else if (this.data.isCatalog()) {
+          return this.$tc(`stacCatalog`);
+        }
+        else {
+          return this.data.type;
+        }
+      }
+      return null;
+    },
     collectionLinkTitle() {
       if (this.collectionLink && Utils.hasText(this.collectionLink.title)) {
         return this.$t('goToCollection.descriptionWithTitle', this.collectionLink);