fix(workflowengine): Add an empty content when no flows are installed or configured

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/workflowengine/img/workflow-off.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" version="1.1" viewbox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 3.0839844 3 C 2.0812854 3 1.25 3.8312754 1.25 4.8339844 L 1.25 7 L 1.0136719 7 C -0.33862677 6.980875 -0.33862677 9.0191 1.0136719 9 L 1.25 9 L 1.25 11.166016 C 1.25 12.168715 2.0812754 13 3.0839844 13 L 7.4160156 13 C 8.4187146 13 9.25 12.168725 9.25 11.166016 L 9.25 9 L 10.060547 9 L 7.75 6.6894531 L 7.75 11.166016 C 7.75 11.363655 7.6136554 11.5 7.4160156 11.5 L 3.0839844 11.5 C 2.8863446 11.5 2.75 11.363655 2.75 11.166016 L 2.75 4.8339844 C 2.75 4.6363446 2.8863446 4.5 3.0839844 4.5 L 5.5605469 4.5 L 4.0605469 3 L 3.0839844 3 z M 6.1816406 3 L 9.25 6.0683594 L 9.25 4.8339844 C 9.25 3.8312854 8.4187246 3 7.4160156 3 L 6.1816406 3 z M 11.5 3.5 C 10.602601 3.5 10.159605 4.5908975 10.802734 5.2167969 L 12.585938 7 L 10.181641 7 L 12.181641 9 L 12.585938 9 L 12.382812 9.203125 L 13.796875 10.617188 L 15.707031 8.7070312 C 16.094031 8.3192316 16.098031 7.6841684 15.707031 7.2929688 L 12.216797 3.8027344 C 12.028497 3.6092346 11.77 3.50002 11.5 3.5 z M 11.324219 10.261719 L 10.802734 10.783203 C 9.8211054 11.725712 11.274208 13.178865 12.216797 12.197266 L 12.738281 11.675781 L 11.324219 10.261719 z " />
+  <path d="M 0,1.0606601 1.06066,0 16.00033,14.93967 14.93967,16.00033 Z" />
+</svg>

apps/workflowengine/src/components/Workflow.vue

@@ -2,18 +2,27 @@
 	<div id="workflowengine">
 		<NcSettingsSection :name="t('workflowengine', 'Available flows')"
 			:doc-url="workflowDocUrl">
-			<p v-if="scope === 0" class="settings-hint">
+			<p v-if="isAdminScope" class="settings-hint">
 				<a href="https://nextcloud.com/developer/">{{ t('workflowengine', 'For details on how to write your own flow, check out the development documentation.') }}</a>
 			</p>
 
-			<transition-group name="slide" tag="div" class="actions">
-				<Operation v-for="operation in getMainOperations"
+			<NcEmptyContent v-if="!isUserAdmin && mainOperations.length === 0"
+				:name="t('workflowengine', 'No flows installed')"
+				:description="!isUserAdmin ? t('workflowengine', 'Ask your administrator to install new flows.') : undefined">
+				<template #icon>
+					<NcIconSvgWrapper :svg="WorkflowOffSvg" :size="20" />
+				</template>
+			</NcEmptyContent>
+			<transition-group v-else
+				name="slide"
+				tag="div"
+				class="actions">
+				<Operation v-for="operation in mainOperations"
 					:key="operation.id"
 					:operation="operation"
 					@click.native="createNewRule(operation)" />
-
 				<a v-if="showAppStoreHint"
-					:key="'add'"
+					key="add"
 					:href="appstoreUrl"
 					class="actions__item colored more">
 					<div class="icon icon-add" />
@@ -33,49 +42,58 @@
 					{{ showMoreOperations ? t('workflowengine', 'Show less') : t('workflowengine', 'Show more') }}
 				</NcButton>
 			</div>
-
-			<h2 v-if="scope === 0" class="configured-flows">
-				{{ t('workflowengine', 'Configured flows') }}
-			</h2>
-			<h2 v-else class="configured-flows">
-				{{ t('workflowengine', 'Your flows') }}
-			</h2>
 		</NcSettingsSection>
 
-		<transition-group v-if="rules.length > 0" name="slide">
-			<Rule v-for="rule in rules" :key="rule.id" :rule="rule" />
-		</transition-group>
+		<NcSettingsSection v-if="mainOperations.length > 0"
+			:name="isAdminScope ? t('workflowengine', 'Configured flows') : t('workflowengine', 'Your flows')">
+			<transition-group v-if="rules.length > 0" name="slide">
+				<Rule v-for="rule in rules" :key="rule.id" :rule="rule" />
+			</transition-group>
+			<NcEmptyContent v-else :name="t('workflowengine', 'No flows configured')">
+				<template #icon>
+					<NcIconSvgWrapper :svg="WorkflowOffSvg" :size="20" />
+				</template>
+			</NcEmptyContent>
+		</NcSettingsSection>
 	</div>
 </template>
 
 <script>
 import Rule from './Rule.vue'
 import Operation from './Operation.vue'
-import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
+import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import { mapGetters, mapState } from 'vuex'
 import { generateUrl } from '@nextcloud/router'
 import { loadState } from '@nextcloud/initial-state'
 import MenuUp from 'vue-material-design-icons/MenuUp.vue'
 import MenuDown from 'vue-material-design-icons/MenuDown.vue'
+import WorkflowOffSvg from '../../img/workflow-off.svg?raw'
 
 const ACTION_LIMIT = 3
+const ADMIN_SCOPE = 0
+// const PERSONAL_SCOPE = 1
 
 export default {
 	name: 'Workflow',
 	components: {
-		NcButton,
 		MenuDown,
 		MenuUp,
+		NcButton,
+		NcEmptyContent,
+		NcIconSvgWrapper,
+		NcSettingsSection,
 		Operation,
 		Rule,
-		NcSettingsSection,
 	},
 	data() {
 		return {
 			showMoreOperations: false,
 			appstoreUrl: generateUrl('settings/apps/workflow'),
 			workflowDocUrl: loadState('workflowengine', 'doc-url'),
+			WorkflowOffSvg,
 		}
 	},
 	computed: {
@@ -90,14 +108,20 @@ export default {
 		hasMoreOperations() {
 			return Object.keys(this.operations).length > ACTION_LIMIT
 		},
-		getMainOperations() {
+		mainOperations() {
 			if (this.showMoreOperations) {
 				return Object.values(this.operations)
 			}
 			return Object.values(this.operations).slice(0, ACTION_LIMIT)
 		},
 		showAppStoreHint() {
-			return this.scope === 0 && this.appstoreEnabled && OC.isUserAdmin()
+			return this.appstoreEnabled && OC.isUserAdmin()
+		},
+		isUserAdmin() {
+			return OC.isUserAdmin()
+		},
+		isAdminScope() {
+			return this.scope === ADMIN_SCOPE
 		},
 	},
 	mounted() {