Fix showing logic for notices, add compact style (#107)

* Fix notices not showing if description not set

* Fix typo

* Add `compact` prop to FederationMissingNotice

* Change CSS class names to fix #108

see also Open-EO/openeo-web-editor#353 (comment)

* Hide "Description" h3 if section contains notices only

see #107 (comment)

* Add example for compact FedMissingNotice

* Fix DeprecationWarning during example generation

see da82a57#r155870123

* Restructure description `v-if`s

see #107 (comment)

Author: christophfriedrich

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- `FederationMissingNotice`: Prop `compact`
+
 ## [2.18.3] - 2025-01-15
 
 ### Fixed

README.md

@@ -252,6 +252,7 @@ Show a message that a response is incomplete due to missing data from an inacces
 - `missing` (array, required): The identifiers of the federated back-ends that are not providing data for the list of processes due to an issue.
 - `federation` (object): The data of the `federation` property obtained from the capabilities.
 - `retry` (function): Displays a "retry" button which executes the given function. 
+- `compact` (boolean): Renders the notice more compact if set to `true`. Defaults to `false`.
 
 **Slots:**
 

components/Collection.vue

@@ -16,10 +16,11 @@
 
 		<slot name="before-description" v-bind="$props"></slot>
 
-		<section class="description" v-if="stac.description">
-			<h3>Description</h3>
-
-			<Description :description="stac.description"></Description>
+		<section class="description" v-if="stac.description || stac.deprecated || supportedBy || affectedByMissing">
+			<template v-if="stac.description">
+				<h3>Description</h3>
+				<Description :description="stac.description"></Description>
+			</template>
 			<DeprecationNotice v-if="stac.deprecated" entity="collection" />
 			<FederationNotice v-if="supportedBy" :backends="supportedBy" :federation="federation" entity="collection" />
 			<FederationMissingNotice v-if="affectedByMissing" :missing="missing" :federation="federation" />

components/FederationMissingNotice.vue

@@ -1,5 +1,5 @@
 <template>
-	<section v-if="services" class="vue-component message-block federation federation-backends">
+	<section v-if="services" class="vue-component message-block federation federation-backends federation-missing-notice" :class="{compact: compact}">
 		<AsyncButton v-if="retry" confirm class="retry" :fn="retry">Retry</AsyncButton>
 		<strong class="header">Incomplete</strong>
 		<p>
@@ -9,7 +9,7 @@
 			<li v-for="service in services" :key="service.url">
 				<div class="fed-header">
 					<strong class="fed-title">{{ service }}</strong>
-					<ul class="badges small inline">
+					<ul v-if="!compact" class="badges small inline">
 						<li class="badge red">offline</li>
 					</ul>
 				</div>
@@ -35,6 +35,10 @@ export default {
 			type: Function,
 			default: null
 		},
+		compact: {
+			type: Boolean,
+			default: false
+		},
 		federation: {
 			type: Object,
 			default: () => ({})
@@ -62,7 +66,7 @@ export default {
 <style lang="scss">
 @use './base.scss';
 
-.vue-component.federation-backends {
+.vue-component.federation-missing-notice {
 	background-color: rgba(255, 69, 0, 0.1);
 	border: 1px solid orangered;
 
@@ -78,4 +82,25 @@ export default {
 		float: right;
 	}
 }
+
+.vue-component.federation-missing-notice.compact {
+	margin: 0;
+	padding: 0.25em;
+
+	strong, p, ul, ul li, ul li div {
+		display: inline;
+	}
+	
+	strong.header, p {
+		margin-right: 5px;
+	}
+	
+	ul {
+		padding-left: 0;
+	}
+
+	li:not(:last-child)::after {
+		content: ", "
+	}
+}
 </style>

components/FileFormat.vue

@@ -24,9 +24,11 @@
 
 		<slot name="before-description" v-bind="$props"></slot>
 
-		<section class="description" v-if="format.description">
-			<h3>Description</h3>
-			<Description :description="format.description" />
+		<section class="description" v-if="format.description || format.deprecated || format.experimental || format['federation:backends']">
+			<template v-if="format.description">
+				<h3>Description</h3>
+				<Description :description="format.description" />
+			</template>
 			<DeprecationNotice v-if="format.deprecated" entity="file format" />
 			<ExperimentalNotice v-if="format.experimental" entity="file format" />
 			<FederationNotice v-if="format['federation:backends']" :backends="format['federation:backends']" :federation="federation" entity="file format" />

components/Item.vue

@@ -8,8 +8,8 @@
 
 		<slot name="before-description" v-bind="$props"></slot>
 
-		<summary class="description" v-if="properties.description">
-			<Description :description="properties.description"></Description>
+		<summary class="description" v-if="properties.description || properties.deprecated || stac['federation:missing']">
+			<Description v-if="properties.description" :description="properties.description"></Description>
 
 			<DeprecationNotice v-if="properties.deprecated" entity="item" />
 			<FederationMissingNotice v-if="stac['federation:missing']" :missing="stac['federation:missing']" :federation="federation" />

components/Job.vue

@@ -47,10 +47,11 @@
 
 		<slot name="before-description" v-bind="$props"></slot>
 
-		<summary class="description" v-if="job.description">
-			<h3>Description</h3>
-			<Description :description="job.description" />
-
+		<summary class="description" v-if="job.description || job['federation:missing']">
+			<template v-if="job.description">
+				<h3>Description</h3>
+				<Description :description="job.description" />
+			</template>
 			<FederationMissingNotice v-if="job['federation:missing']" :missing="job['federation:missing']" :federation="federation" />
 		</summary>
 

components/Process.vue

@@ -33,10 +33,10 @@
 
 		<slot name="before-description" :v-bind="$props"></slot>
 
-		<section class="description" v-if="process.description">
+		<section class="description" v-if="process.description || process.deprecated || process.experimental || process['federation:backends']">
 			<h3>Description</h3>
 			<code class="signature" v-html="signature"></code>
-			<Description :description="process.description" :processUrl="processUrl" />
+			<Description v-if="process.description" :description="process.description" :processUrl="processUrl" />
 			<DeprecationNotice v-if="process.deprecated" entity="process" />
 			<ExperimentalNotice v-if="process.experimental" entity="process" />
 			<FederationNotice v-if="process['federation:backends']" :backends="process['federation:backends']" :federation="federation" entity="process" />

components/ServiceType.vue

@@ -14,9 +14,11 @@
 
 		<slot name="before-description" v-bind="$props"></slot>
 
-		<section class="description" v-if="service.description">
-			<h3>Description</h3>
-			<Description :description="service.description" />
+		<section class="description" v-if="service.description || service.deprecated || service.experimental || service['federation:backends']">
+			<template v-if="service.description">
+				<h3>Description</h3>
+				<Description :description="service.description" />
+			</template>
 			<DeprecationNotice v-if="service.deprecated" entity="type of secondary web service" />
 			<ExperimentalNotice v-if="service.experimental" entity="type of secondary web service" />
 			<FederationNotice v-if="service['federation:backends']" :backends="service['federation:backends']" :federation="federation" entity="type of secondary web service" />

components/UdfRuntime.vue

@@ -21,8 +21,8 @@
 
 		<slot name="before-description" v-bind="$props"></slot>
 
-		<section class="description" v-if="runtime.description">
-			<Description :description="runtime.description"></Description>
+		<section class="description" v-if="runtime.description || runtime.deprecated || runtime.experimental || runtime['federation:backends']">
+			<Description v-if="runtime.description" :description="runtime.description"></Description>
 			<DeprecationNotice v-if="runtime.deprecated" entity="UDF runtime" />
 			<ExperimentalNotice v-if="runtime.experimental" entity="UDF runtime" />
 			<FederationNotice v-if="runtime['federation:backends']" :backends="runtime['federation:backends']" :federation="federation" entity="UDF runtime" />