✨ Improve docs (#5094)

- [x] Add doc reference file into frontend project
- [x] Refactor user entity
- [x] Change documentation dinamically depends if runninng locally or
running in HF env.
- [x] Fix copy button because was changing the padding

---------

Co-authored-by: burtenshaw <[email protected]>

argilla-frontend/components/features/datasets/datasets-empty/DatasetsEmpty.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { useDatasetEmptyViewModel } from "./useDatasetEmptyViewModel";
+
 export default {
   data() {
     return {
@@ -20,20 +22,25 @@ export default {
   },
   async fetch() {
     const folderContent = require.context(
-      `../../../../../docs/_source/_common/snippets`,
+      `../../../../docs/snippets`,
       false,
       /.start_page.md/,
       "lazy"
     );
 
     const startPage = await folderContent("./start_page.md");
 
+    const content = await this.preFillData(startPage);
+
     this.content.tabs.push({
       id: "start-page",
       name: "Start page",
-      markdown: startPage.body,
+      markdown: content,
     });
   },
+  setup() {
+    return useDatasetEmptyViewModel();
+  },
 };
 </script>
 <style lang="scss" scoped>

argilla-frontend/components/features/datasets/datasets-empty/useDatasetEmptyViewModel.ts

@@ -0,0 +1,85 @@
+import { useRunningEnvironment } from "~/v1/infrastructure/services/useRunningEnvironment";
+import { useUser } from "~/v1/infrastructure/services/useUser";
+
+const HF_PREFIX = "[hf_]";
+const LOCAL_PREFIX = "[local_]";
+const HF_OWNER = "[HF_OWNER]";
+const HF_SPACE_NAME = "[HF_SPACE_NAME]";
+const USER_API_KEY = "[USER_API_KEY]";
+const LOCAL_HOST = "[LOCAL_HOST]";
+
+export const useDatasetEmptyViewModel = () => {
+  const { isRunningOnHuggingFace, getHuggingFaceSpace } =
+    useRunningEnvironment();
+  const { getUser } = useUser();
+
+  const replaceLocalData = (rows) => {
+    const content = [];
+    const user = getUser();
+
+    for (const row of rows) {
+      if (row.includes(HF_PREFIX)) continue;
+
+      if (row.includes(LOCAL_PREFIX)) {
+        content.push(
+          row
+            .replace(LOCAL_PREFIX, "")
+            .replace(LOCAL_HOST, window.location.origin)
+        );
+        continue;
+      }
+
+      if (row.includes(USER_API_KEY)) {
+        content.push(row.replace(USER_API_KEY, user.apiKey));
+        continue;
+      }
+
+      content.push(row);
+    }
+
+    return Promise.resolve(content.join("\n"));
+  };
+
+  const replaceHFData = async (rows) => {
+    const user = getUser();
+    const hfEnvironment = await getHuggingFaceSpace();
+
+    const content = [];
+
+    for (const row of rows) {
+      if (row.includes(LOCAL_PREFIX)) continue;
+
+      if (row.includes(HF_PREFIX)) {
+        content.push(
+          row
+            .replace(HF_PREFIX, "")
+            .replace(HF_OWNER, hfEnvironment.user)
+            .replace(HF_SPACE_NAME, hfEnvironment.space)
+        );
+
+        continue;
+      }
+
+      if (row.includes(USER_API_KEY)) {
+        content.push(row.replace(USER_API_KEY, user.apiKey));
+        continue;
+      }
+
+      content.push(row);
+    }
+
+    return content.join("\n");
+  };
+
+  const preFillData = (startPage) => {
+    const rows = startPage.body.split("\n");
+
+    if (isRunningOnHuggingFace()) return replaceHFData(rows);
+
+    return replaceLocalData(rows);
+  };
+
+  return {
+    preFillData,
+  };
+};

argilla-frontend/components/features/global/AppHeader.vue

@@ -42,15 +42,6 @@ export default {
       type: Array,
     },
   },
-  computed: {
-    /**
-     * @deprecated Replace with useRole
-     */
-    isAdminOrOwnerRole() {
-      const role = this.$auth.user.role;
-      return role === "admin" || role === "owner";
-    },
-  },
   methods: {
     onBreadcrumbAction(action) {
       this.$emit("breadcrumb-action", action);

argilla-frontend/components/features/global/appHeader.vue

@@ -42,15 +42,6 @@ export default {
       type: Array,
     },
   },
-  computed: {
-    /**
-     * @deprecated Replace with useRole
-     */
-    isAdminOrOwnerRole() {
-      const role = this.$auth.user.role;
-      return role === "admin" || role === "owner";
-    },
-  },
   methods: {
     onBreadcrumbAction(action) {
       this.$emit("breadcrumb-action", action);

argilla-frontend/components/features/global/user/UserAvatarTooltip.vue

@@ -1,16 +1,16 @@
 <template>
   <div v-if="$auth.loggedIn" v-click-outside="close" class="user">
     <a class="user__button" @click.prevent="showSelector">
-      {{ firstChar(user.username) }}
+      {{ user.avatar }}
     </a>
     <div v-if="visibleSelector && user" class="user__content">
       <div class="head">
         <div class="left-head">
-          <span v-circle v-text="firstChar(user.username)" />
+          <span v-circle v-text="user.avatar" />
         </div>
         <div class="right-head">
           <div class="item">
-            <span v-text="user.username" />
+            <span v-text="user.userName" />
           </div>
           <div class="item" v-if="user.email">
             <span v-text="user.email" />
@@ -44,7 +44,7 @@
 import "assets/icons/external";
 import "assets/icons/log-out";
 
-import { useRoutes } from "~/v1/infrastructure/services/useRoutes";
+import { useAvatarTooltipViewModel } from "./userAvatarTooltipViewModel";
 
 export default {
   data: () => {
@@ -54,20 +54,11 @@ export default {
     };
   },
   computed: {
-    user() {
-      return this.$auth.user;
-    },
     currentYear() {
-      return this.currentDate.getFullYear();
-    },
-    currentDate() {
-      return new Date();
+      return new Date().getFullYear();
     },
   },
   methods: {
-    firstChar(name) {
-      return name.slice(0, 2);
-    },
     showSelector() {
       this.visibleSelector = !this.visibleSelector;
     },
@@ -81,7 +72,7 @@ export default {
     },
   },
   setup() {
-    return useRoutes();
+    return useAvatarTooltipViewModel();
   },
 };
 </script>

argilla-frontend/components/features/global/user/userAvatarTooltipViewModel.ts

@@ -0,0 +1,12 @@
+import { useRoutes } from "~/v1/infrastructure/services/useRoutes";
+import { useUser } from "~/v1/infrastructure/services/useUser";
+
+export const useAvatarTooltipViewModel = () => {
+  const { goToSignIn } = useRoutes();
+  const { user } = useUser();
+
+  return {
+    goToSignIn,
+    user,
+  };
+};