Browse Source

[frontend] Various improvements to the new assist panel components

Johan Åhlén 4 years ago
parent
commit
08c22b150d

+ 2 - 2
desktop/core/src/desktop/js/catalog/contextCatalog.ts

@@ -28,13 +28,13 @@ import {
   REFRESH_CONTEXT_CATALOG_TOPIC
 } from './events';
 
-interface GetOptions {
+export interface GetOptions {
   connector: IdentifiableInterpreter;
   clearCache?: boolean;
   silenceErrors?: boolean;
 }
 
-interface ConnectorNamespaces {
+export interface ConnectorNamespaces {
   dynamic?: boolean;
   hueTimestamp: number;
   namespaces: Namespace[];

+ 11 - 8
desktop/core/src/desktop/js/components/SqlContextSelector.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, PropType, ref, toRefs } from 'vue';
+  import { defineComponent, onMounted, PropType, ref, toRefs } from 'vue';
 
   import DropdownMenuButton from './dropdown/DropdownMenuButton.vue';
   import DropdownMenu from './dropdown/DropdownMenu.vue';
@@ -41,22 +41,22 @@
         type: Boolean,
         default: false
       },
-      modelValue: {
-        type: Object as PropType<SqlContext | null>,
+      fixedDialect: {
+        type: String as PropType<string | null>,
         default: null
       },
       listView: {
         type: Boolean,
         default: false
       },
-      filterDialect: {
-        type: String as PropType<string | null>,
+      modelValue: {
+        type: Object as PropType<SqlContext | null>,
         default: null
       }
     },
     emits: ['update:model-value'],
     setup(props, { emit }) {
-      const { modelValue, allowNull, filterDialect } = toRefs(props);
+      const { modelValue, allowNull, fixedDialect } = toRefs(props);
       const subTracker = new SubscriptionTracker();
       const connectors = ref<EditorInterpreter[]>([]);
 
@@ -78,7 +78,7 @@
       const updateConnectors = () => {
         connectors.value = filterEditorConnectors(
           connector =>
-            connector.is_sql && (!filterDialect.value || connector.dialect === filterDialect.value)
+            connector.is_sql && (!fixedDialect.value || connector.dialect === fixedDialect.value)
         );
 
         let updatedConnector: EditorInterpreter | null = null;
@@ -101,7 +101,10 @@
         connectorSelected(updatedConnector || null);
       };
 
-      getConfig().then(updateConnectors);
+      onMounted(() => {
+        getConfig().then(updateConnectors);
+      });
+
       subTracker.subscribe<ConfigRefreshedEvent>(CONFIG_REFRESHED_TOPIC, updateConnectors);
 
       return { connectors, connectorSelected, I18n };

+ 1 - 1
desktop/core/src/desktop/js/components/assist/AssistPanel.vue

@@ -19,7 +19,7 @@
 <template>
   <div class="hue-assist-panel">
     <HueIcons />
-    <SqlAssistPanel :use-breadcrumbs="true" />
+    <SqlAssistPanel :use-breadcrumbs="true" :show-first-level-arrows="false" />
   </div>
 </template>
 

+ 22 - 2
desktop/core/src/desktop/js/components/assist/SqlAssistEntry.vue

@@ -24,6 +24,9 @@
     @click="onEntryClick"
   >
     <span>
+      <DropRightIcon v-if="showFirstLevelArrows && !open" />
+      <DropDownIcon v-else-if="showFirstLevelArrows && open" />
+
       <DatabaseIcon v-if="entry.isDatabase()" />
       <ViewIcon v-else-if="entry.isView()" />
       <TableIcon v-else-if="entry.isTable()" />
@@ -39,7 +42,10 @@
     </ul>
     <ul v-if="!loadingChildren && children && children.length">
       <li v-for="childEntry in children" :key="childEntry.getQualifiedPath()">
-        <SqlAssistEntry :entry="childEntry" />
+        <SqlAssistEntry
+          :entry="childEntry"
+          :show-first-level-arrows="root && showFirstLevelArrows"
+        />
       </li>
     </ul>
   </div>
@@ -50,6 +56,8 @@
 
   import ColumnIcon from '../icons/ColumnIcon';
   import DatabaseIcon from '../icons/DatabaseIcon';
+  import DropDownIcon from '../icons/DropDownIcon';
+  import DropRightIcon from '../icons/DropRightIcon';
   import TableIcon from '../icons/TableIcon';
   import ViewIcon from '../icons/ViewIcon';
   import Spinner from '../Spinner.vue';
@@ -57,7 +65,15 @@
 
   export default defineComponent({
     name: 'SqlAssistEntry',
-    components: { ColumnIcon, ViewIcon, TableIcon, DatabaseIcon, Spinner },
+    components: {
+      DropDownIcon,
+      DropRightIcon,
+      ColumnIcon,
+      ViewIcon,
+      TableIcon,
+      DatabaseIcon,
+      Spinner
+    },
     props: {
       entry: {
         type: Object as PropType<DataCatalogEntry>,
@@ -66,6 +82,10 @@
       root: {
         type: Boolean,
         default: false
+      },
+      showFirstLevelArrows: {
+        type: Boolean,
+        default: false
       }
     },
     setup(props) {

+ 1 - 0
desktop/core/src/desktop/js/components/assist/SqlAssistPanel.scss

@@ -42,6 +42,7 @@
   ul {
     font-size: 12px;
     margin: 0;
+    padding: 0;
 
     .hi {
       font-size: 16px;

+ 18 - 3
desktop/core/src/desktop/js/components/assist/SqlAssistPanel.vue

@@ -31,6 +31,7 @@
     <SqlContextSelector
       v-if="!activeSqlContext"
       v-model="activeSqlContext"
+      :fixed-dialect="fixedDialect"
       :list-view="true"
       :allow-null="true"
     />
@@ -53,12 +54,18 @@
         </div>
       </li>
     </ul>
-    <SqlAssistEntry v-if="rootEntry" :entry="rootEntry" :root="true" />
+
+    <SqlAssistEntry
+      v-if="rootEntry"
+      :entry="rootEntry"
+      :root="true"
+      :show-first-level-arrows="showFirstLevelArrows"
+    />
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref, toRefs, watch } from 'vue';
+  import { defineComponent, PropType, ref, toRefs, watch } from 'vue';
 
   import './SqlAssistPanel.scss';
   import SqlAssistEntry from './SqlAssistEntry.vue';
@@ -83,8 +90,16 @@
       SqlContextSelector
     },
     props: {
+      fixedDialect: {
+        type: String as PropType<string | null>,
+        default: null
+      },
+      showFirstLevelArrows: {
+        type: Boolean as PropType<boolean>,
+        default: false
+      },
       useBreadcrumbs: {
-        type: Boolean,
+        type: Boolean as PropType<boolean>,
         default: true
       }
     },