Merge pull request 'master' (#13 ) from master into prod

Reviewed-on: #13
improved display
2024-04-23 18:26:23 +02:00 · 2024-04-23 16:46:47 +02:00 · 2024-04-23 16:41:53 +02:00 · 2024-04-23 12:50:58 +02:00 · 2024-04-17 17:47:28 +02:00 · 2024-04-17 17:12:30 +02:00
10 changed files with 1024 additions and 751 deletions
--- a/boot/d4s-boot.js
+++ b/boot/d4s-boot.js
@ -124,14 +124,14 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
          }).then(token => {
            console.log("Authorized. Token exp: " + this.expirationDate(this.parseJwt(token).exp))
            //transform all queued requests to fetches
-            console.log("All pending requests to promises")
+            //console.log("All pending requests to promises")
            let promises = this.#queue.map(r => {
              r.request.headers["Authorization"] = "Bearer " + token
              return r.resolve( fetch(r.url, r.request) )
            })
            //clear queue
            this.#queue = []
-            console.log("Resolving all fetches")
+            //console.log("Resolving all fetches")
            return Promise.all(promises)

          }).catch(err => console.error("Unable to make calls: " + err)) // Sometimes throws: Unable to make calls: TypeError: Cannot read properties of undefined (reading 'split')
@ -177,7 +177,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
      } else {
        req.headers = { "Authorization" : null}
      }
-      console.log("Queued request to url ", url)
+      //console.log("Queued request to url ", url)
      this.#queue.push({ url : url, request : req, resolve : resolve, reject : reject})
    })
    return p
@ -202,7 +202,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
        .then(response => response.json())
        .then(json => {
          this.#config = json
-          console.log("Keycloak uma2 configuration loaded")
+          //console.log("Keycloak uma2 configuration loaded")
          resolve(true)
        })
        .catch(err => reject("Failed to fetch uma2-configuration from server: " + err))
--- a/ccp/index.html
+++ b/ccp/index.html
@ -0,0 +1,34 @@
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8" />
+        <script src="js/methodlistcontroller.js"></script>
+        <script src="js/methodeditorcontroller.js"></script>
+        <script src="js/inputwidgeteditorcontroller.js"></script>
+        <script src="js/outputwidgeteditorcontroller.js"></script>
+        <script src="js/executionformcontroller.js"></script>
+        <script src="js/inputwidgetcontroller.js"></script>
+        <script src="js/outputwidgetcontroller.js"></script>
+        <link href="css/common.css" rel="stylesheet">
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
+        <script src="https://cdn.cloud-dev.d4science.org/common/js/bss-min-1.2.6.js"></script>
+        <script src="../storage/d4s-storage.js"></script>
+    </head>
+
+    <body class="m-4">
+        <d4s-boot-2 clientid="https://next.dev.d4science.org" context="%2Fgcube%2Fdevsec%2FCCP" gateway="next.dev.d4science.org" redirect-url="http://localhost:8080/ccp/index.html" url="https://accounts.dev.d4science.org/auth"> <script src="https://cdn.dev.d4science.org/boot/d4s-boot.js"></script> </d4s-boot-2>
+        <div class="row">
+            <div class="col">
+                <d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org" allow-edit="true"></d4s-ccp-methodlist>
+            </div>
+            <div class="col">
+                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+                <d4s-ccp-methodeditor serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodeditor>
+            </div>
+            <div class="col">
+                <d4s-ccp-executionform serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionform>
+            </div>
+        </div>
+        
+    </body>
+</html>
--- a/ccp/js/executionformcontroller.js
+++ b/ccp/js/executionformcontroller.js
@ -55,8 +55,9 @@ class CCPExecutionForm extends HTMLElement{
  render(){
    this.#rootdoc.innerHTML = `
      <div>
+        <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
        <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
        <style>
          .ccp-execution-form{
            position: relative;
@ -94,12 +95,12 @@ class CCPExecutionForm extends HTMLElement{
                  <h5>Outputs</h5>
                </div>
                <div class="card-body">
-                  <div class="form-row ccp-outputs">
+                  <div class="row ccp-outputs">
                    <div class="col form-group"></div>
                  </div>
                </div>
              </div>
-              <div class="form-row">
+              <div class="row">
                <div class="col-6">
                  <button id="execute_method_button" class="btn btn-info">Execute</button>
                </div>
--- a/ccp/js/inputwidgetcontroller.js
+++ b/ccp/js/inputwidgetcontroller.js
@ -12,37 +12,57 @@ class CCPInputWidgetController extends HTMLElement {
    if (this.isChecklist()) {

      const opts = this.#data.schema.enum.join(",")
-      this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
+      this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
+      this.querySelector("d4s-ccp-input-checklist").default = this.#data.schema.default

    } else if (this.isEnum()) {

      const opts = this.#data.schema.enum.join(",")
-      this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`    
+      this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
+      this.querySelector("d4s-ccp-input-enum").default = this.#data.schema.default
+
    } else if (this.isCode()) {
-      this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
+      
+      this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
+      this.querySelector("d4s-ccp-input-textarea").default = this.#data.schema.default

    } else if (this.isDateTime()) {
+      
      const t = this.#data.schema.format.toLowerCase() === "datetime" ?
        "datetime-local" : this.#data.schema.format.toLowerCase()
-      this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default

    } else if (this.isFile()) {
-      this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
+      
+      this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
+      this.querySelector("d4s-ccp-input-file").default = this.#data.schema.default

    } else if (this.isRemoteFile()) {
-      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
+      
+      this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
+      this.querySelector("d4s-ccp-input-remotefile").default = this.#data.schema.default

    } else if (this.isSecret()) {
-      this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
+      
+      this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs }" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
+      this.querySelector("d4s-ccp-input-secret").default = this.#data.schema.default

    } else if (this.isBoolean()) {
-      this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
+      
+      this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
+      this.querySelector("d4s-ccp-input-boolean").default = this.#data.schema.default

    } else if (this.isNumber()) {
-      this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      
+      this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default

    } else {
-      this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      
+      this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
+      this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
+
    }
  }

@ -142,9 +162,10 @@ class CCPBaseInputWidgetController extends HTMLElement{
    this.#name = this.getAttribute("name")
    this.#title = this.getAttribute("title")
    this.#description = this.getAttribute("description")
-    this.#default = this.getAttribute("default")
+    //this.#default = this.getAttribute("default")
    this.#minOccurs = Number(this.getAttribute("minoccurs") ? this.getAttribute("minoccurs") : 1)
    this.#maxOccurs = Number(this.getAttribute("maxoccurs") ? this.getAttribute("maxoccurs") : 1)
+    this.#maxOccurs = Math.max(this.#minOccurs, this.#maxOccurs)
    this.#readonly = this.getAttribute("readonly") === "true"

    // coalesce all basic input types
@ -153,7 +174,22 @@ class CCPBaseInputWidgetController extends HTMLElement{
    // Handle enum case
    this.#options = (this.getAttribute("options") ? this.getAttribute("options").split(",") : null)

-    this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
+    //this.value = Array(Math.max(this.#minOccurs, 1)).fill(this.#default)
+  }
+
+  set default(def){
+    this.#default = def
+    const defarr = Array.isArray(def) ? def : [def]
+    const min = Math.max(this.#minOccurs, 1)
+    var v = []
+    for(let j=0; j < this.#maxOccurs; j++){
+      if(j < defarr.length){
+        v.push(defarr[j])
+      }else if(j < min){
+        v.push(defarr[defarr.length - 1])
+      }
+    }
+    this.value = v
  }

  setValue(v) {
@ -218,10 +254,6 @@ class CCPBaseInputWidgetController extends HTMLElement{
    return this.#options
  }

-  set default(v){
-    this.#default = v
-  }
-  
  get type() {
    return this.#type
  }
@ -239,7 +271,6 @@ class CCPBaseInputWidgetController extends HTMLElement{

  render() {
    this.rootdoc.innerHTML = `
-      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
      <div name="root" class="my-3 ccp-input-widget form-field row">
        <label class="form-label">
          <div class="d-flex justify-content-between">
@ -267,13 +298,15 @@ class CCPBaseInputWidgetController extends HTMLElement{
    this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev => {
      const src = ev.target.getAttribute("name")
      if (src === "plus") {
-        this.#value.push(this.#default)
+        this.#value.push(this.#value[this.#value.length - 1])
        this.renderPlusMinus()
        this.renderContent()
+        ev.preventDefault()
      } else if (src === "minus") {
        this.#value.pop()
        this.renderPlusMinus()
        this.renderContent()
+        ev.preventDefault()
      }
    })
  }
@ -326,14 +359,18 @@ class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{

  content() {
    if (this.value.length <= 1) {
-      const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n")
+      const opts = this.options ?
+        this.options.map(o => `<option value="${o}" ${this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n") :
+        ''
      return `<select data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>`
    }
    var out =
-      this.value.map((c,i)=>{
-        const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length >= i && c === this.value[i] ? 'selected' : ''}>${o}</option>`).join("\n")
+      this.value.map((v, i) => {
+        const opts = this.options ?
+          this.options.map(o => `<option value="${o}" ${o === v ? 'selected' : ''}>${o}</option>`).join("\n") :
+          ''
        return `
-          <select data-index="${i}" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
+          <select data-index="${i}" value="${v}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
        `
      }).join("\n")
    return out
@ -360,11 +397,16 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
  }

  buildOpts(index, selections) {
-    return this.options.map(o=>`
+    return this.options ? this.options.map(o => `
        <div class="form-check form-switch form-check-inline">
          <label>${o}</label>
          <input data-index="${index}" class="form-check-input" type="checkbox" name="${this.name}" value="${o}" ${this.readonly ? 'readonly' : ''} ${selections.indexOf(o) > -1 ? 'checked' : ''}/></div>
-    `).join("\n")
+      `).join("\n") :
+      `
+        <div class="form-check form-switch form-check-inline">
+          <span class="muted text-danger">No options supplied</span>
+        </div>
+      `
  }

  content() {
@ -397,7 +439,6 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
  }

  connectedCallback() {
-    this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
    this.rootdoc.addEventListener("input", ev => {
      if (ev.target.getAttribute("name") === this.name) {
        const index = Number(ev.target.getAttribute("data-index"))
@ -410,7 +451,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
    if (this.value.length <= 1) {
      return `
        <div class="my-2 form-check form-switch form-check-inline">
-          <input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] == "true" ? 'checked' : ''} value="${ this.value[0]}"/>
+          <input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] === "true" || this.value[0] === true ? 'checked' : ''} value="${this.value[0]}"/>
        </div>
      `
    }
@ -418,7 +459,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
      this.value.map((c, i) => {
        return `
          <div class="my-2 form-check form-switch form-check-inline">
-            <input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c == "true" ? 'checked' : ''} value="${this.value[i]}"/>
+            <input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c === "true"  || c === true ? 'checked' : ''}/>
          </div>
        `
      }).join("\n")
@ -483,7 +524,10 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
            encoded += '='.repeat(4 - (encoded.length % 4));
          }
          this.value[index] = encoded
-          this.querySelector("small[name=preview]").textContent = encoded.substr(0,5) + "..." + encoded.substr(encoded.length-5)
+          this.querySelector("small[name=preview]").textContent = 
+            encoded.length > 15 ? encoded.substring(0, 5) + "..." + encoded.substring(encoded.length - 5) : encoded
+          const newev = new Event("input", { bubbles : true})
+          this.dispatchEvent(newev)
        })
        reader.readAsDataURL(file)
      }
@ -493,16 +537,18 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
  content() {
    if (this.value.length <= 1) {
      const v = this.value.length ? this.value[0] : ''
+      const preview = typeof(v) === "string" ? v.substring(0, 5) + "..." + v.substring(v.length - 5) : ""
      return `
        <input type="file" data-index="0" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required && !v ? 'required' : ''} value="${v}"/>
-        <small name ="preview" class="form-text text-muted">${v.substr(0,5) + "..." + v.substr(v.length-5)}</small>
+        <small name ="preview" class="form-text text-muted">${preview}</small>
      `
    }
    var out =
      this.value.map((c, i) => {
+        const preview = typeof(v) === "string" ? c.substring(0, 5) + "..." + c.substring(v.length - 5) : ""
        return `
          <input type="file" data-index="${i}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''} value="${c}"/>
-          <small name ="preview" class="form-text text-muted">${c.substr(0,5) + "..." + c.substr(s.length-5)}</small>
+          <small name ="preview" class="form-text text-muted">${preview}</small>
        `
      }).join("\n")
    return out
@ -512,17 +558,31 @@ window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController)

 class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {

+  #publicorprotected_dialog = null;
+  #target = null
+  #publiclink = null;
+  #protectedlink = null;
+  #index = null;
+
  constructor() {
    super()
  }

-  connectedCallback(){
-    this.rootdoc.addEventListener("input", ev=>{
-      if(ev.target.getAttribute("name") === this.name){
-        const index = Number(ev.target.getAttribute("data-index"))
-        this.value[index] = ev.target.value 
+  async setPublicLink(l){
+    const b = document.querySelector("d4s-boot-2")
+    const link = await b.secureFetch(l)
+    if(link.ok){
+      const result = await link.json()
+      this.#target.value = this.value[this.#index] = result
+      this.#publicorprotected_dialog.style.display = "none"
+      this.#publicorprotected_dialog.classList.remove("show")
+      this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
+      const newev = new Event("input", { bubbles : true})
+      this.dispatchEvent(newev)
+    }else{
+      alert("Unable to get public link for item")
+      this.#target.value = this.value[this.#index] = ""
    }
-    })
  }

  addToolContent() {
@ -536,27 +596,88 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
      <svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
          <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/>
      </svg>
-      <div name="ws" class="d-none position-absolute shadow border border-primary bg-light p-2" style="left: 100%;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;">
-        <div class="d-flex justify-content-between" style="border-bottom: solid 1px gray;">
-          <h5 class="text-secondary">Access your workspace</h5>
+      <div name="ws" class="d-none position-absolute shadow border border-primary bg-light p-2" style="right:0;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;">
+        <div class="mb-1" style="border-bottom: solid 1px gray;">
+          <div class="d-flex justify-content-between m-0">
+            <h5 class="text-secondary m-0">Access your workspace</h5>
            <span class="btn text-danger p-0" style="font-weight:bold" name="closebtn">x</span>
          </div>
-        <div style="min-width:350px; max-width:500px;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
+          <small class="text-muted m-0">Select an item or drag and drop it to a proper input</small>
+        </div>
+        <div style="min-width:350px; max-width:500px;overflow:auto;etxt-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
          <d4s-storage-tree 
            base-url="${addresses[iss]}"
            file-download-enabled="true" 
            show-files="true"
            allow-drag="true"/>
        </div>
+        <div class="d-flex justify-content-end mt-1 pt-1" style="border-top: solid 1px gray;">
+          <span class="btn btn-primary" name="selectbtn">SELECT</span>
+        </div>
+      </div>
+      <div class="modal fade" style="background-color:rgba(0,0,0,0.3)" name="publicorprotected" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content shadow-lg border-primary">
+            <div class="modal-body">
+              Choose whether you want to use the public link or the protected link (requires authentication and authorization).
+            </div>
+            <div class="modal-footer">
+              <span name="public" class="btn btn-info">Public link</span>
+              <span name="protected" class="btn btn-primary">Protected link</span>
+              <span name="cancel" class="btn btn-danger">Cancel</span>
+            </div>
+          </div>
+        </div>
      </div>
    `
+    this.#publicorprotected_dialog = this.rootdoc.querySelector("div.modal[name=publicorprotected]")
+    this.#publicorprotected_dialog.addEventListener("click", ev => {
+      ev.stopPropagation()
+      ev.preventDefault()
+      const name = ev.target.getAttribute("name")
+      if(this.#index != null && this.#target != null){
+        if(name === "public") {
+          this.setPublicLink(this.#publiclink);
+        }
+        else if(name === "protected"){
+          this.#target.value = this.value[this.#index] = this.#protectedlink;
+          this.#publicorprotected_dialog.style.display = "none"
+          this.#publicorprotected_dialog.classList.remove("show")
+          this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
+          const newev = new Event("input", { bubbles : true})
+          this.dispatchEvent(newev)
+        }else{
+          this.#publicorprotected_dialog.style.display = "none"
+          this.#publicorprotected_dialog.classList.remove("show")
+          this.#publiclink = this.#protectedlink = this.#target =  this.#index = null
+        }
+      }
+    })
+
    const ws = this.rootdoc.querySelector("div[name=ws]")
+    const st = ws.querySelector("d4s-storage-tree")
+    this.addEventListener("click", ev=>{
+      ev.stopPropagation()
+      ev.preventDefault()
+      if (ev.target.getAttribute("name") == "selectbtn") {
+        this.#publicorprotected_dialog.style.display = "block"
+        this.#publicorprotected_dialog.classList.add("show")
+        this.#target = this.querySelector("input")
+        this.#index = 0
+        this.#publiclink = st.d4sWorkspace.getPublicLink(st.currentId)
+        this.#protectedlink = st.d4sWorkspace.getDownloadLink(st.currentId)
+      }
+    })
    this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev => {
      ws.classList.toggle("d-none")
+      ev.preventDefault()
+      ev.stopPropagation()
    })

    this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev => {
      ws.classList.add("d-none")
+      ev.preventDefault()
+      ev.stopPropagation()
    })

    this.addEventListener("dragover", ev => {
@ -566,9 +687,19 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
    this.addEventListener("drop", ev => {
      ev.stopPropagation()
      if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
-        const index = Number(ev.target.getAttribute("data-index"))
-        ev.target.value = ev.dataTransfer.getData("text/plain+downloadlink")
-        this.value[index] = ev.target.value
+        this.#publicorprotected_dialog.style.display = "block"
+        this.#publicorprotected_dialog.classList.add("show")
+        this.#target = ev.target
+        this.#index = Number(ev.target.getAttribute("data-index"))
+        this.#publiclink = ev.dataTransfer.getData("text/plain+publiclink")
+        this.#protectedlink = ev.dataTransfer.getData("text/plain+downloadlink")
+      }
+    })
+
+    this.addEventListener("input", ev => {
+      ev.stopPropagation()
+      if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
+        this.value[Number(ev.target.getAttribute("data-index"))] = ev.target.value
      }
    })

@ -578,7 +709,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
  }

  content() {
-    this.addToolContent()
+    if(!this.readonly && !this.querySelector("div[name=ws]")) this.addToolContent();
    if (this.value.length <= 1) {
      return `
       <input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`
--- a/ccp/js/inputwidgeteditorcontroller.js
+++ b/ccp/js/inputwidgeteditorcontroller.js
@ -23,7 +23,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
    return this.#index
  }
  
-  computeDefaultInputType(){
+  /*computeDefaultInputType(){
    if(this.#input.schema.format === "secret"){
       return "password"
    }else if(this.#input.schema.format === "date"){
@ -34,14 +34,15 @@ class CCPInputWidgetEditorController extends HTMLElement{
      return "datetime-local"
    }
    return "text"
-  }
+  }*/
  
  isSelectedFormat(fmt){
    return this.#input.schema.format === fmt
  }
 
  renderDefaultByType(){
-    if(this.#input.schema.format === "code"){
+    return `<d4s-ccp-input name="default" input="${btoa(JSON.stringify(this.#input))}"></d4s-ccp-input>`
+    /*if(this.#input.schema.format === "code"){
      return `
        <textarea rows="5" name="default" class="form-control" placeholder="default">${this.#input.schema.default}</textarea>
      `
@ -49,7 +50,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
      return `
        <input type="${this.computeDefaultInputType()}" value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>	    
      `   
-    }
+    }*/
  }

  renderDeleteButton(){
@ -62,6 +63,8 @@ class CCPInputWidgetEditorController extends HTMLElement{
    this.#index = i
    this.#input = input
    this.#type = input.schema.enum ? "enum" : "string"
+    const minOccurs = input.minOccurs = Number(input.minOccurs) ? Number(input.minOccurs) : 0
+    const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0
    this.innerHTML = `
        <details ${ reopen ? 'open' : ''}>
          <summary class="mb-3">
@ -85,22 +88,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
              <div class="col-3">
                <div class="form-field" title="Type">
                  <label>Type</label>
-                  <select name="type" class="form-control" placeholder="type" value="${this.#type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
+                  <select name="type" class="form-control" placeholder="type" value="${this.#type}">
                    <option value="string" ${this.#type === "string" ? "selected" : ""}>String</option>
-                    <option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>
+                    ${ input.id === 'ccpimage' ? '' : `<option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>` }
                  </select>
                </div>
              </div>
              <div class="col">
                <div class="form-field" title="Minimum occurrences">
                  <label>Min occurs</label>
-                  <input value="${input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
                </div>
              </div>
              <div class="col">
                <div class="form-field" title="Maximum occurrences">
                  <label>Max occurs</label>
-                  <input value="${input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
+                  <input value="${maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
                </div>
              </div>
              <div class="col" title="Read only">
@ -123,7 +126,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
                    <option value="boolean" ${this.isSelectedFormat('boolean') ? "selected" : ""}>True/False</option>
                    <option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
                    <option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
-                    <option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Remote file</option>
+                    <option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Workspace file</option>
                    <option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
                    <option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
                  </select>
@ -150,8 +153,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
              </div>
            </div>
            <div name="input-default" class="mb-3">
-              <div class="form-field" title="Default value">
-                ${this.renderDefaultByType()}
+              <label>Default value</label>
+              <div class="form-field border border-info px-2 py-1" style="background-color:#0dcaf022" title="Default value">
+                <div name="default-container">${this.renderDefaultByType()}</div>
                <span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle" class="${this.isSelectedFormat('secret') ? 'inline' : 'd-none'}">&#128065;</span>
              </div>
            </div>
@ -167,53 +171,63 @@ class CCPInputWidgetEditorController extends HTMLElement{
      }
    })

+    const defaultinp = this.querySelector("div[name='input-default']")
+    defaultinp.addEventListener("input", ev=>{
+      const inp = this.querySelector("d4s-ccp-input")
+      this.#input.schema.default = inp.value
+    })
+
+    defaultinp.addEventListener("change", ev=>{
+      const inp = this.querySelector("d4s-ccp-input")
+      this.#input.schema.default = inp.value
+    })
+
+    defaultinp.addEventListener("click", ev=>{
+      const src = ev.target.getAttribute("name")
+      if (src === "plus" || src === "minus") {
+        const inp = this.querySelector("d4s-ccp-input")
+        this.#input.schema.default = inp.value
+      }
+    })
+
    this.addEventListener("input", ev=>{
      const val = ev.target.value
      const ename = ev.target.getAttribute("name")
+      const display = this.querySelector("div[name='default-container']")
      if(ename === "id"){
        this.#input.id = val
      }
      else if(ename === "title"){
        this.#input.title = val
+        display.innerHTML = this.renderDefaultByType() 
      }
      else if(ename === "description"){
        this.#input.description = val
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "minOccurs"){
-        this.#input.minOccurs = val
+        this.#input.minOccurs = Number(val) ? Number(val) : 0
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "maxOccurs"){
-        this.#input.maxOccurs = val
+        this.#input.maxOccurs = Number(val) ? Number(val) : 0
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "format"){
        this.#input.schema.format = val
-        //this.render(this.#input, this.#index, true)
-	/*this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
-        this.querySelector("div[name=input-default] input[name=default]").type = ""
-        if(this.#input.schema.format === "secret"){
-           this.querySelector("div[name=input-default] input[name=default]").type = "password"
-           this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
-        }else if(this.#input.schema.format === "date"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "date"
-        }else if(this.#input.schema.format === "time"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "time"
-        }else if(this.#input.schema.format === "dateTime"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
-        }else if(this.#input.schema.format === "file"){
-          this.querySelector("div[name=input-default] input[name=default]").type = "file"
-        }*/
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "contentMediaType"){
        this.#input.schema.contentMediaType = val
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "options"){
        this.#input.schema.enum = val.split(",")
-      }
-      else if(ename === "default"){
-        this.#input.schema.default = val
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "readonly"){
        this.#input.schema.readOnly = ev.target.checked
+        display.innerHTML = this.renderDefaultByType()
      }
      else if(ename === "type"){
        this.#type = ev.target.value
@ -226,9 +240,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
          this.querySelector("div[name=string-input]").classList.remove("d-none")
          delete this.#input.schema['enum']
        }
+        display.innerHTML = this.renderDefaultByType() 
      }
    })
-    
  }
  
 }
--- a/ccp/js/methodeditorcontroller.js
+++ b/ccp/js/methodeditorcontroller.js
@ -42,13 +42,9 @@ class CCPMethodEditorController extends HTMLElement{
    links: []
  }

-  #scripts = `
-    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
-  `
-  
  #style = ` 
    <link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style>
      .ccp-method-editor {
@ -262,7 +258,7 @@ class CCPMethodEditorController extends HTMLElement{
          format: "url",
          contentMediaType: "text/plain",
          default: "",
-          readonly : true,
+          readOnly: true,
        }
      }
    ]
@ -487,12 +483,12 @@ class CCPMethodEditorController extends HTMLElement{
                  <select name="script-selector" style="border:none; padding:.3rem">
                    <option value="deploy-script">Deploy</option>
                    <option value="execute-script">Execute</option>
-                    <option value="undeploy-script">Undeploy</option>
+                    <!--option value="undeploy-script">Undeploy</option-->
                  </select>
                </div>
              </div>
            </summary>
-            <div class="card-body" name="input_container">
+            <div class="card-body" name="scripts_container">
              ${this.renderScripts()}
            </div>
          </div>
@ -671,6 +667,7 @@ class CCPMethodEditorController extends HTMLElement{
        }
      )
      this.renderInputs()
+      this.reRenderScripts()
    })

    this.#rootdoc.querySelector("button[name=add-ccpannotation]").addEventListener("click", ev => {
@ -692,6 +689,7 @@ class CCPMethodEditorController extends HTMLElement{
        }
      )
      this.renderInputs()
+      this.reRenderScripts()
    })

    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
@ -703,6 +701,23 @@ class CCPMethodEditorController extends HTMLElement{
        console.log("deleting input at index", index)
        this.deleteTmpInputAt(index)
        this.renderInputs()
+        this.reRenderScripts()
+      }
+    })
+
+    //when any input changes update scripts so that possibly variable get re-expanded
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("input", ev => {
+      this.reRenderScripts()
+    })
+
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("change", ev => {
+      this.reRenderScripts()
+    })
+
+    this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
+      const src = ev.target.getAttribute("name")
+      if (src === "plus" || src === "minus" || src === "maxOccurs" || src === "minOccurs") {
+        this.reRenderScripts()
      }
    })

@ -800,19 +815,17 @@ class CCPMethodEditorController extends HTMLElement{
      ev.preventDefault()
      ev.stopPropagation()
      const scriptname = ev.target.value
-      const areas = Array.prototype.slice.call(this.#rootdoc.querySelectorAll("textarea.script-area"))
-      areas.forEach(a=>{ 
-        if(a.getAttribute("name") === scriptname) a.classList.remove("d-none");
-        else a.classList.add("d-none")
-      })       
+      this.reRenderScripts(scriptname)
    })

-    this.#rootdoc.querySelector("details[name=script-list]").addEventListener("input", ev=>{
+    this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
      ev.preventDefault()
      ev.stopPropagation()
-      const scriptname = ev.target.getAttribute("name")
-      const script = this.#current.additionalParameters.parameters.filter(p=>p.name === scriptname)[0]
+      const scriptname = this.getCurrentScriptName()
+      const script = this.#current.additionalParameters.parameters.find(p => p.name === scriptname)
      if (script) script.value = ev.target.value.split(/\r?\n/);
+      const preview = ev.currentTarget.querySelector("textarea[name=preview]")
+      preview.value = this.codeToPreview(ev.target.value)
    })
  }

@ -948,8 +961,7 @@ class CCPMethodEditorController extends HTMLElement{
    const available = this.#infrastructures.filter(i => { return selectedinfras.indexOf(i.id) === -1 })
    return `
      <option></option>
-      ${
-        available.map(infra=>{
+      ${available.map(infra => {
      return `
            <option value="${infra.id}" title="${infra.description}">${infra.name}</option>
          `
@ -989,16 +1001,44 @@ class CCPMethodEditorController extends HTMLElement{
    })
  }

-  renderScripts(){
-    const val = 'deploy-script'
-    return this.#current.additionalParameters.parameters.map(
-       (script, i) => {
-         let code = script.value && script.value.length ? script.value.join("\r\n") : ""
+  codeToPreview(code) {
+    return this.#tmp_inputs.reduce((acc, i) => {
+      const r = new RegExp(`{{\\s*${i.id}\\s*}}`, 'g');
+      var def = i.schema.default
+      if(i.schema.format === "secret"){
+        def = Array.isArray(def) ? def : [def] 
+        def = def.map(v=>"***")
+      }
+      if(i.schema.format === "file"){
+        def = Array.isArray(def) ? def : [def] 
+        def = def.map(v=>v.length > 15 ? v.substring(0,5) + "..." + v.substring(v.length-5) : v)
+      }
+      return acc.replaceAll(r, def)
+    }, code)
+  }
+
+  getCurrentScriptName() {
+    return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
+  }
+
+  renderScripts(scriptname) {
+    const val = scriptname ? scriptname : 'deploy-script'
+    const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
+    if (!script) return '';
+    const code = script.value && script.value.length ? script.value.join("\r\n") : ""
    return `
-           <textarea rows="5" class="script-area form-control ${script.name === val ? '' : 'd-none'}" name="${script.name}">${code}</textarea>
+      <div class="script-area" ${script.name === val ? 'd-block' : 'd-none'}" name="${script.name}">
+        <textarea rows="5" class="form-control">${code}</textarea>
+        <span name="preview" class="d-inline-block fst-italic text-muted position-absolute m-0 end-0 px-4 py-2 pe-none">Preview</span> 
+        <textarea rows="5" name="preview" class="script-area form-control my-1 text-muted border-0" readonly>${this.codeToPreview(code)}</textarea>
+      </div>
    `
  }
-    ).join("\n")
+
+  reRenderScripts(scriptname) {
+    const container = this.#rootdoc.querySelector("div[name=scripts_container]")
+    const sn = scriptname ? scriptname : this.getCurrentScriptName()
+    container.innerHTML = this.renderScripts(sn)
  }
 }

--- a/ccp/js/methodlistcontroller.js
+++ b/ccp/js/methodlistcontroller.js
@ -220,9 +220,9 @@ class CCPMethodList extends HTMLElement{
        const f = filter.toLowerCase()
        this.#filtered = this.#data.filter(d=>{
          return false || 
-            (d.title.toLowerCase().indexOf(f) !== -1)|| 
-            (d.description.indexOf(f) !== -1) ||
-            (d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
+            (d.title && d.title.toLowerCase().indexOf(f) !== -1)|| 
+            (d.description && d.description.indexOf(f) !== -1) ||
+            (Array.isArray(d.keywords) && d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
        })
      }
      this.groupBy()
--- a/index.html
+++ b/index.html
@ -12,10 +12,13 @@
            <h3>CDN sandbox</h3>
            <p>Select the section you want to enter</p>
        </header>
-        <div class="d-flex">
+        <div class="d-flex flex-column">
            <div class="d-inline-block">
                <a href="storage/index.html">D4S Workspace</a> (OIDC protected)
            </div>
+            <div class="d-inline-block">
+                <a href="ccp/index.html">CCP</a> (OIDC protected)
+            </div>
        </div>
    </body>

--- a/storage/d4s-storage.js
+++ b/storage/d4s-storage.js
@ -16,10 +16,7 @@ class D4SStorageHtmlElement extends HTMLElement {
  }

  connectedCallback() {
-    let linkElem = document.createElement('link');
-    linkElem.setAttribute('rel', 'stylesheet');
-    linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
-    this.shadowRoot.appendChild(linkElem);
+    
  }

  get srcBaseURL() {
@ -98,7 +95,7 @@ class D4SStorageToolbar extends D4SStorageHtmlElement {

 class D4SStorageTree extends D4SStorageHtmlElement {

-  static tree_event_name = "d4s-toolbar";
+  static tree_event_name = "d4s-tree";
  static folder_data_event_name = "d4s-folder-data";

  static dataid_attr = 'data-id';
@ -226,8 +223,10 @@ class D4SStorageTree extends D4SStorageHtmlElement {

    const div = document.createElement('div')
    div.innerHTML = /*css*/`
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <style>
-        .selected > span {
+        .selected > .li-title {
          background-color: ${this.#selectedbgcolor};
        }
        ul.root {
@ -238,6 +237,12 @@ class D4SStorageTree extends D4SStorageHtmlElement {
          margin-bottom: 0;
          padding-left: 0.6em;
        }
+        li{
+          color: #444444;
+        }
+        li:hover{
+          color: #555555;
+        }
        li {
          cursor: pointer;
        }
@ -378,7 +383,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
    this.dispatchEvent(
      new CustomEvent(
        D4SStorageTree.tree_event_name,
-        {detail: {id: id}}
+        {detail: {id: id, bubbles: true}}
      )
    );
  }
@ -417,15 +422,43 @@ class D4SStorageTree extends D4SStorageHtmlElement {
      data
      .filter(item => this.showFiles || item['@class'].includes('FolderItem'))
      .forEach(item => {
-        ul.appendChild(this.createListItem(item.title, item.id, item['@class'], parentId));
+        ul.appendChild(this.createListItem(item, parentId));
      })
    } else {
-      ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.title, data.id, data['@class'], parentId));
+      ul.appendChild(this.createListItem(data, parentId));
    }
    parentElement.appendChild(ul);
  }

-  createListItem(label, id, type, parentId) {
+  getIconByMIME(mime){
+    if(mime.startsWith("image")) return "image";
+    if(mime.startsWith("application/pdf")) return "picture_as_pdf";
+    if(mime.startsWith("application/zip")) return "archive";
+    if(mime.startsWith("application/xml")) return "code";
+    if(mime.match(/tar|compressed|gzip|gz|tgz/)) return 'archive';
+    return null;
+  }
+
+  getIconByExtension(name){
+    const tks = name.split(".")
+    if(tks.length === 0) return null;
+    const ext = tks[tks.length - 1]
+    if(ext.match(/java$|py$|^r$|^c$|ccp|lua|jl|^sh$|json|xml|xsl|xslt|md$|xq$|xqm$/i)) return "code";
+    if(ext.match(/js$/i)) return "javascript";
+    if(ext.match(/html$|css$|php$/i)) return ext;
+    if(ext.match(/kml$/i)) return "place";
+    if(ext.match(/ics$/i)) return "event";
+    if(ext.match(/csv$|xls$|ods$/i)) return "assessment";
+    if(ext.match(/txt$|odt$|rtf$|doc$|docx$/i)) return "description";
+    if(ext.match(/ppt$|odp$/i)) return "slideshow";
+    return null;
+  }
+
+  createListItem(item, parentId) {
+    const label = item.displayName ? item.displayName : item.title
+    const id = item.id
+    const type = item["@class"]
+    const mime = item.content && item.content.mimeType ? item.content.mimeType : null
    const li = document.createElement('li');
    li.setAttribute(D4SStorageTree.dataname_attr, label);
    li.setAttribute(D4SStorageTree.dataid_attr, id);
@ -434,14 +467,30 @@ class D4SStorageTree extends D4SStorageHtmlElement {
    if (parentId) {
      li.setAttribute(D4SStorageTree.parentid_attr, parentId);
    }
-    const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
+    //const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
+    var icon = "insert_drive_file";
+    if(type.includes('FolderItem')){
+      icon = "folder"
+    }else if(type.includes("SharedFolder")){
+      icon = "folder_shared"
+    }else{
+      const im = mime ? this.getIconByMIME(mime) : null
+      if(im) icon = im;
+      else{
+        const ie = this.getIconByExtension(label)
+        if(ie) icon = ie;
+      }
+    }
    li.innerHTML = `
-      <img class="px-1" src="${this.srcBaseURL}/img/${icon}"</img>
+      <div class="li-title d-flex gap-1">
+        <span class="material-icons">${icon}</span>
        <span>${label}</span>
+      </div>
    `

    li.addEventListener('click', (ev) => {
      ev.stopPropagation();
+      ev.preventDefault()
      this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
    });
    
@ -668,6 +717,7 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
    const isFolder = item['@class'].includes('FolderItem')
    filename.addEventListener('click', (ev) => {
      ev.stopPropagation()
+      ev.preventDefault()
      if (isFolder) {
        const span = ev.currentTarget.querySelector(':nth-child(2)')
        if (span) {
--- a/storage/index.html
+++ b/storage/index.html
@ -10,7 +10,7 @@

    <body class="m-4">
        <d4s-boot-2 context="%2Fgcube%2Fdevsec%2FdevVRE"
-        gateway="next.d4science.org"
+        gateway="next.dev.d4science.org"
        redirect-url="https://cdn.dev.d4science.org/storage/"
        url="https://accounts.dev.d4science.org/auth">
        <!-- redirect-url="http://localhost:8080/storage/"  -->
Author	SHA1	Message	Date
Marco Lettere	b2d0ae9e82	Merge pull request 'master' (#13 ) from master into prod Reviewed-on: #13	2024-04-23 18:26:23 +02:00
dcore94	b254262f58	improved display	2024-04-23 16:46:47 +02:00
dcore94	f7cd0932b5	fire input event when file is read, fix deprecated func and improved display	2024-04-23 16:41:53 +02:00
dcore94	e3efc70bad	fixed case of json for ccpimage	2024-04-23 12:50:58 +02:00
dcore94	96030670c2	cleaned up code and moved everything to bs5.0.2	2024-04-17 17:47:28 +02:00
dcore94	e8c71ecb55	overflow improvements	2024-04-17 17:12:30 +02:00
dcore94	4173ee650c	position inside	2024-04-17 16:46:54 +02:00
dcore94	cc752abe40	Added select button for storage tree, added icons for well-known file types, corrected bug with direct input to ws link input field	2024-04-17 14:52:36 +02:00
dcore94	78a3009573	removed unnecessary style	2024-04-16 13:40:26 +02:00
dcore94	cc792a3e62	refactored method import to use preview widgets for input and scripts, added possibility to choose for public or protected link from workspace, fixed several bugs	2024-04-16 13:07:23 +02:00
dcore94	2f8f9483b8	added index test page for CCP webcomponents	2024-04-16 13:06:00 +02:00
dcore94	f4faebc9f1	changed gateway to next.dev	2024-04-16 13:05:06 +02:00
dcore94	687be71314	added some prevent defaults to events	2024-04-16 13:03:51 +02:00
dcore94	1078e7abbb	removed redundant logs	2024-04-16 13:03:11 +02:00