feat(#1119): users without personal datasets (#1282)

(cherry picked from commit 068e4be)
argilla-io · Mar 25, 2022 · 6306d3b · 6306d3b
1 parent 21a70ac
commit 6306d3b
Show file tree

Hide file tree

Showing 27 changed files with 707 additions and 193 deletions.
diff --git a/frontend/assets/icons/docs.js b/frontend/assets/icons/docs.js
@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'docs': {
+    width: 12,
+    height: 16,
+    viewBox: '0 0 12 16',
+    data: '<g _fill="#4A4A4A" fill-rule="nonzero"><path pid="0" d="M10.62 5.647H8.817a.46.46 0 00-.468.448c0 .247.21.449.468.449h1.801a.46.46 0 01.468.448v7.193a.46.46 0 01-.468.448H1.403a.46.46 0 01-.467-.448V6.992a.46.46 0 01.467-.448h1.802a.46.46 0 00.467-.449.46.46 0 00-.467-.448H1.403C.632 5.647 0 6.252 0 6.992v7.193c0 .74.632 1.344 1.403 1.344h9.193c.772 0 1.403-.605 1.403-1.344V6.99c.024-.739-.608-1.344-1.38-1.344z"/><path pid="1" d="M6.129 10.588a.457.457 0 00.458-.452V5.362c0-1.448 1.193-2.602 2.638-2.602h1.215l-1.1 1.086a.433.433 0 000 .634c.091.09.206.135.32.135.115 0 .23-.045.322-.135l1.88-1.856a.433.433 0 000-.633L9.982.136a.448.448 0 00-.642 0 .433.433 0 000 .633l1.1 1.086H9.225a3.565 3.565 0 00-3.555 3.19c0 .045-.023.068-.023.113v4.978c.023.249.23.452.482.452z"/></g>'
+  }
+})
diff --git a/frontend/assets/icons/filtrable-column.js b/frontend/assets/icons/filtrable-column.js
@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'filtrable-column': {
+    width: 15,
+    height: 11,
+    viewBox: '0 0 15 11',
+    data: '<path pid="0" d="M.008.008v1.769h14.15V.008H.008zm2.527 6.064h9.096V4.304H2.535v1.768zm2.527 4.296h4.042V8.599H5.062v1.769z" _fill="#0508D9" fill-rule="nonzero"/>'
+  }
+})
diff --git a/frontend/assets/icons/index.js b/frontend/assets/icons/index.js
@@ -1,20 +1,3 @@
-/*
- * coding=utf-8
- * Copyright 2021-present, the Recognai S.L. team.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 /* eslint-disable */
 require('./annotate-view')
 require('./arrow-bottom')
@@ -41,6 +24,7 @@ require('./datasets-empty')
 require('./datasource')
 require('./datasources')
 require('./delete')
+require('./docs')
 require('./double-chev')
 require('./drop-down')
 require('./drop-up')
@@ -56,6 +40,7 @@ require('./external-link')
 require('./external')
 require('./feather')
 require('./filter')
+require('./filtrable-column')
 require('./forbidden')
 require('./go-back')
 require('./help')
@@ -82,6 +67,7 @@ require('./progress')
 require('./refresh')
 require('./reject')
 require('./search')
+require('./sort-table')
 require('./sort')
 require('./unlock')
 require('./zoomin')

diff --git a/frontend/assets/icons/logout.js b/frontend/assets/icons/logout.js
@@ -19,9 +19,9 @@
 var icon = require('vue-svgicon')
 icon.register({
   'logout': {
-    width: 17,
-    height: 22,
-    viewBox: '0 0 17 22',
-    data: '<path pid="0" d="M9.511 0c2.226 0 4.038 1.79 4.038 3.99a1.014 1.014 0 11-2.03 0c0-1.08-.899-1.96-2.005-1.96H4.038c-1.107 0-2.007.878-2.007 1.96v14.02c0 1.08.9 1.96 2.007 1.96h5.476c1.106 0 2.006-.878 2.006-1.96a1.014 1.014 0 112.03 0c0 2.2-1.813 3.99-4.039 3.99H4.035C1.81 22 0 20.21 0 18.01V3.99C0 1.79 1.81 0 4.035 0h5.476zm3.268 7.094l3.21 3.21.007.007.02.022.013.013.004.005-.037-.04a1.036 1.036 0 01.166.222c.215.389.155.887-.177 1.214l-3.21 3.163a1.02 1.02 0 01-.714.293 1.016 1.016 0 01-.712-1.739l1.447-1.426H6.772a1.014 1.014 0 110-2.03h6.05l-1.48-1.48a1.016 1.016 0 011.436-1.434z" _fill="#0508D9" fill-rule="nonzero"/>'
+    width: 12,
+    height: 15,
+    viewBox: '0 0 12 15',
+    data: '<path pid="0" d="M6.319 13.95H.945a.185.185 0 01-.184-.187V.955C.76.852.843.769.945.769h5.374a.371.371 0 000-.743H.945a.928.928 0 00-.927.929v12.808c0 .512.416.929.927.929h5.374a.371.371 0 000-.743zm5.554-6.853L8.69 3.913a.371.371 0 10-.525.525l2.55 2.55h-7.24a.371.371 0 000 .742h7.24l-2.55 2.55a.371.371 0 10.525.525l3.183-3.183a.371.371 0 000-.525z" _fill="#4A4A4A" fill-rule="nonzero"/>'
   }
 })
diff --git a/frontend/assets/icons/sort-table.js b/frontend/assets/icons/sort-table.js
@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'sort-table': {
+    width: 13,
+    height: 14,
+    viewBox: '0 0 13 14',
+    data: ''
+  }
+})
diff --git a/frontend/components/commons/datasets-list/DatasetsEmpty.vue b/frontend/components/commons/datasets-list/DatasetsEmpty.vue
@@ -13,7 +13,7 @@
       <a href="https://docs.rubrix.ml/" target="_blank">see the docs</a> for
       more information.
     </p>
-    <re-code :code="generateCodeSnippet(workspace)"></re-code>
+    <re-code :code="generateCodeSnippet()"></re-code>
   </div>
 </template>
 
@@ -28,14 +28,11 @@ export default {
   },
 
   methods: {
-    generateCodeSnippet(ws) {
+    generateCodeSnippet() {
       return `import rubrix as rb
 
-# If you are using the default installation you can skip this line
-rb.set_workspace("${ws}")
-
 rb.log(
-  rb.TextClassificationRecord(inputs="my first rubrix example"), 
+  rb.TextClassificationRecord(text="my first rubrix example"),
   name='example-dataset'
 )`;
     },

diff --git a/frontend/components/commons/header/appHeader.vue b/frontend/components/commons/header/appHeader.vue
@@ -22,7 +22,7 @@
     :class="['header', sticky && dataset ? 'sticky' : null]"
   >
     <ReTopbarBrand>
-      <ReBreadcrumbs :breadcrumbs="breadcrumbs" :copy-button="true" />
+      <ReBreadcrumbs :breadcrumbs="breadcrumbs" :copy-button="copyButton" />
       <user />
     </ReTopbarBrand>
     <slot />
@@ -49,6 +49,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    copyButton: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     currentTask() {

diff --git a/frontend/components/commons/header/user/user.vue b/frontend/components/commons/header/user/user.vue
@@ -1,63 +1,30 @@
 <template>
   <div v-if="$auth.loggedIn" v-click-outside="close" class="user">
-    <a
-      v-if="currentWorkspace"
-      class="user__button"
-      href="#"
-      @click.prevent="showSelector"
-    >
-      {{ firstChar(currentWorkspace) }}
+    <a class="user__button" href="#" @click.prevent="showSelector">
+      {{ firstChar(user.username) }}
     </a>
     <div v-if="visibleSelector && user" class="user__content">
+      <p class="user__name">{{ user.username }}</p>
       <p class="user__mail">{{ user.email }}</p>
       <a
-        href="#"
-        class="user__workspace"
-        @click="selectWorkspace(user.username)"
+        class="user__link"
+        href="https://docs.rubrix.ml/en/stable/"
+        target="_blank"
       >
-        <div
-          :class="[
-            currentWorkspace === user.username ? 'active' : null,
-            'user__workspace__circle',
-          ]"
-        >
-          {{ firstChar(user.username) }}
-        </div>
-        <p class="user__workspace__name">
-          {{ user.username }}<span>Private Workspace</span>
-        </p>
+        <svgicon name="docs"></svgicon> View docs
       </a>
-      <p v-if="userWorkspaces">Team workspaces</p>
-      <a
-        v-for="workspace in userWorkspaces"
-        :key="workspace"
-        href="#"
-        class="user__workspace"
-        @click="selectWorkspace(workspace)"
-      >
-        <div
-          :class="[
-            currentWorkspace === workspace ? 'active' : null,
-            'user__workspace__circle',
-          ]"
-        >
-          {{ firstChar(workspace) }}
-        </div>
-        <p class="user__workspace__name">{{ workspace }}</p>
+      <a class="user__link" href="#" @click.prevent="logout">
+        <svgicon name="logout"></svgicon> Log out
       </a>
-      <a class="user__logout" href="#" @click.prevent="logout"> Log out </a>
       <span class="copyright">© 2022 Rubrix ({{ rubrixVersion }})</span>
     </div>
   </div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
-import {
-  setWorkspace,
-  currentWorkspace,
-  NO_WORKSPACE,
-} from "@/models/Workspace";
+import "assets/icons/docs";
+import "assets/icons/logout";
 export default {
   data: () => {
     return {
@@ -69,19 +36,6 @@ export default {
     user() {
       return this.$auth.user;
     },
-    userWorkspaces() {
-      return (this.user.workspaces || [])
-        .map((ws) => {
-          if (ws === "") {
-            return NO_WORKSPACE;
-          }
-          return ws;
-        })
-        .filter((ws) => ws !== this.user.username);
-    },
-    currentWorkspace() {
-      return currentWorkspace(this.$route);
-    },
   },
   async fetch() {
     this.rubrixVersion = await this.getRubrixVersion();
@@ -91,7 +45,7 @@ export default {
       getRubrixVersion: "entities/rubrix-info/getRubrixVersion",
     }),
     firstChar(name) {
-      return name.charAt(0);
+      return name.slice(0, 2);
     },
     showSelector() {
       this.visibleSelector = !this.visibleSelector;
@@ -103,18 +57,12 @@ export default {
       await this.$auth.logout();
       await this.$auth.strategy.token.reset();
     },
-    async selectWorkspace(workspace) {
-      if (this.currentWorkspace !== workspace) {
-        return await setWorkspace(this.$router, workspace);
-      }
-      this.close();
-    },
   },
 };
 </script>
 
 <style scope lang="scss">
-$buttonSize: 30px;
+$buttonSize: 34px;
 %circle {
   height: $buttonSize;
   width: $buttonSize;
@@ -138,14 +86,15 @@ $buttonSize: 30px;
     color: $primary-color;
     will-change: auto;
     &:hover {
-      transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
+      transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
       transition: all 0.2s ease-in-out;
     }
   }
   &__content {
     position: absolute;
-    top: 3em;
-    right: 0;
+    top: 3.8em;
+    right: -1em;
+    padding-top: 1.5em;
     background: $lighter-color;
     border-radius: $border-radius;
     @include font-size(12px);
@@ -158,16 +107,16 @@ $buttonSize: 30px;
       text-decoration: none;
     }
   }
-  &__mail {
-    margin-bottom: 1em;
-    margin-top: 0;
+  &__name {
+    color: palette(grey, dark);
+    @include font-size(16px);
+    margin: 0 1.5em 0.3em 1.5em;
+    font-weight: 600;
   }
-  &__logout {
-    display: block;
-    @include font-size(14px);
-    margin-top: 0.5em;
+  &__mail {
+    margin: 0 1.5em 2em 1.5em;
   }
-  &__workspace {
+  &__link {
     display: flex;
     align-items: center;
     outline: none !important;
@@ -209,6 +158,11 @@ $buttonSize: 30px;
   font-weight: 400;
   color: palette(grey, dark);
   line-height: 1em;
-  margin-top: 1em;
+  margin-top: 1.5em;
+  padding: 1em;
+  background: #fcfcfc;
+  text-align: right;
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
 }
 </style>