Merge 'feature-itsm' into 'master'

apps/web/package.json

@@ -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",

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

@@ -5,6 +5,7 @@ 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';
@@ -23,6 +24,7 @@ interface Props {
     imageUploader?: ImageUploader<any>;
     attachments?: Attachment<any>[];
     invalid?: boolean;
+    placeholder?: string;
 }
 const props = withDefaults(defineProps<Props>(), {
     value: '',
@@ -32,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
     }),
     attachments: () => [],
     invalid: false,
+    placeholder: '',
 });
 const emit = defineEmits<{(e: 'update:value', value: string): void;
     (e: 'update:attachments', attachments: Attachment<any>[]): void;
@@ -60,6 +63,9 @@ onMounted(() => {
                     },
                 },
             }),
+            Placeholder.configure({
+                placeholder: props.placeholder,
+            }),
             Underline,
             Link,
             TextStyle,
@@ -112,6 +118,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

@@ -7,12 +7,14 @@ import type { Attachment } from '@/common/components/editor/extensions/image/typ
 import { loadMonospaceFonts } from '@/styles/fonts';
 
 interface Props {
-    contents?: string,
-    attachments?: Attachment[]
+    contents?: string;
+    attachments?: Attachment[];
+    showInBox?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
     contents: '',
     attachments: () => [],
+    showInBox: false,
 });
 
 loadMonospaceFonts();
@@ -22,6 +24,7 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
 <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 +34,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 +48,4 @@ const refinedContents = computed(() => setAttachmentsToContents(props.contents,
         @apply ml-1;
     }
 }
-</style>
+</style>ㅕ

apps/web/src/common/components/inputs/LabelsInput.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+// CAUTION: this vOnClickOutside is using !! Please do not remove.
+import { vOnClickOutside } from '@vueuse/components';
+import {
+    watch, ref,
+} from 'vue';
+
+import {
+    PIconButton, PLabel, PTextInput,
+} from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import { useFieldValidator } from '@/common/composables/form-validator';
+
+const props = defineProps<{
+    labels?: string[];
+    editable?: boolean;
+}>();
+const emit = defineEmits<{(event: 'update:labels', value: string[]): void;
+}>();
+
+
+const labelList = ref<string[]>([]);
+
+const {
+    value, setValue, isInvalid, invalidText,
+} = useFieldValidator(
+    '',
+    (val: string) => {
+        if (val.length > 30) return i18n.t('DASHBOARDS.CUSTOMIZE.VALIDATION_LIMITED_CHAR_LABEL');
+        if (labelList.value.find((d) => d === val)) return i18n.t('DASHBOARDS.CUSTOMIZE.VALIDATION_DUPLICATED_LABEL');
+        return '';
+    },
+);
+
+const inputMode = ref(false);
+const isInputFocused = ref(false);
+
+const handleClickPlus = async () => {
+    inputMode.value = true;
+    isInputFocused.value = true;
+};
+const handleKeyEscape = () => {
+    inputMode.value = false;
+    setValue('');
+};
+const handleKeyEnter = (e: KeyboardEvent) => {
+    if (e.isComposing || !value.value || isInvalid.value) return;
+    labelList.value.push(value.value);
+    setValue('');
+    emit('update:labels', labelList.value);
+};
+const handleClickDelete = (index: number) => {
+    labelList.value.splice(index, 1);
+    emit('update:labels', labelList.value);
+};
+watch(() => props.labels, (newLabels) => {
+    labelList.value = newLabels || [];
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="flex flex-wrap items-start gap-1 min-h-8"
+         @keydown.esc="handleKeyEscape"
+         @keydown.enter="handleKeyEnter"
+    >
+        <div class="flex flex-wrap items-center gap-1 min-h-6">
+            <p-label
+                v-for="(label, index) in labelList"
+                :key="`dashboard-label-${index}`"
+                :text="label"
+                :deletable="props.editable"
+                @delete="handleClickDelete(index)"
+            />
+            <p-icon-button v-if="!inputMode && props.editable"
+                           class="mr-1"
+                           style-type="tertiary"
+                           name="ic_plus_bold"
+                           size="sm"
+                           shape="square"
+                           @click="handleClickPlus"
+            />
+            <template v-if="!inputMode && !labelList.length">
+                <span v-if="props.editable"
+                      class="text-gray-500 text-xs pt-1 cursor-pointer"
+                      @click="handleClickPlus"
+                >
+                    {{ $t('DASHBOARDS.CUSTOMIZE.ADD_LABEL') }}
+                </span>
+                <div v-else
+                     class="text-gray-300 text-xs"
+                >
+                    {{ $t('DASHBOARDS.CUSTOMIZE.NO_LABEL') }}
+                </div>
+            </template>
+        </div>
+        <div v-if="inputMode"
+             v-on-click-outside="handleKeyEscape"
+             class="min-w-40 max-w-40"
+        >
+            <p-text-input :value="value"
+                          :is-focused="isInputFocused"
+                          :invalid="isInvalid"
+                          block
+                          size="sm"
+                          :placeholder="$t('DASHBOARDS.CUSTOMIZE.ENTER_NEW_LABEL')"
+                          @update:value="setValue"
+                          @update:is-focused="isInputFocused = $event"
+            />
+            <p v-if="isInvalid"
+               class="text-label-sm text-alert mt-1"
+            >
+                {{ invalidText }}
+            </p>
+        </div>
+    </div>
+</template>

apps/web/src/common/components/modals/DeleteModal.vue

@@ -12,6 +12,7 @@
                     :hide-header-close-button="hideCloseButton"
                     @confirm="handleConfirm"
                     @close="$emit('close')"
+                    @closed="$emit('closed')"
                     @cancel="$emit('cancel')"
     >
         <template #body>

apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue

@@ -114,12 +114,20 @@ const handleMenuDescription = (value?: boolean) => {
 const handleMinimizedGnbRail = () => {
     gnbStore.createMinimizeNavRail(!gnbGetters.isMinimizeNavRail);
 };
-const convertGNBMenuToMenuItem = (menuList: DisplayMenu[], menuType: ContextMenuType = 'item'): GNBMenuType[] => menuList.map((menu) => ({
-    ...menu,
-    name: menu.id,
-    type: menuType,
-    disabled: menuType === 'header' && menu.id.includes('cost'),
-}));
+const convertGNBMenuToMenuItem = (menuList: DisplayMenu[], menuType: ContextMenuType = 'item'): GNBMenuType[] => {
+    const results: GNBMenuType[] = [];
+    menuList.forEach((menu) => {
+        if (!menu.hideOnGNB && !menu.hideOnSiteMap) {
+            results.push({
+                ...menu,
+                name: menu.id,
+                type: menuType,
+                disabled: menuType === 'header' && menu.id.includes('cost'),
+            });
+        }
+    });
+    return results;
+};
 const refinedMenuList = (list, value) => {
     const index = list.findIndex((d) => d.id === value);
     if (index !== -1) {

apps/web/src/common/modules/project/ProjectSelectDropdown.vue

@@ -47,6 +47,9 @@ interface Props {
     workspaceId?: string;
     isInitSelectedItem?: boolean;
     block?: boolean;
+    styleType?: string;
+    appearanceType?: 'stack';
+    showDeleteAllButton?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,6 +67,9 @@ const props = withDefaults(defineProps<Props>(), {
     hideCreateButton: false,
     workspaceId: undefined,
     isInitSelectedItem: false,
+    styleType: undefined,
+    appearanceType: undefined,
+    showDeleteAllButton: undefined,
 });
 
 const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
@@ -303,8 +309,10 @@ watch(() => state._selectedProjectIds, (selectedProjectIds) => {
                            :readonly="props.readonly"
                            :menu-position="props.position"
                            disable-handler
+                           :show-delete-all-button="props.showDeleteAllButton"
+                           :style-type="props.styleType"
                            :block="props.block"
-                           appearance-type="stack"
+                           :appearance-type="props.appearanceType"
                            :is-filterable="!props.readonly"
                            @update:visible-menu="handleUpdateVisibleMenu"
                            @delete-tag="handleDeleteTag"

apps/web/src/common/modules/user/UserSelectDropdown.vue

@@ -28,6 +28,10 @@ const props = withDefaults(defineProps<{
      disabled?: boolean;
      readonly?: boolean;
      userPool?: string[];
+     selectionLabel?: string;
+     appearanceType?: string;
+     styleType?: string;
+     block?: boolean;
 }>(), {
     userId: '',
     userIds: () => [],
@@ -36,6 +40,10 @@ const props = withDefaults(defineProps<{
     invalid: false,
     disabled: false,
     userPool: undefined,
+    selectionLabel: undefined,
+    appearanceType: 'badge',
+    styleType: undefined,
+    block: undefined,
 });
 
 const emit = defineEmits<{(event: 'update:user-ids', value: string[]): void;
@@ -122,7 +130,8 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
 </script>
 
 <template>
-    <p-select-dropdown show-select-marker
+    <p-select-dropdown class="user-select-dropdown"
+                       show-select-marker
                        :selected="selectedUserItems"
                        :handler="userMenuItemsHandler"
                        :page-size="10"
@@ -133,7 +142,16 @@ watch([loading, () => props.userId, () => props.userIds], ([_loading, newUserId,
                        :use-fixed-menu-style="useFixedMenuStyle"
                        show-delete-all-button
                        :multi-selectable="props.selectionType === 'multiple'"
-                       appearance-type="badge"
+                       :selection-label="props.selectionLabel"
+                       :appearance-type="props.appearanceType"
+                       :style-type="props.styleType"
+                       :block="props.block"
                        @update:selected="handleUpdateSelectedUserItems"
     />
 </template>
+
+<style scoped lang="postcss">
+.user-select-dropdown {
+    width: fit-content;
+}
+</style>

apps/web/src/lib/access-control/config.ts

@@ -45,6 +45,9 @@ export const WORKSPACE_OWNER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.NOTIFICATIONS,
     MENU_ID.INFO,
     MENU_ID.NOTICE,
+    MENU_ID.OPS_FLOW,
+    MENU_ID.OPS_FLOW_LANDING,
+    MENU_ID.TASK_BOARD,
 ];
 export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.WORKSPACE_HOME,
@@ -68,6 +71,9 @@ export const WORKSPACE_MEMBER_DEFAULT_PERMISSIONS: MenuId[] = [
     MENU_ID.NOTIFICATIONS,
     MENU_ID.INFO,
     MENU_ID.NOTICE,
+    MENU_ID.OPS_FLOW,
+    MENU_ID.OPS_FLOW_LANDING,
+    MENU_ID.TASK_BOARD,
 ];
 
 // HACK: this need to be changed with new SYSTEM domain planning

apps/web/src/lib/menu/config.ts

@@ -41,6 +41,10 @@ export const MENU_ID = Object.freeze({
     INFO: 'info',
     NOTICE: 'notice',
     METRIC_EXPLORER: 'metric_explorer',
+    OPS_FLOW: 'ops_flow',
+    OPS_FLOW_LANDING: 'ops_flow_landing',
+    TASK_BOARD: 'task_board',
+    TASK_MANAGEMENT: 'task_management',
 } as const);
 
 export type MenuId = typeof MENU_ID[keyof typeof MENU_ID];