Merge remote-tracking branch 'origin/master' into feature-dashboard-n…

…ovember

Signed-off-by: yuda <[email protected]>

.github/workflows/dispatch_release.yaml

@@ -22,8 +22,25 @@ env:
   SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
 
 jobs:
+  mirinae:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Invoke mirinae release workflow
+        id: mirinae
+        uses: convictional/[email protected]
+        with:
+          owner: ${{ github.repository_owner }}
+          repo: ${{ github.event.repository.name }}
+          github_token: ${{ secrets.PAT_TOKEN }}
+          workflow_file_name: dispatch_mirinae_release.yaml
+          wait_workflow: true
+          propagate_failure: true
+          wait_interval: 5
+          ref: ${{ github.ref_name }}
+
   storybook:
     runs-on: ubuntu-latest
+    needs: mirinae
     steps:
       - name: Invoke storybook release workflow
         uses: convictional/[email protected]
@@ -38,6 +55,7 @@ jobs:
 
   versioning_and_docker:
     runs-on: ubuntu-latest
+    needs: mirinae
     outputs:
       new_commit_sha: ${{ steps.get_sha.outputs.NEW_COMMIT_SHA }}
     steps:
@@ -71,8 +89,18 @@ jobs:
           npm version $converted_version --no-git-tag-version --allow-same-version --no-commit-hooks --include-workspace-root -w=web
           echo "converted_version=$converted_version" >> "$GITHUB_OUTPUT"
 
+      - name: Import GPG key
+        id: import-gpg
+        uses: crazy-max/[email protected]  
+        with:
+          gpg_private_key: ${{ secrets.GPG_PRIVATE_KEY }}
+          passphrase: ${{ secrets.GPG_PASSPHRASE }}
+          git_user_signingkey: true
+          git_commit_gpgsign: true
+
       - name: Configure git
         run: |
+          git config --global user.signingkey "${{ secrets.CLOUDFORET_ADMIN_GPG_KEY_ID }}"
           git config --global user.email "${{ vars.GIT_EMAIL }}"
           git config --global user.name "${{ vars.GIT_USERNAME }}"
 
@@ -86,8 +114,13 @@ jobs:
         if: steps.check_changes.outputs.changed == 'true'
         id: get_sha
         run: |
-          git commit -am "chore: version ${{ env.VERSION }}"
+          git commit -s -am "chore: version ${{ env.VERSION }}"
           echo "NEW_COMMIT_SHA=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
+        env:
+          GIT_AUTHOR_NAME: ${{ steps.import-gpg.outputs.name }}
+          GIT_AUTHOR_EMAIL: ${{ steps.import-gpg.outputs.email }}
+          GIT_COMMITTER_NAME: ${{ steps.import-gpg.outputs.name }}
+          GIT_COMMITTER_EMAIL: ${{ steps.import-gpg.outputs.email }}
 
       - name: Push changes
         if: steps.check_changes.outputs.changed == 'true'

README.md

@@ -66,6 +66,8 @@ The final configuration file will be generated by merging the default configurat
 | DOMAIN_IMAGE     | The url of the image used for the SignIn page and GNB                                                                                                                                                  | X        |
 | DOCS             | Information for creating related document links. <br/> - Array of objects with labels and links <br/> - Support ejs template grammar <br/> - Provided variable: `lang` (User language code. e.g. "en") | X        |
 | CONTACT_LINK     | Define the 'contact us' link on the SignIn page                                                                                                                                                        | X        |
+| ADVANCED_SERVICE | The dict of advanced service names and allowed domain ids. { service_name: [id1, id2, ...] }                                                                                                           | X        |
+| SMTP_ENABLED | The state of the SMTP(Simple Mail Transfer Protocol) functionality. | X        |
 
 
 ### 3. Add your chart license keys to your config file (Optional)

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.0-dev242",
+  "version": "2.0.0-dev245",
   "private": true,
   "description": "Cloudforet Console Web Application",
   "author": "Cloudforet",
@@ -32,6 +32,7 @@
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-color": "^2.0.3",
     "@tiptap/extension-link": "^2.0.3",
+    "@tiptap/extension-placeholder": "^2.10.2",
     "@tiptap/extension-text-align": "^2.0.3",
     "@tiptap/extension-text-style": "^2.0.3",
     "@tiptap/extension-underline": "^2.0.3",
@@ -53,6 +54,7 @@
     "diff-match-patch": "^1.0.5",
     "echarts": "^5.5.0",
     "ejs": "^3.1.10",
+    "hangul-js": "^0.2.6",
     "hashids": "^2.2.1",
     "highlight.js": "^11.5.1",
     "html-to-image": "^1.9.0",
@@ -70,6 +72,7 @@
     "prosemirror-transform": "^1.7.3",
     "prosemirror-view": "^1.31.5",
     "qrcode": "^1.5.4",
+    "tiptap-markdown": "^0.8.10",
     "uuid": "^8.3.2",
     "v-click-outside": "^3.0.1",
     "v-tooltip": "^2.0.3",

apps/web/public/config/default.json

@@ -19,5 +19,6 @@
     { "label": "GitHub", "link": "https://github.com/cloudforet-io" }
   ],
   "CONTACT_LINK": "",
-  "SMTP_ENABLED": false
+  "SMTP_ENABLED": false,
+  "ADVANCED_SERVICE": {}
 }

apps/web/public/config/development.json.sample

@@ -24,4 +24,5 @@
         "API_KEY": "api-key"
     }
   }
+  "ADVANCED_SERVICE": {}
 }

apps/web/src/common/components/buttons/ActionMenuButton.vue

@@ -5,6 +5,8 @@ import { ref, computed } from 'vue';
 import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+import { i18n } from '@/translations';
+
 interface ActionMenuItem extends MenuItem {
     name: string;
 }
@@ -37,8 +39,8 @@ useContextMenuStyle({
     menuWidth: props.size === 'sm' ? '113px' : '192px',
 });
 const menuMap = computed<Record<SupportMenu, ActionMenuItem>>(() => ({
-    edit: { name: 'edit', icon: 'ic_edit', label: 'Edit' },
-    delete: { name: 'delete', icon: 'ic_delete', label: 'Delete' },
+    edit: { name: 'edit', icon: 'ic_edit', label: i18n.t('COMMON.BUTTONS.EDIT') },
+    delete: { name: 'delete', icon: 'ic_delete', label: i18n.t('COMMON.BUTTONS.DELETE') },
 }));
 const menu = computed<ActionMenuItem[]>(() => {
     if (props.menu) {
@@ -50,8 +52,8 @@ const menu = computed<ActionMenuItem[]>(() => {
         });
     }
     return [
-        { name: 'edit', icon: 'ic_edit', label: 'Edit' },
-        { name: 'delete', icon: 'ic_delete', label: 'Delete' },
+        { name: 'edit', icon: 'ic_edit', label: i18n.t('COMMON.BUTTONS.EDIT') },
+        { name: 'delete', icon: 'ic_delete', label: i18n.t('COMMON.BUTTONS.DELETE') },
     ];
 });
 const toggleMenu = () => {

apps/web/src/common/components/editor/TextEditor.vue

@@ -5,11 +5,13 @@ import {
 
 import { Color } from '@tiptap/extension-color';
 import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
 import TextAlign from '@tiptap/extension-text-align';
 import TextStyle from '@tiptap/extension-text-style';
 import Underline from '@tiptap/extension-underline';
 import StarterKit from '@tiptap/starter-kit';
 import { Editor, EditorContent } from '@tiptap/vue-2';
+import { Markdown } from 'tiptap-markdown';
 
 import { createImageExtension } from '@/common/components/editor/extensions/image';
 import { getAttachments, setAttachmentsToContents } from '@/common/components/editor/extensions/image/helper';
@@ -23,6 +25,8 @@ interface Props {
     imageUploader?: ImageUploader<any>;
     attachments?: Attachment<any>[];
     invalid?: boolean;
+    placeholder?: string;
+    contentType?: 'html'|'markdown';
 }
 const props = withDefaults(defineProps<Props>(), {
     value: '',
@@ -32,6 +36,8 @@ const props = withDefaults(defineProps<Props>(), {
     }),
     attachments: () => [],
     invalid: false,
+    placeholder: '',
+    contentType: 'html',
 });
 const emit = defineEmits<{(e: 'update:value', value: string): void;
     (e: 'update:attachments', attachments: Attachment<any>[]): void;
@@ -60,6 +66,10 @@ onMounted(() => {
                     },
                 },
             }),
+            Markdown,
+            Placeholder.configure({
+                placeholder: props.placeholder,
+            }),
             Underline,
             Link,
             TextStyle,
@@ -70,7 +80,13 @@ onMounted(() => {
             createImageExtension(props.imageUploader, imgFileDataMap),
         ],
         onUpdate: () => {
-            emit('update:value', state.editor?.getHTML() ?? '');
+            let content = '';
+            if (props.contentType === 'html') {
+                content = state.editor?.getHTML() ?? '';
+            } else {
+                content = state.editor?.storage.markdown.getMarkdown() ?? '';
+            }
+            emit('update:value', content);
             emit('update:attachments', state.editor ? getAttachments<any>(state.editor as Editor, imgFileDataMap) : []);
         },
     });
@@ -82,7 +98,12 @@ onBeforeUnmount(() => {
 
 watch([() => props.value, () => props.attachments], ([value, attachments], prev) => {
     if (!state.editor) return;
-    const isSame = state.editor.getHTML() === value;
+    let isSame;
+    if (props.contentType === 'html') {
+        isSame = state.editor.getHTML() === value;
+    } else {
+        isSame = state.editor.storage.markdown.getMarkdown() === value;
+    }
     if (isSame) return;
     let newContents = value;
     if (attachments !== prev[1]) newContents = setAttachmentsToContents(value, attachments);
@@ -112,6 +133,15 @@ watch([() => props.value, () => props.attachments], ([value, attachments], prev)
             &:focus {
                 @apply outline-none;
             }
+
+            /* Placeholder (at the top) */
+            p.is-editor-empty:first-child::before {
+                @apply text-gray-400;
+                content: attr(data-placeholder);
+                float: left;
+                height: 0;
+                pointer-events: none;
+            }
         }
     }
 }

apps/web/src/common/components/editor/TextEditorViewer.vue

@@ -1,27 +1,40 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, toRef } from 'vue';
+
+import { useMarkdown } from '@cloudforet/mirinae';
 
 import { setAttachmentsToContents } from '@/common/components/editor/extensions/image/helper';
 import type { Attachment } from '@/common/components/editor/extensions/image/type';
 
 import { loadMonospaceFonts } from '@/styles/fonts';
 
 interface Props {
-    contents?: string,
-    attachments?: Attachment[]
+    contents?: string;
+    attachments?: Attachment[];
+    showInBox?: boolean
+    contentType?: 'html'|'markdown';
 }
 const props = withDefaults(defineProps<Props>(), {
     contents: '',
     attachments: () => [],
+    showInBox: false,
+    contentType: 'html',
 });
 
 loadMonospaceFonts();
-const refinedContents = computed(() => setAttachmentsToContents(props.contents, props.attachments));
+const { sanitizedHtml } = useMarkdown({ value: toRef(props, 'contents') });
+const refinedContents = computed(() => {
+    if (props.contentType === 'markdown') {
+        return sanitizedHtml.value;
+    }
+    return setAttachmentsToContents(props.contents, props.attachments);
+});
 </script>
 
 <template>
     <!--        eslint-disable-next-line vue/no-v-html-->
     <div class="text-editor-contents"
+         :class="{'contents-box': props.showInBox}"
          v-html="refinedContents"
     />
 </template>
@@ -31,6 +44,10 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
 .text-editor-contents {
     margin-left: 0.1rem;
 
+    &.contents-box {
+        @apply ml-0 p-2 min-h-21 border border-gray-300 rounded-md;
+    }
+
     @mixin all-nodes-style;
 
     img:active {
@@ -41,4 +58,4 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
         @apply ml-1;
     }
 }
-</style>
+</style>ㅕ

apps/web/src/common/components/editor/extensions/image/plugins/drop-image.ts

@@ -94,8 +94,8 @@ export const dropImagePlugin = (upload: ImageUploader<any>, imgFileDataMap: Map<
                             src: downloadUrl,
                             'file-id': fileId,
                         });
-                        // const transaction = view.state.tr.insert(coordinates.pos, node);
-                        const transaction = view.state.tr.setNodeMarkup(coordinates.pos, schema.nodes.image, node.attrs);
+                        const loadingPos = view.state.selection.anchor - 1; // get the position of the loading node
+                        const transaction = view.state.tr.setNodeMarkup(loadingPos, schema.nodes.image, node.attrs);
                         view.dispatch(transaction);
                     } else {
                         reader.onload = (readerEvent) => {