[Integrations UI] Added configuration tab.

This commit is contained in:
Fabio Manganiello 2023-10-16 02:30:03 +02:00
parent b19725c72c
commit 99e98f70f4
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
6 changed files with 83 additions and 6 deletions

View file

@ -0,0 +1,67 @@
<template>
<div class="config-container" ref="root">
<button class="copy-button"
ref="copyButton"
title="Copy to clipboard"
:data-clipboard-text="extension.config_snippet"
@click="copyToClipboard(extension.config_snippet)">
<i class="fas fa-clipboard" />
</button>
<pre><code class="config-snippet" v-html="highlightedConfigSnippet" /></pre>
</div>
</template>
<script>
import 'highlight.js/lib/common'
import 'highlight.js/styles/stackoverflow-dark.css'
import hljs from "highlight.js"
import Utils from "@/Utils";
export default {
name: "Extension",
mixins: [Utils],
props: {
extension: {
type: Object,
required: true,
},
},
computed: {
highlightedConfigSnippet() {
return hljs.highlight(
'yaml',
this.extension.config_snippet,
).value.trim()
},
},
}
</script>
<style lang="scss" scoped>
.config-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
.copy-button {
position: absolute;
top: 0;
right: 0;
background: none;
color: $code-dark-fg;
border: none;
padding: 0.5em;
font-size: 1.5em;
cursor: pointer;
}
pre {
width: 100%;
margin: 0;
background: $code-dark-bg;
padding: 0.5em;
}
}
</style>

View file

@ -67,7 +67,7 @@ export default {
return
}
let [_, type, name] = match
let [type, name] = match.slice(1)
if (type === 'backend')
name = `backend.${name}`

View file

@ -12,8 +12,8 @@
<span class="from tablet">Install</span>
</Tab>
<Tab :selected="selectedTab === 'conf'" icon-class="fas fa-square-check"
@input="selectedTab = 'conf'">
<Tab :selected="selectedTab === 'config'" icon-class="fas fa-square-check"
@input="selectedTab = 'config'">
<span class="from tablet">Configuration</span>
</Tab>
@ -26,6 +26,7 @@
<div class="extension-body">
<Doc v-if="selectedTab === 'doc'" :extension="extension" />
<Config v-else-if="selectedTab === 'config'" :extension="extension" />
</div>
</div>
</template>
@ -33,15 +34,18 @@
<script>
import Tab from "@/components/elements/Tab"
import Tabs from "@/components/elements/Tabs"
import Config from "./Config"
import Doc from "./Doc"
export default {
name: "Extension",
components: {
Config,
Doc,
Tab,
Tabs,
},
props: {
extension: {
type: Object,
@ -60,7 +64,7 @@ export default {
<style lang="scss" scoped>
@import "src/style/items";
$header-height: 4em;
$header-height: 3.6em;
.extension {
width: 100%;
@ -81,6 +85,8 @@ $header-height: 4em;
.extension-body {
height: calc(100% - #{$header-height});
display: flex;
flex-direction: column;
overflow: auto;
:deep(section) {

View file

@ -42,7 +42,7 @@
import Loading from "@/components/Loading"
import Utils from "@/Utils"
import Extension from "./Extension"
import { bus } from "@/bus";
import { bus } from "@/bus"
export default {
name: "Extensions",
@ -50,7 +50,6 @@ export default {
components: {
Extension,
Loading,
Utils,
},
data() {

View file

@ -164,3 +164,7 @@ $scrollbar-thumb-bg: #a5a2a2 !default;
//// Rows
$row-shadow: 0 0 1px 0.5px #cfcfcf !default;
//// Code blocks
$code-dark-bg: #090909 !default;
$code-dark-fg: #f0f0f0 !default;

View file

@ -76,6 +76,7 @@ class Integration(Component, DocstringParser, Serializable):
for e in self.events
},
"deps": self.deps.to_dict(),
"config_snippet": self.config_snippet,
}
@classmethod