[RELEASES] 2.3.0

.github/workflows/argilla.yml

@@ -21,7 +21,7 @@ jobs:
   build:
     services:
       argilla-server:
-        image: argilladev/argilla-hf-spaces:pr-5482
+        image: argilladev/argilla-hf-spaces:pr-5422
         ports:
           - 6900:6900
         env:

.pre-commit-config.yaml

@@ -3,7 +3,7 @@ repos:
     rev: v4.6.0
     hooks:
       - id: check-yaml
-        exclude: argilla/mkdocs.yml
+        exclude: argilla/mkdocs.yml|examples/deployments/k8s
       - id: end-of-file-fixer
         exclude_types: [text, jupyter]
       - id: trailing-whitespace
@@ -71,6 +71,17 @@ repos:
           - argilla-server/LICENSE_HEADER
           - --fuzzy-match-generates-todo
 
+  ##############################################################################
+  # Helm lint hook
+  ##############################################################################
+  - repo: https://github.com/gruntwork-io/pre-commit
+    rev: v0.1.23
+    hooks:
+      - id: helmlint
+        name: Helm lint
+        files: '^examples/deployments/k8s/.*\.yaml$'
+        args: ['helm', 'lint','examples/deployments/k8s/']
+
 ci:
   autofix_commit_msg: |
     [pre-commit.ci] auto fixes from pre-commit.com hooks

argilla-frontend/CHANGELOG.md

@@ -16,6 +16,17 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [2.3.0](https://github.com/argilla-io/argilla/compare/v2.2.0...v2.3.0)
+
+### Added
+
+- Added new field `CustomField` [#5462](https://github.com/argilla-io/argilla/pull/5462)
+
+### Fixed
+
+- Fix autofill form on sign-in page [#5522](https://github.com/argilla-io/argilla/pull/5522)
+- Support copy on clipboard for no secure context [#5535](https://github.com/argilla-io/argilla/pull/5535)
+
 ## [2.2.0](https://github.com/argilla-io/argilla/compare/v2.1.0...v2.2.0)
 
 ### Added

argilla-frontend/components/features/annotation/container/fields/RecordFields.vue

@@ -7,6 +7,7 @@
         title,
         content,
         settings,
+        sdkRecord,
         isTextType,
         isImageType,
         isChatType,
@@ -30,6 +31,7 @@
         :fieldText="content"
         :useMarkdown="settings.use_markdown"
         :searchText="recordCriteria.committed.searchText.value.text"
+        :record="record"
       />
       <ChatField
         v-else-if="isChatType"
@@ -39,7 +41,20 @@
         :content="content"
         :searchText="recordCriteria.committed.searchText.value.text"
       />
-      <ImageField v-else :name="name" :title="title" :content="content" />
+      <ImageField
+        v-else-if="isImageType"
+        :name="name"
+        :title="title"
+        :content="content"
+      />
+      <CustomField
+        v-else
+        :name="name"
+        :title="title"
+        :content="content"
+        :sdkRecord="sdkRecord"
+        :settings="settings"
+      />
     </div>
   </div>
 </template>

argilla-frontend/components/features/annotation/container/fields/chat-field/ChatField.vue

@@ -2,7 +2,6 @@
   <div class="chat" :key="title">
     <span class="chat__title" v-text="title" />
     <div
-      :id="`fields-content-${name}`"
       class="chat__wrapper"
       :class="checkIfAreLessThanTwoRoles ? '--simple' : '--multiple'"
     >

argilla-frontend/components/features/annotation/container/fields/custom-field/CustomField.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="custom_field_component" :key="content">
+    <div class="title-area --body2">
+      <span class="custom_field_component__title-content" v-text="title" />
+    </div>
+    <Sandbox :content="template" />
+  </div>
+</template>
+<script>
+/* eslint-disable */
+const BASIC_TEMPLATE = `
+<script>const record = #RECORD_OBJECT#;<\/script>
+<script src="./js/handlebars.min.js"><\/script>
+<div id="template">
+#TEMPLATE#
+</div>
+<script>
+  Handlebars.registerHelper("json", (context) => {
+    return new Handlebars.SafeString('<pre style="overflow: auto">' + JSON.stringify(context, null, 4) + '</pre>');
+  });
+
+  const template = document.getElementById("template").innerHTML;
+  const compiledTemplate = Handlebars.compile(template);
+  const html = compiledTemplate({ record });
+  document.body.innerHTML = html;
+<\/script>
+`;
+const ADVANCE_TEMPLATE = `
+<script>
+  const record = #RECORD_OBJECT#;
+<\/script>
+#TEMPLATE#
+`;
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    settings: {
+      type: Object,
+      required: true,
+    },
+    content: {
+      type: String,
+      required: true,
+    },
+    sdkRecord: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    isAdvanced() {
+      return this.settings.advanced_mode;
+    },
+    template() {
+      const recordObject = JSON.stringify(this.sdkRecord);
+
+      const templateToUse = this.isAdvanced ? ADVANCE_TEMPLATE : BASIC_TEMPLATE;
+
+      return templateToUse
+        .replace("#RECORD_OBJECT#", recordObject)
+        .replace("#TEMPLATE#", this.content);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.custom_field_component {
+  $this: &;
+  display: flex;
+  flex-direction: column;
+  gap: $base-space;
+  padding: 2 * $base-space;
+  background: var(--bg-field);
+  border-radius: $border-radius-m;
+  border: 1px solid var(--border-field);
+  .title-area {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $base-space;
+    color: var(--fg-secondary);
+  }
+  &__title-content {
+    word-break: break-word;
+    width: calc(100% - 30px);
+  }
+}
+</style>

argilla-frontend/components/features/annotation/container/fields/sandbox/Sandbox.vue

@@ -0,0 +1,62 @@
+<template>
+  <iframe
+    :srcdoc="template"
+    ref="iframe"
+    frameborder="0"
+    scrolling="no"
+    @load="load"
+  />
+</template>
+<script>
+/* eslint-disable */
+const STYLES = `
+<script>
+if (parent) {
+  const currentHead = document.getElementsByTagName("head")[0];
+  const styles = parent.document.getElementsByTagName("style");
+  for (const style of styles) {
+    currentHead.appendChild(style.cloneNode(true));
+  }
+
+  const html = parent.document.getElementsByTagName("html")[0];
+  document.getElementsByTagName("html")[0].setAttribute("data-theme", html.getAttribute("data-theme"));
+}
+<\/script>
+<style>
+  body {
+    background-color: var(--bg-field);
+  }
+<\/style>
+`;
+
+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    load() {
+      this.resize();
+    },
+    resize() {
+      this.$refs.iframe.style.height =
+        this.$refs.iframe.contentWindow.document.documentElement.scrollHeight +
+        "px";
+    },
+  },
+  computed: {
+    template() {
+      return `${STYLES}${this.content}`;
+    },
+  },
+};
+</script>
+
+<style>
+iframe {
+  border: none;
+  width: 100%;
+}
+</style>

argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue

@@ -16,10 +16,10 @@
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div :id="`fields-content-${name}`" class="content-area --body1">
-      <div :class="classes" v-if="!useMarkdown" v-html="fieldText" />
-      <Sandbox v-else-if="isHTML" :fieldText="fieldText" />
-      <MarkdownRenderer v-else :markdown="fieldText" />
+    <div class="content-area --body1">
+      <MarkdownRenderer v-if="useMarkdown" :markdown="fieldText" />
+      <Sandbox v-else-if="isHTML" :content="fieldText" />
+      <div :class="classes" v-html="fieldText" />
       <template>
         <style :key="name" scoped>
           ::highlight(search-text-highlight-{{name}}) {
@@ -56,6 +56,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    record: {
+      type: Object,
+    },
   },
   computed: {
     classes() {

argilla-frontend/components/features/annotation/settings/SettingsFields.vue

@@ -24,6 +24,13 @@
             <input type="text" id="field.id" v-model="field.title" />
           </Validation>
 
+          <div class="settings__edition-form__group" v-if="field.isCustomType">
+            <label>{{ $t("template") }}</label>
+            <div class="settings__custom-field-preview">
+              <pre><code v-highlight>{{ field.settings.template }}</code></pre>
+            </div>
+          </div>
+
           <BaseSwitch
             v-if="field.isTextType || field.isChatType"
             class="settings__edition-form__switch"
@@ -171,5 +178,16 @@ export default {
       gap: $base-space;
     }
   }
+  &__custom-field-preview {
+    overflow: auto;
+    max-height: 30vh;
+    padding: $base-space * 2;
+    border: 1px solid var(--bg-opacity-10);
+    border-radius: $border-radius;
+    background: var(--bg-opacity-4);
+    pre {
+      margin: 0;
+    }
+  }
 }
 </style>

argilla-frontend/components/features/login/components/LoginInput.vue

@@ -4,6 +4,7 @@
       <label class="input-field__label" v-text="name" :for="name" />
       <span class="input-field__container">
         <input
+          ref="input"
           :aria-labelledby="name"
           v-model="inputValue"
           class="input-field__input"
@@ -73,13 +74,19 @@ export default {
       isTouched: false,
       isBlurred: false,
       isPasswordVisible: false,
+      isAutoFilled: false,
     };
   },
   model: {
     prop: "value",
     event: "input",
   },
   watch: {
+    isAutoFilled(newValue) {
+      if (newValue) {
+        this.value = `${this.value} `;
+      }
+    },
     inputValue(newValue) {
       this.$emit("input", newValue);
     },
@@ -108,7 +115,21 @@ export default {
         : this.type;
     },
   },
+  async mounted() {
+    this.isAutoFilled = await this.detectAutofill(this.$refs.input);
+  },
   methods: {
+    detectAutofill(element) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(
+            window
+              .getComputedStyle(element, null)
+              .getPropertyValue("appearance") === "menulist-button"
+          );
+        }, 200);
+      });
+    },
     toggleVisibility() {
       this.isPasswordVisible = !this.isPasswordVisible;
     },