feat: add `(unknown)` when team doesn't exist

src/components/newtab/shared/SharedCard.vue

@@ -22,7 +22,7 @@
           Disabled
         </span>
         <button
-          v-else
+          v-else-if="!disabled"
           class="invisible group-hover:visible"
           @click="$emit('execute', data)"
         >
@@ -72,6 +72,7 @@ import { shallowReactive } from 'vue';
 import dayjs from '@/lib/dayjs';
 
 const props = defineProps({
+  disabled: Boolean,
   data: {
     type: Object,
     default: () => ({}),

src/components/newtab/workflow/WorkflowShareTeam.vue

@@ -22,6 +22,7 @@
             v-model="state.activeTeam"
             label="Select team"
             class="ml-4"
+            style="max-width: 220px"
           >
             <option
               v-for="team in state.userTeams"

src/components/newtab/workflows/WorkflowsUserTeam.vue

@@ -9,7 +9,10 @@
       to use these workflows
     </template>
   </p>
-  <div v-else-if="teamWorkflows.length === 0" class="text-center">
+  <div
+    v-else-if="!isUnknownTeam && teamWorkflows.length === 0"
+    class="text-center"
+  >
     <img src="@/assets/svg/files-and-folder.svg" class="mx-auto w-96" />
     <p class="text-lg font-semibold">Nothing to see here</p>
     <p class="text-gray-600 dark:text-gray-200">
@@ -31,9 +34,10 @@
       :key="workflow.id"
       :data="workflow"
       :menu="workflowMenus"
+      :disabled="isUnknownTeam"
       @menuSelected="onMenuSelected"
       @execute="executeWorkflow(workflow)"
-      @click="$router.push(`/teams/${teamId}/workflows/${$event.id}`)"
+      @click="openWorkflowPage"
     >
       <template #footer-content>
         <span
@@ -49,6 +53,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toastification';
 import { fetchApi } from '@/utils/api';
 import { useUserStore } from '@/stores/user';
@@ -60,6 +65,7 @@ import { tagColors } from '@/utils/shared';
 import SharedCard from '@/components/newtab/shared/SharedCard.vue';
 
 const props = defineProps({
+  active: Boolean,
   search: {
     type: String,
     default: '',
@@ -101,9 +107,11 @@ const menu = [
 const { t } = useI18n();
 const toast = useToast();
 const dialog = useDialog();
+const router = useRouter();
 const userStore = useUserStore();
 const teamWorkflowStore = useTeamWorkflowStore();
 
+const isUnknownTeam = computed(() => props.teamId === '(unknown)');
 const workflowMenus = computed(() =>
   menu.filter((item) => {
     if (!item.permissions) return true;
@@ -111,8 +119,25 @@ const workflowMenus = computed(() =>
     return userStore.validateTeamAccess(props.teamId, item.permissions);
   })
 );
-const teamWorkflows = computed(() => teamWorkflowStore.getByTeam(props.teamId));
+const teamWorkflows = computed(() => {
+  if (isUnknownTeam.value) {
+    return Object.keys(teamWorkflowStore.workflows).reduce((acc, teamId) => {
+      const teamExist = userStore.user?.teams?.some(
+        (team) => team.id === teamId || team.id === +teamId
+      );
+      if (!teamExist) {
+        acc.push(...Object.values(teamWorkflowStore.workflows[teamId]));
+      }
+
+      return acc;
+    }, []);
+  }
+
+  return teamWorkflowStore.getByTeam(props.teamId);
+});
 const workflows = computed(() => {
+  if (!props.active) return [];
+
   const filtered = teamWorkflows.value.filter(({ name }) =>
     name.toLocaleLowerCase().includes(props.search.toLocaleLowerCase())
   );
@@ -166,4 +191,9 @@ function onMenuSelected({ id, data }) {
     });
   }
 }
+function openWorkflowPage({ id }) {
+  if (isUnknownTeam.value) return;
+
+  router.push(`/teams/${props.teamId}/workflows/${id}`);
+}
 </script>

src/newtab/pages/Workflows.vue

@@ -50,7 +50,7 @@
             </span>
           </ui-list-item>
           <ui-expand
-            v-if="userStore.user?.teams?.length > 0"
+            v-if="state.teams.length > 0"
             append-icon
             header-class="px-4 py-2 rounded-lg mb-1 hoverable w-full flex items-center"
           >
@@ -62,7 +62,7 @@
             </template>
             <ui-list class="space-y-1">
               <ui-list-item
-                v-for="team in userStore.user.teams"
+                v-for="team in state.teams"
                 :key="team.id"
                 :active="state.teamId === team.id || +state.teamId === team.id"
                 :title="team.name"
@@ -171,8 +171,9 @@
           </div>
         </div>
         <ui-tab-panels v-model="state.activeTab" class="flex-1 mt-6">
-          <ui-tab-panel value="team">
+          <ui-tab-panel value="team" cache>
             <workflows-user-team
+              :active="state.activeTab === 'team'"
               :team-id="state.teamId"
               :search="state.query"
               :sort="{ by: state.sortBy, order: state.sortOrder }"
@@ -235,7 +236,7 @@
   </div>
 </template>
 <script setup>
-import { computed, shallowReactive, watch } from 'vue';
+import { computed, shallowReactive, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useToast } from 'vue-toastification';
@@ -245,6 +246,7 @@ import { useGroupTooltip } from '@/composable/groupTooltip';
 import { isWhitespace } from '@/utils/helper';
 import { useUserStore } from '@/stores/user';
 import { useWorkflowStore } from '@/stores/workflow';
+import { useTeamWorkflowStore } from '@/stores/teamWorkflow';
 import { useHostedWorkflowStore } from '@/stores/hostedWorkflow';
 import { importWorkflow, getWorkflowPermissions } from '@/utils/workflowData';
 import WorkflowsLocal from '@/components/newtab/workflows/WorkflowsLocal.vue';
@@ -261,17 +263,22 @@ const dialog = useDialog();
 const router = useRouter();
 const userStore = useUserStore();
 const workflowStore = useWorkflowStore();
+const teamWorkflowStore = useTeamWorkflowStore();
 const hostedWorkflowStore = useHostedWorkflowStore();
 
 const sorts = ['name', 'createdAt'];
 const { teamId, active } = router.currentRoute.value.query;
-
 const savedSorts = JSON.parse(localStorage.getItem('workflow-sorts') || '{}');
+const validTeamId = userStore.user?.teams?.some(
+  ({ id }) => id === teamId || id === +teamId
+);
+
 const state = shallowReactive({
+  teams: [],
   query: '',
   activeFolder: '',
-  teamId: teamId || '',
   activeTab: active || 'local',
+  teamId: validTeamId ? teamId : '',
   perPage: savedSorts.perPage || 18,
   sortBy: savedSorts.sortBy || 'createdAt',
   sortOrder: savedSorts.sortOrder || 'desc',
@@ -389,6 +396,24 @@ watch(
     router.replace({ ...router.currentRoute.value, query });
   }
 );
+
+onMounted(() => {
+  const teams = [];
+  const unknownInputted = false;
+  Object.keys(teamWorkflowStore.workflows).forEach((id) => {
+    const userTeam = userStore.user?.teams?.find(
+      (team) => team.id === id || team.id === +id
+    );
+
+    if (userTeam) {
+      teams.push({ name: userTeam.name, id: userTeam.id });
+    } else if (!unknownInputted) {
+      teams.unshift({ name: '(unknown)', id: '(unknown)' });
+    }
+  });
+
+  state.teams = teams;
+});
 </script>
 <style>
 .workflow-sort select {