From b28721e10b299b0bcf247557dc6e1be602b2bea6 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Mon, 16 Oct 2023 15:02:02 +0530
Subject: [PATCH] feat: Creates components for Article Search in Reply
 [CW-2285] (#7957)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 .../ArticleSearchResultItem.vue               | 79 +++++++------------
 .../components/ArticleSearch/ArticleView.vue  | 63 +++++++++++++++
 .../components/ArticleSearch/Header.vue       | 54 +++++++++++++
 .../ArticleSearch/SearchResults.vue           | 75 ++++++++++++++++++
 .../ArticleSearchArticleView.stories.js       | 33 ++++++++
 .../stories/ArticleSearchHeader.stories.js    | 31 ++++++++
 .../ArticleSearchResultItem.stories.js        |  2 +-
 .../components/ArticleSkeletonLoader.vue      | 38 ++++-----
 tailwind.config.js                            |  6 ++
 9 files changed, 309 insertions(+), 72 deletions(-)
 rename app/javascript/dashboard/routes/dashboard/helpcenter/components/{ => ArticleSearch}/ArticleSearchResultItem.vue (59%)
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js

diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
similarity index 59%
rename from app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue
rename to app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
index 7fb9bc06d..728a2886d 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearchResultItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue
@@ -1,31 +1,35 @@
 <template>
-  <div class="article-item">
-    <h4 class="text-block-title margin-bottom-0">{{ title }}</h4>
-    <p class="margin-bottom-0 overflow-hidden whitespace-nowrap text-ellipsis">
-      {{ body }}
-    </p>
-    <div class="footer">
-      <p class="text-small meta">
+  <div
+    class="flex flex-col gap-1 bg-white dark:bg-slate-900 hover:bg-slate-25 hover:dark:bg-slate-800 rounded-md py-1 px-2 w-full group"
+  >
+    <button @click="handlePreview">
+      <h4
+        class="text-block-title text-left mb-0 text-slate-900 dark:text-slate-25 px-1 -mx-1 rounded-sm hover:underline cursor-pointer width-auto"
+      >
+        {{ title }}
+      </h4>
+    </button>
+
+    <div class="flex content-between items-center gap-0.5 w-full">
+      <p class="text-sm text-slate-600 dark:text-slate-300 mb-0 w-full">
         {{ locale }}
         {{ ` / ` }}
-        {{
-          category ||
-          $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.ARTICLE_SEARCH_RESULT')
-        }}
+        {{ category || $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.UNCATEGORIZED') }}
       </p>
-      <div class="action-buttons">
+      <div class="flex gap-0.5">
         <woot-button
           :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.COPY_LINK')"
           variant="hollow"
           color-scheme="secondary"
           size="tiny"
           icon="copy"
+          class="invisible group-hover:visible"
           @click="handleCopy"
         />
 
         <a
           :href="url"
-          class="button hollow button--only-icon tiny secondary"
+          class="button hollow button--only-icon tiny secondary invisible group-hover:visible"
           rel="noopener noreferrer nofollow"
           target="_blank"
           :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.OPEN_LINK')"
@@ -38,6 +42,7 @@
           color-scheme="secondary"
           size="tiny"
           icon="preview-link"
+          class="invisible group-hover:visible"
           :title="$t('HELP_CENTER.ARTICLE_SEARCH_RESULT.PREVIEW_LINK')"
           @click="handlePreview"
         />
@@ -46,7 +51,7 @@
           variant="smooth"
           color-scheme="secondary"
           size="tiny"
-          @click="handleClick"
+          @click="handleInsert"
         >
           {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.INSERT_ARTICLE') }}
         </woot-button>
@@ -61,6 +66,10 @@ import { copyTextToClipboard } from 'shared/helpers/clipboard';
 export default {
   name: 'ArticleSearchResultItem',
   props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
     title: {
       type: String,
       default: 'Untitled',
@@ -79,15 +88,15 @@ export default {
     },
     locale: {
       type: String,
-      default: 'en-US',
+      default: '',
     },
   },
   methods: {
-    handleClick() {
-      this.$emit('click');
+    handleInsert() {
+      this.$emit('insert', this.id);
     },
     handlePreview() {
-      this.$emit('preview');
+      this.$emit('preview', this.id);
     },
     async handleCopy() {
       await copyTextToClipboard(this.url);
@@ -96,37 +105,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.article-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-micro);
-}
-
-.footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: var(--space-micro);
-}
-
-.meta {
-  color: var(--s-600);
-  margin-bottom: 0;
-}
-
-.action-buttons {
-  display: flex;
-  gap: var(--space-micro);
-}
-.action-buttons .button:not(.insert-button) {
-  visibility: hidden;
-  opacity: 0;
-  transition: all 0.1s ease-in;
-}
-
-.article-item:hover .action-buttons .button:not(.insert-button) {
-  visibility: visible;
-  opacity: 1;
-}
-</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
new file mode 100644
index 000000000..9b7d2bcaa
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleView.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="h-full w-full flex flex-col flex-1 overflow-hidden">
+    <div class="py-1">
+      <woot-button
+        variant="link"
+        size="small"
+        icon="chevron-left"
+        @click="onBack"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK_RESULTS') }}
+      </woot-button>
+    </div>
+    <div class="w-full h-full overflow-auto min-h-0">
+      <iframe-loader :url="url" />
+    </div>
+
+    <div class="flex justify-end gap-2 py-2">
+      <woot-button
+        variant="hollow"
+        size="small"
+        is-expanded
+        color-scheme="secondary"
+        icon="chevron-left"
+        @click="onBack"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.BACK') }}
+      </woot-button>
+      <woot-button
+        size="small"
+        is-expanded
+        icon="arrow-download"
+        @click="onInsert"
+      >
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH.INSERT_ARTICLE') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import IframeLoader from 'shared/components/IframeLoader.vue';
+
+export default {
+  name: 'ChatwootSearch',
+  components: {
+    IframeLoader,
+  },
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onBack() {
+      this.$emit('back');
+    },
+    onInsert() {
+      this.$emit('insert');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
new file mode 100644
index 000000000..c5d25baa9
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/Header.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="flex flex-col py-1">
+    <div class="flex-container align-middle align-justify py-2">
+      <h3 class="sub-block-title text-slate-900 dark:text-slate-25">
+        {{ title }}
+      </h3>
+      <woot-button
+        variant="clear"
+        size="tiny"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+
+    <div class="relative">
+      <div class="absolute left-0 w-8 h-8 flex justify-center items-center">
+        <fluent-icon icon="search" class="" size="16" />
+      </div>
+      <input
+        type="text"
+        :placeholder="$t('HELP_CENTER.ARTICLE_SEARCH.PLACEHOLDER')"
+        class="block w-full pl-8 h-8 text-sm dark:bg-slate-700 bg-slate-25 rounded-md leading-8 py-1 text-slate-700 shadow-sm ring-2 ring-transparent ring-slate-300 border border-solid border-slate-300 placeholder:text-slate-400 focus:border-woot-600 focus:ring-2 focus:ring-woot-100 mb-0 focus:bg-slate-25 dark:focus:bg-slate-700"
+        :value="searchQuery"
+        @input="onInput"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChatwootSearch',
+  props: {
+    title: {
+      type: String,
+      default: 'Chatwoot',
+    },
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('search', e.target.value);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
new file mode 100644
index 000000000..343d6108e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchResults.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex justify-end gap-1 py-4 bg-white dark:bg-slate-900">
+    <div class="flex flex-col gap-1 w-full">
+      <div v-if="isLoading" class="empty-state-message">
+        <spinner />
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.SEARCH_LOADER') }}
+      </div>
+      <div v-else-if="showNoResults" class="empty-state-message">
+        {{ $t('HELP_CENTER.ARTICLE_SEARCH_RESULT.NO_RESULT') }}
+      </div>
+      <search-result-item
+        v-for="article in articles"
+        v-else
+        :id="article.id"
+        :key="article.id"
+        :title="article.title"
+        :body="article.content"
+        :url="article.url"
+        :category="article.category.name"
+        :locale="article.category.locale"
+        @preview="handlePreview"
+        @insert="handleInsert"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Spinner from 'shared/components/Spinner.vue';
+import SearchResultItem from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/ArticleSearchResultItem.vue';
+
+export default {
+  name: 'SearchResults',
+  components: {
+    Spinner,
+    SearchResultItem,
+  },
+  props: {
+    articles: {
+      type: Array,
+      default: () => [],
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    searchQuery: {
+      type: String,
+      default: '',
+    },
+    portalSlug: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    showNoResults() {
+      return this.searchQuery && this.articles.length === 0;
+    },
+  },
+  methods: {
+    handlePreview(id) {
+      this.$emit('preview', id);
+    },
+    handleInsert(id) {
+      this.$emit('insert', id);
+    },
+  },
+};
+</script>
+<style scoped>
+.empty-state-message {
+  @apply text-center flex items-center justify-center px-4 py-8 text-slate-500 text-sm;
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js
new file mode 100644
index 000000000..629d9b6e5
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js
@@ -0,0 +1,33 @@
+import ArticleSearchArticleView from '../ArticleSearch/ArticleView';
+
+export default {
+  title: 'Components/Help Center/ArticleSearch/ArticleView',
+  component: ArticleSearchArticleView,
+  argTypes: {
+    title: {
+      defaultValue: 'Insert article',
+      control: {
+        type: 'text',
+      },
+    },
+    selectedValue: {
+      defaultValue: 'Status',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleSearchArticleView },
+  template:
+    '<article-search-article-view v-bind="$props"></article-search-article-view>',
+});
+
+export const ArticleHeaderView = Template.bind({});
+ArticleHeaderView.args = {
+  title: 'Insert article',
+  url: 'https://staging.chatwoot.com/hc/home-rental-app/articles/filter-your-housing-search-results-0',
+};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js
new file mode 100644
index 000000000..7199f1ffa
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js
@@ -0,0 +1,31 @@
+import ArticleSearchHeader from '../ArticleSearch/Header';
+
+export default {
+  title: 'Components/Help Center/ArticleSearch/Header',
+  component: ArticleSearchHeader,
+  argTypes: {
+    title: {
+      defaultValue: 'Insert article',
+      control: {
+        type: 'text',
+      },
+    },
+    selectedValue: {
+      defaultValue: 'Status',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ArticleSearchHeader },
+  template: '<article-search-header v-bind="$props"></article-search-header>',
+});
+
+export const ArticleHeaderView = Template.bind({});
+ArticleHeaderView.args = {
+  title: 'Insert article',
+};
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js
index c0010c06a..5b6904c2f 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js
@@ -1,4 +1,4 @@
-import ArticleSearchResultItem from '../ArticleSearchResultItem.vue';
+import ArticleSearchResultItem from '../ArticleSearch/ArticleSearchResultItem.vue';
 
 export default {
   title: 'Components/Help Center/ArticleSearchResultItem',
diff --git a/app/javascript/shared/components/ArticleSkeletonLoader.vue b/app/javascript/shared/components/ArticleSkeletonLoader.vue
index 6fa3978f9..d65813b54 100644
--- a/app/javascript/shared/components/ArticleSkeletonLoader.vue
+++ b/app/javascript/shared/components/ArticleSkeletonLoader.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="p-4 space-y-6 bg-white">
-    <div class="space-y-2 animate-pulse">
-      <div class="h-6 bg-slate-100 rounded w-1/5" />
-      <div class="h-10 bg-slate-100 rounded w-3/5" />
+  <div class="p-4 space-y-6 bg-white dark:bg-slate-900">
+    <div class="space-y-2 animate-loader-pulse">
+      <div class="h-6 bg-slate-100 dark:bg-slate-700 rounded w-1/5" />
+      <div class="h-10 bg-slate-100 dark:bg-slate-700 rounded w-3/5" />
     </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded w-4/5" />
+    <div class="space-y-2 animate-loader-pulse">
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded w-4/5" />
     </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded w-3/5" />
-      <div class="h-5 bg-slate-100 rounded" />
+    <div class="space-y-2 animate-loader-pulse">
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded w-3/5" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
     </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded" />
-      <div class="h-5 bg-slate-100 rounded w-3/5" />
+    <div class="space-y-2 animate-loader-pulse">
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded" />
+      <div class="h-5 bg-slate-100 dark:bg-slate-700 rounded w-3/5" />
     </div>
   </div>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index 89546bc30..764f2ae3a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -138,10 +138,16 @@ module.exports = {
         '90%': { transform: 'translateX(-0.375rem)' },
         '100%': { transform: 'translateX(0)' },
       },
+      'loader-pulse': {
+        '0%': { opacity: 0.4 },
+        '50%': { opacity: 1 },
+        '100%': { opacity: 0.4 },
+      },
     },
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
+      'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
     },
   },
   plugins: [