Merge pull request #2156 from frappe/develop

chore(release): dev to main

.github/workflows/server-tests.yml

@@ -67,7 +67,7 @@ jobs:
         run: echo "127.0.0.1 test_site" | sudo tee -a /etc/hosts
 
       - name: Cache pip
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: ${{ runner.os }}-pip-${{ hashFiles('**/*requirements.txt', '**/pyproject.toml') }}
@@ -76,7 +76,7 @@ jobs:
             ${{ runner.os }}-
 
       - name: Cache node modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         env:
           cache-name: cache-node-modules
         with:
@@ -91,7 +91,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
-      - uses: actions/cache@v2
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

.gitignore

@@ -8,6 +8,7 @@ __pycache__/
 *.log
 tags
 node_modules
+.vscode
 
 # Distribution / packaging
 .Python

README.md

@@ -8,6 +8,8 @@
 ![GitHub release (latest by date)](https://img.shields.io/github/v/release/frappe/helpdesk)
 [![codecov](https://codecov.io/github/frappe/helpdesk/branch/develop/graph/badge.svg?token=8ZXHCY4G9U)](https://codecov.io/github/frappe/helpdesk)
 
+<a href="https://trendshift.io/repositories/12764" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12764" alt="teableio%2Fteable | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+</div>
 
 </div>
 
@@ -57,7 +59,7 @@ Managing issues from our customers was a big challenge for us. We were using the
 
 <div align="center">
 	<sub>
-		Upload articles and let your customer solve there queries through the Knowledge Base.
+		Upload articles and let your customer solve their queries through the Knowledge Base.
 	</sub>
 </div>
 

desk/src/components/BrandLogo.vue

@@ -1,5 +1,10 @@
 <template>
-  <Avatar v-if="config.brandLogo" size="xl" :image="config.brandLogo" />
+  <img
+    v-if="config.brandLogo"
+    :src="config.brandLogo"
+    alt="Brand Logo"
+    class="h-8 w-8 shrink-0 object-cover"
+  />
   <HDLogo v-else class="h-8 w-8 shrink-0 rounded" />
 </template>
 

desk/src/components/CommentBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-col text-base">
+  <div class="flex-col text-base flex-1" ref="commentBoxRef">
     <div class="mb-1 ml-0.5 flex items-center justify-between">
       <div class="text-gray-600 flex items-center gap-2">
         <Avatar
@@ -17,15 +17,26 @@
           </span>
         </p>
       </div>
-      <div class="flex items-center">
+      <div class="flex items-center gap-1">
         <Tooltip :text="dateFormat(creation, dateTooltipFormat)">
           <span class="pl-0.5 text-sm text-gray-600">
             {{ timeAgo(creation) }}
           </span>
         </Tooltip>
-        <div v-if="authStore.userId === commentedBy">
+        <div v-if="authStore.userId === commentedBy && !editable">
           <Dropdown
-            :options="[{ label: 'Delete', onClick: () => (showDialog = true) }]"
+            :options="[
+              {
+                label: 'Edit',
+                onClick: () => handleEditMode(),
+                icon: 'edit-2',
+              },
+              {
+                label: 'Delete',
+                onClick: () => (showDialog = true),
+                icon: 'trash-2',
+              },
+            ]"
           >
             <Button
               icon="more-horizontal"
@@ -36,10 +47,31 @@
         </div>
       </div>
     </div>
-    <div
-      class="prose-f grow cursor-pointer rounded bg-gray-50 px-4 py-3 text-base leading-6 transition-all duration-300 ease-in-out"
-      v-html="content"
-    />
+    <div class="rounded bg-gray-50 px-4 py-3">
+      <TextEditor
+        ref="editorRef"
+        :editor-class="'prose-f shrink  text-p-sm transition-all duration-300 ease-in-out block w-full content'"
+        :content="_content"
+        :editable="editable"
+        :bubble-menu="textEditorMenuButtons"
+        @change="(event:string) => {_content = event}"
+      >
+        <template #bottom v-if="editable">
+          <div class="flex flex-row-reverse gap-2">
+            <Button label="Save" @click="handleSaveComment" variant="solid" />
+            <Button label="Discard" @click="handleDiscard" />
+          </div>
+        </template>
+      </TextEditor>
+      <div class="flex flex-wrap gap-2" v-if="!editable">
+        <AttachmentItem
+          v-for="a in attachments"
+          :key="a.file_url"
+          :label="a.file_name"
+          :url="a.file_url"
+        />
+      </div>
+    </div>
   </div>
   <Dialog
     v-model="showDialog"
@@ -59,25 +91,57 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { Dropdown, createResource, Dialog, Avatar } from "frappe-ui";
-import { dateFormat, timeAgo, dateTooltipFormat, createToast } from "@/utils";
+import { ref, PropType, onMounted } from "vue";
+import {
+  Dropdown,
+  createResource,
+  Dialog,
+  Avatar,
+  TextEditor,
+} from "frappe-ui";
+import {
+  dateFormat,
+  timeAgo,
+  dateTooltipFormat,
+  createToast,
+  textEditorMenuButtons,
+  isContentEmpty,
+} from "@/utils";
+import { AttachmentItem } from "@/components";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
-
+import { CommentActivity } from "@/types";
+import { updateRes as updateComment } from "@/stores/knowledgeBase";
 const authStore = useAuthStore();
 const props = defineProps({
   activity: {
-    type: Object,
+    type: Object as PropType<CommentActivity>,
     required: true,
   },
 });
 const { getUser } = useUserStore();
 
-const { name, creation, content, commenter, commentedBy } = props.activity;
+const { name, creation, content, commenter, commentedBy, attachments } =
+  props.activity;
 
 const emit = defineEmits(["update"]);
 const showDialog = ref(false);
+const editable = ref(false);
+const _content = ref(content);
+
+// HTML refs
+const commentBoxRef = ref(null);
+const editorRef = ref(null);
+
+function handleEditMode() {
+  editable.value = true;
+  editorRef.value.editor.chain().focus("start");
+}
+
+function handleDiscard() {
+  _content.value = content;
+  editable.value = false;
+}
 
 const deleteComment = createResource({
   url: "frappe.client.delete",
@@ -94,4 +158,43 @@ const deleteComment = createResource({
     });
   },
 });
+
+function handleSaveComment() {
+  if (content === _content.value) {
+    editable.value = false;
+    return;
+  }
+  if (isContentEmpty(_content.value)) {
+    createToast({
+      title: "Comment cannot be empty",
+      icon: "x",
+      iconClasses: "text-red-600",
+    });
+    return;
+  }
+
+  updateComment.submit(
+    {
+      doctype: "HD Ticket Comment",
+      name: name,
+      fieldname: "content",
+      value: _content.value,
+    },
+    {
+      onSuccess: () => {
+        editable.value = false;
+        emit("update");
+        createToast({
+          title: "Comment updated",
+          icon: "check",
+          iconClasses: "text-green-500",
+        });
+      },
+    }
+  );
+}
+
+onMounted(() => {
+  commentBoxRef.value.style.width = "0px";
+});
 </script>

desk/src/components/CommentTextEditor.vue

@@ -104,6 +104,7 @@ import { AttachmentItem } from "@/components/";
 import { useAgentStore } from "@/stores/agent";
 import { useStorage } from "@vueuse/core";
 import { PreserveVideoControls } from "@/tiptap-extensions";
+import { textEditorMenuButtons } from "@/utils";
 
 const { agents: agentsList } = useAgentStore();
 
@@ -153,52 +154,18 @@ async function submitComment() {
       method: "new_comment",
       args: {
         content: newComment.value,
+        attachments: attachments.value,
       },
     }),
     onSuccess: () => {
       emit("submit");
       loading.value = false;
     },
+    onError: () => {
+      loading.value = false;
+    },
   });
 
   comment.submit();
 }
-
-const textEditorMenuButtons = [
-  "Paragraph",
-  ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-  "Separator",
-  "Bold",
-  "Italic",
-  "Separator",
-  "Bullet List",
-  "Numbered List",
-  "Separator",
-  "Align Left",
-  "Align Center",
-  "Align Right",
-  "FontColor",
-  "Separator",
-  "Image",
-  "Video",
-  "Link",
-  "Blockquote",
-  "Code",
-  "Horizontal Rule",
-  [
-    "InsertTable",
-    "AddColumnBefore",
-    "AddColumnAfter",
-    "DeleteColumn",
-    "AddRowBefore",
-    "AddRowAfter",
-    "DeleteRow",
-    "MergeCells",
-    "SplitCell",
-    "ToggleHeaderColumn",
-    "ToggleHeaderRow",
-    "ToggleHeaderCell",
-    "DeleteTable",
-  ],
-];
 </script>

desk/src/components/DiscardButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <Button :label="label" @click="handleDiscard" />
+</template>
+
+<script setup lang="ts">
+import { confirmDialog } from "frappe-ui";
+
+const emit = defineEmits<{
+  (event: "discard"): void;
+}>();
+
+const {
+  label = "Discard",
+  hideDialog = false,
+  title = "Discard?",
+  message = "Are you sure you want to discard this?",
+} = defineProps<{
+  label?: string;
+  hideDialog?: boolean;
+  title?: string;
+  message?: string;
+}>();
+
+function handleDiscard() {
+  if (hideDialog) {
+    emit("discard");
+    return;
+  }
+  confirmDialog({
+    title: title,
+    message: message,
+    onConfirm: ({ hideDialog }: { hideDialog: Function }) => {
+      emit("discard");
+      hideDialog();
+    },
+  });
+}
+</script>

desk/src/components/EmailArea.vue

@@ -71,11 +71,7 @@
       </span>
       <span v-if="bcc">{{ bcc }}</span>
     </div>
-    <!-- <div
-      class="email-content prose-f max-h-[500px] overflow-y-auto"
-      v-html="content"
-    /> -->
-    <EmailContent :content="content" :emailBox="emailBox" />
+    <EmailContent :content="content" />
     <div class="flex flex-wrap gap-2">
       <AttachmentItem
         v-for="a in attachments"
@@ -88,11 +84,10 @@
 </template>
 
 <script setup lang="ts">
-import { UserAvatar, AttachmentItem } from "@/components";
+import { AttachmentItem } from "@/components";
 import { dateFormat, timeAgo, dateTooltipFormat } from "@/utils";
 import { ReplyIcon, ReplyAllIcon } from "./icons";
 import { useScreenSize } from "@/composables/screen";
-import { inject } from "vue";
 
 const props = defineProps({
   activity: {
@@ -106,7 +101,6 @@ const { sender, to, cc, bcc, creation, subject, attachments, content } =
 
 const emit = defineEmits(["reply"]);
 
-let emailBox = inject("communicationArea");
 const { isMobileView } = useScreenSize();
 
 // TODO: Implement reply functionality using this way instead of emit drillup