@kalisio/kdk 2.2.2 → 2.3.0

package/.eslintignore

@@ -0,0 +1 @@
+core/client/components/action/KAction.vue

package/.github/workflows/main.yaml

@@ -0,0 +1,67 @@
+name: ci
+on: [ push, workflow_dispatch ]
+
+jobs:
+  run_tests:
+    name: Run tests
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Init runner
+        run: bash ./scripts/init_runner.sh ${{ github.job }}
+      - name: Setup workspace
+        env:
+          KALISIO_GITHUB_URL: ${{ secrets.KALISIO_GITHUB_URL }}
+        run: bash ./scripts/setup_workspace.sh
+      - name: Run tests
+        env:
+          SOPS_AGE_KEY: ${{ secrets.SOPS_AGE_KEY }}
+        run: bash ./scripts/run_tests.sh -c -r ${{ github.job }}
+  
+  additional_tests:
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [ 18, 20 ]
+        mongo: [ 5, 6, 7 ]
+    name: Additional tests
+    if: ${{ contains(github.event.head_commit.message, 'additional tests') }}
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Init runner
+        run: bash ./scripts/init_runner.sh ${{ github.job }}
+      - name: Setup workspace
+        env:
+          KALISIO_GITHUB_URL: ${{ secrets.KALISIO_GITHUB_URL }}
+        run: bash ./scripts/setup_workspace.sh
+      - name: Run tests
+        env:
+          SOPS_AGE_KEY: ${{ secrets.SOPS_AGE_KEY }}
+        run: bash ./scripts/run_tests.sh -n ${{ matrix.node }} -m ${{ matrix.mongo }}
+
+  build_docs:
+    name: Build doc
+    if: ${{ startsWith(github.event.head_commit.message, 'docs:') || contains(github.event.head_commit.message, 'build doc') }}
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Init runner
+        run: bash ./scripts/init_runner.sh ${{ github.job }}
+      - name: Setup workspace
+        env:
+          KALISIO_GITHUB_URL: ${{ secrets.KALISIO_GITHUB_URL }}
+        run: bash ./scripts/setup_workspace.sh
+      - name: Build docs
+        env:
+          SOPS_AGE_KEY: ${{ secrets.SOPS_AGE_KEY }}
+        run: bash ./scripts/build_docs.sh -p -r ${{ github.job }}

package/.gitmodules

@@ -0,0 +1,3 @@
+[submodule "scripts/kash"]
+	path = scripts/kash
+	url = http://github.com/kalisio/kash

package/README.md

@@ -1,10 +1,9 @@
 [![KDK](https://s3.eu-central-1.amazonaws.com/kalisioscope/kdk/kdk-logo-color-512x192.png)](https://kalisio.github.io/kdk/)
 
 [![Latest Release](https://img.shields.io/github/v/tag/kalisio/kdk?sort=semver&label=latest)](https://github.com/kalisio/kdk/releases)
-[![Build Status](https://app.travis-ci.com/kalisio/kdk.svg?branch=master)](https://app.travis-ci.com/kalisio/kdk)
+[![CI](https://github.com/kalisio/kdk/actions/workflows/main.yaml/badge.svg)](https://github.com/kalisio/kdk/actions/workflows/main.yaml)
 [![Code Climate](https://codeclimate.com/github/kalisio/kdk/badges/gpa.svg)](https://codeclimate.com/github/kalisio/kdk)
 [![Test Coverage](https://codeclimate.com/github/kalisio/kdk/badges/coverage.svg)](https://codeclimate.com/github/kalisio/kdk/coverage)
-[![Dependency Status](https://img.shields.io/librariesio/github/kalisio/kdk?style=flat-square)](https://david-dm.org/kalisio/kdk)
 [![Documentation](https://img.shields.io/badge/documentation-available-brightgreen.svg)](https://kalisio.github.io/kdk/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 

package/core/api/hooks/hooks.query.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import { marshallComparisonFields, marshallSortFields, marshallTime } from '../marshall.js'
+import { marshallComparisonFields, marshallTime, marshallBooleanFields, marshallNumberFields, marshallDateFields } from '../marshall.js'
 import mongodb from 'mongodb'
 import makeDebug from 'debug'
 import { makeDiacriticPattern } from '../../common/utils.js'
@@ -27,7 +27,7 @@ export function marshallSortQuery (hook) {
   const query = hook.params.query
   if (query && query.$sort) {
     // Complex queries might have nested objects so we call a recursive function to handle this
-    marshallSortFields(query.$sort)
+    marshallNumberFields(query.$sort)
   }
 }
 
@@ -45,6 +45,19 @@ export function marshallCollationQuery (hook) {
   return hook
 }
 
+export function marshallHttpQuery (hook) {
+  const provider = _.get(hook.params, 'provider')
+  if (provider !== 'rest') return hook
+  const query = hook.params.query
+  if (query) {
+    // Need to convert from client/server side types : numbers, boolean, dates, ...
+    // ORder matters here as a boolean can be converted to number (0/1)
+    marshallNumberFields(query)
+    marshallBooleanFields(query)
+    marshallDateFields(query)
+  }
+}
+
 export async function aggregationQuery (hook) {
   const query = hook.params.query
   if (!query) return

package/core/api/marshall.js

@@ -23,21 +23,52 @@ export function marshallComparisonFields (queryObject) {
   })
 }
 
-// Helper function to convert sort operator values to numbers
-export function marshallSortFields (queryObject) {
+// Helper function to convert query parameters to numbers
+export function marshallNumberFields (queryObject) {
   _.forOwn(queryObject, (value, key) => {
     // Process current attributes or  recurse
     if (typeof value === 'object') {
-      marshallSortFields(value)
+      marshallNumberFields(value)
     } else {
       const number = _.toNumber(value)
       // Update from query string to number if required
-      if (!Number.isNaN(number)) {
+      if (_.isFinite(number)) {
         queryObject[key] = number
       }
     }
   })
 }
+// Helper function to convert query parameters to boolean
+export function marshallBooleanFields (queryObject) {
+  _.forOwn(queryObject, (value, key) => {
+    // Process current attributes or  recurse
+    if (typeof value === 'object') {
+      marshallBooleanFields(value)
+    } else if (typeof value === 'string') {
+      // Update from query string to boolean if required
+      if (value.toLowerCase() === 'true') {
+        queryObject[key] = true
+      } else if (value.toLowerCase() === 'false') {
+        queryObject[key] = false
+      }
+    }
+  })
+}
+// Helper function to convert query parameters to dates
+export function marshallDateFields (queryObject) {
+  _.forOwn(queryObject, (value, key) => {
+    // Process current attributes or  recurse
+    if (typeof value === 'object') {
+      marshallDateFields(value)
+    } else if (typeof value === 'string') {
+      // We use moment to validate the date
+      const date = moment.utc(value, moment.ISO_8601)
+      if (date.isValid()) {
+        queryObject[key] = date.toDate()
+      }
+    }
+  })
+}
 
 // Helper function to convert time objects or array of time objects
 export function marshallTime (item, property) {

package/core/client/api.js

@@ -162,7 +162,7 @@ export function createClient (config) {
   // Get the base URL/domain to be used (useful for mobile apps)
   api.getBaseUrl = function () {
     // We can override the default app origin anyway
-    const origin = config.origin || window.location.origin
+    const origin = config.domain || config.origin || window.location.origin
     // Check for registered custom base Url if any
     return LocalStorage.get(baseUrlStorageKey, origin)
   }

package/core/client/components/KActivity.vue

@@ -0,0 +1,73 @@
+<template>
+  <KPage>
+    <template v-slot:page-content>
+      <slot  />
+    </template>
+  </KPage>
+</template>
+
+<script>
+import _ from 'lodash'
+import logger from 'loglevel'
+import config from 'config'
+import { useActivity, useLayout } from '../composables'
+import KPage from './layout/KPage.vue'
+
+export default {
+  components: {
+    KPage
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    layout: {
+      type: [Object, Function],
+      default: () => null
+    }
+  },
+  setup (props) {
+    const keyName = `${_.camelCase(props.name)}Activity`
+    logger.debug(`[KDK] Reading '${props.name}' activity options with key ${keyName}`)
+    const options = _.get(config, keyName, {})
+    const { setCurrentActivity } = useActivity(keyName, options)
+    const { configureLayout, clearLayout } = useLayout()
+    return {
+      options,
+      setCurrentActivity,
+      configureLayout,
+      clearLayout
+    }
+  },
+  methods: {
+    async configure () {
+      logger.debug(`[KDK] Configuring '${this.name}' activity`)
+      // because this component is wrapped within an AsyncComponent it returns the grand parent
+      const concreteActivity = this.$parent.$parent
+      // configure the layout
+      let customLayout = {}
+      if (this.layout) {
+        if (typeof this.layout === 'function') customLayout = await this.layout()
+        else customLayout = this.layout
+      }
+      this.configureLayout(_.merge({}, this.options, customLayout), concreteActivity)
+      // set the current activity
+      this.setCurrentActivity(concreteActivity)
+    }
+  },
+  async mounted () {
+    await this.configure()
+    // whenever the user abilities are updated, update activity as well
+    this.$events.on('user-abilities-changed', this.configure)
+  },
+  beforeUnmount () {
+    logger.debug(`[KDK] Clearing '${this.name}' activity`)
+    this.$events.off('user-abilities-changed', this.configure)
+    // clear the current activity
+    this.setCurrentActivity(null)
+    // Clear the layout
+    this.clearLayout()
+  }
+}
+</script>

package/core/client/components/KContent.vue

@@ -103,7 +103,7 @@ function getComponents (content, mode) {
   // Then create component objects
   _.forEach(components, component => {
     // Get the component and add the required props
-    component.name = _.get(component, 'component', 'KAction')
+    component.name = _.get(component, 'component', 'action/KAction')
     component.uid = uid()
     processedComponents.push(component)
   })

package/core/client/components/KSponsor.vue

@@ -15,7 +15,7 @@
     </div>
     <!-- Kalisio logo -->
     <a href="https://kalisio.com" target="_blank">
-      <q-img src="kalisio.png" :width="computedLogoWidth">
+      <q-img src="kalisio.png" width="64px">
         <q-tooltip>
           {{ $t('KSponsor.MORE_ABOUT_KALISIO') }}
         </q-tooltip>
@@ -25,16 +25,5 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useQuasar } from 'quasar'
-import KAction from './KAction.vue'
-
-// Data
-const $q = useQuasar()
-
-// Computed
-const computedLogoWidth = computed(() => {
-  if ($q.screen.lt.sm) return '64px'
-  return '72px'
-})
+import KAction from './action/KAction.vue'
 </script>

package/core/client/components/account/KDeleteAccountManager.vue

@@ -18,7 +18,7 @@ import _ from 'lodash'
 import { useRouter } from 'vue-router'
 import { Dialog } from 'quasar'
 import { Store, i18n, api } from '../..'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // Data
 const router = useRouter()

package/core/client/components/account/KPasswordManager.vue

@@ -26,7 +26,7 @@ import { ref } from 'vue'
 import { Notify } from 'quasar'
 import { Store, i18n, utils } from '../..'
 import KForm from '../form/KForm.vue'
-import KAction from '../KAction.vue'
+import KAction from '../action/KAction.vue'
 
 // Data
 const formRef = ref(null)

package/core/client/components/action/KAction.vue

@@ -0,0 +1,294 @@
+<template>
+  <!--
+    Button renderer
+   -->
+  <q-btn v-if="renderer === 'button'"
+    :id="id"
+    no-caps
+    no-wrap
+    :color="computedColor"
+    :icon="!iconRight ? computedIcon : undefined"
+    :icon-right="iconRight ? computedIcon : undefined"
+    :size="size"
+    flat
+    :round="label === null"
+    :rounded="label !== null"
+    :stack="stack"
+    :dense="dense"
+    :disable="computedDisabled"
+    v-close-popup="closePopup"
+    @click="onClicked">
+    <!-- label -->
+    <div v-if="computedLabel" :class="{ 'ellipsis q-pr-md': iconRight, 'ellipsis q-pl-md': !iconRight }">
+      {{ computedLabel }}
+    </div>
+    <!-- tooltip -->
+    <q-tooltip v-if="computedTooltip">
+      {{ computedTooltip }}
+    </q-tooltip>
+    <!-- badge -->
+    <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
+      <q-icon v-if="badge.icon" v-bind="badge.icon" />
+    </q-badge>
+    <!-- extra content -->
+    <slot>
+    </slot>
+  </q-btn>
+  <!--
+    Form button renderer
+   -->
+  <q-btn v-else-if="renderer === 'form-button'"
+    :id="id"
+    no-wrap
+    color="primary"
+    :outline="outline"
+    :size="size"
+    :disable="computedDisabled"
+    :loading="loading"
+    v-close-popup="closePopup"
+    @click="onClicked">
+    <div class="ellipsis">
+      {{ computedLabel }}
+    </div>
+  </q-btn>
+  <!--
+    Item renderer
+   -->
+  <q-item v-else-if="renderer === 'item'"
+    :id="id"
+    class="full-width"
+    clickable
+    :dense="dense"
+    :disable="computedDisabled"
+    v-close-popup="closePopup"
+    @click="onClicked">
+    <q-item-section v-if="computedIcon || badge" avatar>
+      <q-icon v-if="computedIcon" :name="computedIcon" :color="computedColor" :dense="dense" />
+      <!-- badge -->
+      <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
+        <q-icon v-if="badge.icon" v-bind="badge.icon" />
+      </q-badge>
+    </q-item-section>
+    <q-item-section :class="'text-' + computedColor" no-wrap>
+      <q-item-label :lines="1">{{ computedLabel }}</q-item-label>
+    </q-item-section>
+  </q-item>
+  <!--
+    Fab renderer
+   -->
+  <q-btn v-else-if="renderer === 'fab'"
+    :id="id"
+    class="k-action-fab"
+    :icon="computedIcon"
+    :color="computedColor"
+    :size="size"
+    :round="true"
+    :dense="dense"
+    :disable="computedDisabled"
+    @click="onClicked">
+    <!-- tooltip -->
+    <q-tooltip v-if="computedTooltip" anchor="top middle" self="bottom right">
+      {{ computedTooltip }}
+    </q-tooltip>
+    <!-- badge -->
+    <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
+      <q-icon v-if="badge.icon" v-bind="badge.icon" />
+    </q-badge>
+  </q-btn>
+  <!--
+  Fab action renderer
+  -->
+  <q-fab-action v-else-if="renderer === 'fab-action'"
+    :id="id"
+    class="k-action-fab-action"
+    no-caps
+    :icon="computedIcon"
+    :color="computedColor"
+    :label="computedLabel"
+    square
+    external-label
+    :label-position="iconRight ? 'left' : 'right'"
+    label-class="bg-primary text-white text-caption k-fab-action"
+    :disable="computedDisabled"
+    @click="onClicked">
+    <!-- badge -->
+    <q-badge v-if="badge" v-bind="badge">
+      <q-icon v-if="badge.icon" v-bind="badge.icon" />
+    </q-badge>
+  </q-fab-action>
+  <!--
+    Tab renderer
+  -->
+  <q-btn v-else-if="renderer === 'tab'"
+    :class="{'k-action-tab-active': isToggled }"
+    :id="id"
+    no-caps
+    no-wrap
+    :label="computedLabel"
+    :color="computedColor"
+    :size="size"
+    flat
+    square
+    :dense="dense"
+    :disable="computedDisabled"
+    @click="onClicked">
+    <!-- tooltip -->
+    <q-tooltip v-if="computedTooltip">
+      {{ computedTooltip }}
+    </q-tooltip>
+    <!-- badge -->
+    <q-badge v-if="badge" v-bind="badge" :label="computedBadgeLabel">
+      <q-icon v-if="badge.icon" v-bind="badge.icon" />
+    </q-badge>
+    <!-- extra content -->
+    <slot>
+    </slot>
+  </q-btn>
+</template>
+
+<script>
+// WARNING for now we must declare the inheritAttrs this way. Lint will try to move it. Don't do it.
+// TODO: need to updated when switch to vue > 3.3 to be able to declare options
+export default {
+  inheritAttrs: false
+}
+</script>
+
+<script setup>
+import _ from 'lodash'
+import { ref, toRef, computed, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useQuasar, openURL } from 'quasar'
+import { i18n } from '../../i18n.js'
+import { actionProps } from '../../utils/utils.actions'
+import { bindParams } from '../../utils/utils.content.js'
+
+// Data
+const route = useRoute()
+const router = useRouter()
+const $q = useQuasar()
+const props = defineProps(actionProps)
+const isToggled = _.has(props, 'toggle.value') ? toRef(props.toggle, 'value') : ref(props.toggled)
+
+// Emit
+const emit = defineEmits(['triggered', 'toggled', 'dialog-confirmed', 'dialog-canceled'])
+
+// Computed
+const computedLabel = computed(() => {
+  // Check also for translation key or already translated message
+  if (isToggled.value && _.has(props.toggle, 'label')) return i18n.tie(props.toggle.label)
+  return i18n.tie(props.label)
+})
+const computedIcon = computed(() => {
+  if (isToggled.value && _.has(props.toggle, 'icon')) return props.toggle.icon
+  return props.icon
+})
+const computedColor = computed(() => {
+  if (isToggled.value) return _.get(props.toggle, 'color', 'accent')
+  return props.color
+})
+const computedDisabled = computed(() => {
+  if (!props.disabled) return false
+  if (typeof props.disabled === 'function') return props.disabled()
+  return props.disabled
+})
+const computedTooltip = computed(() => {
+  if (computedDisabled.value) return
+  // Check also for translation key or already translated message
+  if (isToggled.value && _.has(props.toggle, 'tooltip')) return i18n.tie(props.toggle.tooltip)
+  return i18n.tie(props.tooltip)
+})
+const computedBadgeLabel = computed(() => {
+  // Check also for translation key or already translated message
+  if (props.badge && _.has(props.badge, 'label')) return i18n.tie(props.badge.label)
+  // Take care that changing this to null or '' breaks the display in Quasar
+  return undefined
+})
+const dense = computed(() => {
+  return $q.screen.lt.sm
+})
+
+// Functions
+function toggle () {
+  isToggled.value = !isToggled.value
+  emit('toggled', props.context, isToggled.value)
+}
+function bindRouteParams (path) {
+  // When action is created from code we can directly inject the params.
+  // However, when created from the config we need to manage dynamic values.
+  // A parameter like ':xxx' in config means xxx is a dynamic property of
+  // the current route or the context object, not a static value.
+  // We bind the target params object to both possible context.
+  const currentParams = _.get(route, path, {})
+  const targetParams = _.get(props.route, path, {})
+  const routeParams = bindParams(targetParams, currentParams)
+  const contextParams = bindParams(targetParams, props.context)
+  return _.merge(routeParams, contextParams)
+}
+async function onClicked (event) {
+  if (!props.propagate) event.stopPropagation()
+  // handle the toggle if needed
+  if (props.toggle) toggle()
+  // handle the URL case
+  if (props.url) openURL(props.url)
+  // handle the callback case
+  if (props.handler) {
+    try {
+      await props.handler(props.context, isToggled.value)
+    } catch (error) {
+      // in case an error is raised we assume toggling has failed
+      if (props.toggle) toggle()
+      throw error
+    }
+    return
+  }
+  // handle the route case
+  if (props.route) {
+    // allow to directly call a given URL, eg OAuth callback
+    if (props.route.url) {
+      location.href = props.route.url
+    } else {
+      // process route params
+      router.push(Object.assign({
+        query: bindRouteParams('query'),
+        params: bindRouteParams('params')
+      }, _.omit(props.route, ['query', 'params']))).catch(() => {})
+    }
+    return
+  }
+  // handle the dialog case
+  if (props.dialog) {
+    let dialog = props.dialog
+    const component = _.get(props.dialog, 'component')
+    if (component) {
+      dialog = {
+        component: 'KDialog',
+        componentProps: _.clone(dialog)
+      }
+    }
+    $q.dialog(dialog)
+      .onOk((result) => {
+        emit('dialog-confirmed', props.context, result)
+      })
+      .onCancel((result) => {
+        emit('dialog-canceled', props.context, result)
+      })
+  }
+  // notify listeners
+  emit('triggered', props.context, isToggled.value)
+}
+
+// Watch
+watch(() => props.toggled, (value) => {
+  if (isToggled.value !== value) isToggled.value = value
+})
+</script>
+
+<style lang="scss" scoped>
+.k-action-fab, .k-action-fab-action {
+  border: 2px solid var(--q-secondary);
+}
+.k-action-tab-active {
+  border-bottom: solid 2px;
+}
+</style>

package/core/client/components/action/KBugReportAction.vue

@@ -0,0 +1,37 @@
+<template>
+  <KAction
+    v-bind="props"
+    :url="url"
+  />
+</template>
+
+<script setup>
+import _ from 'lodash'
+import config from 'config'
+import { ref } from 'vue'
+import { i18n } from '../../i18n'
+import { getPlatform } from '../../utils/utils.platform'
+import { actionProps } from '../../utils/utils.actions'
+import { useVersion } from '../../composables'
+import KAction from './/KAction.vue'
+
+// Data
+const props = defineProps(_.omit(actionProps, ['toggle', 'url', 'handler', 'route', 'dialog']))
+const { clientVersionName, apiVersionName } = useVersion()
+const platform = getPlatform()
+
+// Setup bug report info
+const bugReport = {
+  address: _.get(config, 'publisherContact'),
+  subject: i18n.t('KAbout.BUG_REPORT_SUBJECT', {
+    appName: _.get(config, 'appName'),
+    clientVersion: clientVersionName.value,
+    apiVersion: apiVersionName.value
+  }),
+  body: i18n.t('KAbout.BUG_REPORT_BODY')
+}
+_.forOwn(platform, (value, key) => { bugReport.body += `${key}: ${value}%0D%0A` })
+bugReport.body += `domain: ${_.get(config, 'domain')}%0D%0A`
+bugReport.body += `flavor: ${_.get(config, 'flavor')}%0D%0A`
+const url = ref(`mailto:${bugReport.address}?subject=${bugReport.subject}&body=${bugReport.body}`)
+</script>

package/core/client/components/action/index.js

@@ -0,0 +1,7 @@
+import KAction from './KAction.vue'
+import KBugReportAction from './KBugReportAction.vue'
+
+export {
+  KAction,
+  KBugReportAction
+}