Fix #3046 UI Add support for request description

openmetadata-ui/src/main/resources/ui/src/axiosAPIs/feedsAPI.ts

@@ -12,11 +12,11 @@
  */
 
 import { AxiosResponse } from 'axios';
+import { isUndefined } from 'lodash';
 import { Post } from 'Models';
+import { FeedFilter } from '../enums/mydata.enum';
 import { CreateThread } from '../generated/api/feed/createThread';
 import APIClient from './index';
-import { FeedFilter } from '../enums/mydata.enum';
-import { isUndefined } from 'lodash';
 
 export const getAllFeeds: Function = (
   entityLink?: string

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedEditor/ActivityFeedEditor.tsx

@@ -14,7 +14,7 @@
 import classNames from 'classnames';
 import React, { FC, HTMLAttributes, useRef, useState } from 'react';
 import { getBackendFormat, HTMLToMarkdown } from '../../../utils/FeedUtils';
-import SVGIcons from '../../../utils/SvgUtils';
+import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { Button } from '../../buttons/Button/Button';
 import PopOver from '../../common/popover/PopOver';
 import FeedEditor from '../../FeedEditor/FeedEditor';
@@ -23,6 +23,7 @@ interface ActivityFeedEditorProp extends HTMLAttributes<HTMLDivElement> {
   onSave?: (value: string) => void;
   buttonClass?: string;
   placeHolder?: string;
+  defaultValue?: string;
 }
 type EditorContentRef = {
   getEditorValue: () => string;
@@ -34,6 +35,7 @@ const ActivityFeedEditor: FC<ActivityFeedEditorProp> = ({
   buttonClass = '',
   onSave,
   placeHolder,
+  defaultValue,
 }) => {
   const editorRef = useRef<EditorContentRef>();
   const [editorValue, setEditorValue] = useState<string>('');
@@ -54,6 +56,7 @@ const ActivityFeedEditor: FC<ActivityFeedEditorProp> = ({
   return (
     <div className={classNames('tw-relative', className)}>
       <FeedEditor
+        defaultValue={defaultValue}
         placeHolder={placeHolder}
         ref={editorRef}
         onChangeHandler={onChangeHandler}
@@ -71,15 +74,22 @@ const ActivityFeedEditor: FC<ActivityFeedEditorProp> = ({
           trigger="mouseenter">
           <Button
             className={classNames(
-              'tw-bg-gray-400 tw-py-0.5 tw-px-1 tw-rounded',
+              'tw-py-0.5 tw-px-1 tw-rounded tw-bg-none',
               buttonClass
             )}
             disabled={editorValue.length === 0}
             size="custom"
-            theme={editorValue.length > 0 ? 'primary' : 'default'}
-            variant="contained"
+            variant="text"
             onClick={onSaveHandler}>
-            <SVGIcons alt="paper-plane" icon="icon-paper-plane" width="18px" />
+            <SVGIcons
+              alt="paper-plane"
+              icon={
+                editorValue.length > 0
+                  ? Icons.PAPER_PLANE_PRIMARY
+                  : Icons.PAPER_PLANE
+              }
+              width="18px"
+            />
           </Button>
         </PopOver>
       </div>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx

@@ -28,11 +28,13 @@ import ActivityFeedCard, {
 } from '../ActivityFeedCard/ActivityFeedCard';
 import ActivityFeedEditor from '../ActivityFeedEditor/ActivityFeedEditor';
 import ActivityFeedPanel from '../ActivityFeedPanel/ActivityFeedPanel';
+import NoFeedPlaceholder from '../NoFeedPlaceholder/NoFeedPlaceholder';
 
 interface ActivityFeedListProp extends HTMLAttributes<HTMLDivElement> {
   feedList: EntityThread[];
   withSidePanel?: boolean;
   isEntityFeed?: boolean;
+  entityName?: string;
   postFeedHandler?: (value: string, id: string) => void;
 }
 interface FeedListSeparatorProp extends HTMLAttributes<HTMLDivElement> {
@@ -61,7 +63,7 @@ export const FeedListSeparator: FC<FeedListSeparatorProp> = ({
       <div className="tw-flex tw-justify-center">
         <hr className="tw-absolute tw-top-3 tw-border-b tw-border-main tw-w-full tw-z-0" />
         {relativeDay ? (
-          <span className="tw-bg-white tw-px-4 tw-py-px tw-border tw-border-primary tw-rounded tw-z-10 tw-text-primary tw-font-medium">
+          <span className="tw-bg-white tw-px-4 tw-py-px tw-border tw-border-grey-muted tw-rounded tw-z-10 tw-text-grey-muted tw-font-medium">
             {relativeDay}
           </span>
         ) : null}
@@ -91,8 +93,8 @@ const FeedListBody: FC<FeedListBodyProp> = ({
             from: feed.createdBy,
           };
           const postLength = feed.posts.length;
-          const replies = feed.postsCount;
-          const repliedUsers = feed.posts.map((f) => f.from);
+          const replies = feed.postsCount - 1;
+          const repliedUsers = feed.posts.map((f) => f.from).slice(1, 3);
           const lastPost = feed.posts[postLength - 1];
 
           return (
@@ -105,15 +107,11 @@ const FeedListBody: FC<FeedListBodyProp> = ({
               />
               {postLength > 0 ? (
                 <Fragment>
-                  <ActivityFeedCard
-                    className="tw-mb-6 tw-ml-9"
-                    feed={lastPost}
-                    isEntityFeed={isEntityFeed}
-                  />
                   <div className="tw-mb-6">
                     <div className="tw-ml-9 tw-flex tw-mb-6">
                       <FeedFooter
                         isFooterVisible
+                        className="tw--mt-4"
                         lastReplyTimeStamp={lastPost?.postTs}
                         repliedUsers={repliedUsers}
                         replies={replies}
@@ -124,23 +122,27 @@ const FeedListBody: FC<FeedListBodyProp> = ({
                           onViewMore();
                         }}
                       />
-                      <span className="tw-mx-1.5 tw-mt-1 tw-inline-block tw-text-gray-400">
-                        |
-                      </span>
-                      <p
-                        className="link-text tw-text-xs tw-mt-1.5 tw-underline"
-                        onClick={() => onThreadIdSelect(feed.id)}>
-                        Reply
-                      </p>
                     </div>
-                    {selctedThreadId === feed.id ? (
-                      <ActivityFeedEditor
-                        buttonClass="tw-mr-4"
-                        className="tw-ml-5 tw-mr-2"
-                        onSave={postFeed}
-                      />
-                    ) : null}
                   </div>
+                  <ActivityFeedCard
+                    className="tw-mb-6 tw-ml-9"
+                    feed={lastPost}
+                    isEntityFeed={isEntityFeed}
+                  />
+                  <p
+                    className="link-text tw-text-xs tw-underline tw-ml-9 tw-pl-9 tw--mt-4 tw-mb-6"
+                    onClick={() => {
+                      onThreadIdSelect(feed.id);
+                    }}>
+                    Reply
+                  </p>
+                  {selctedThreadId === feed.id ? (
+                    <ActivityFeedEditor
+                      buttonClass="tw-mr-4"
+                      className="tw-ml-5 tw-mr-2"
+                      onSave={postFeed}
+                    />
+                  ) : null}
                 </Fragment>
               ) : (
                 <p
@@ -165,6 +167,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
   withSidePanel = false,
   isEntityFeed = false,
   postFeedHandler,
+  entityName,
 }) => {
   const { updatedFeedList, relativeDays } =
     getFeedListWithRelativeDays(feedList);
@@ -256,11 +259,17 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
         </Fragment>
       ) : (
         <Fragment>
-          <FeedListSeparator
-            className="tw-relative tw-mt-1 tw-mb-3.5 tw-pb-5"
-            relativeDay=""
-          />
-          <>No conversations found. Try changing the filter.</>
+          {entityName ? (
+            <NoFeedPlaceholder entityName={entityName} />
+          ) : (
+            <Fragment>
+              <FeedListSeparator
+                className="tw-relative tw-mt-1 tw-mb-3.5 tw-pb-5"
+                relativeDay=""
+              />
+              <>No conversations found. Try changing the filter.</>
+            </Fragment>
+          )}
         </Fragment>
       )}
     </div>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedPanel/ActivityFeedPanel.tsx

@@ -38,6 +38,7 @@ interface FeedPanelHeaderProp
   extends HTMLAttributes<HTMLHeadingElement>,
     Pick<ActivityFeedPanelProp, 'onCancel'> {
   entityField: string;
+  noun?: string;
 }
 interface FeedPanelOverlayProp
   extends HTMLAttributes<HTMLButtonElement>,
@@ -51,12 +52,14 @@ export const FeedPanelHeader: FC<FeedPanelHeaderProp> = ({
   onCancel,
   entityField,
   className,
+  noun,
 }) => {
   return (
     <header className={className}>
       <div className="tw-flex tw-justify-between tw-py-3">
         <p>
-          Thread on <span className="tw-heading">{entityField}</span>
+          {noun ? noun : 'Conversation'} on{' '}
+          <span className="tw-heading">{entityField}</span>
         </p>
         <svg
           className="tw-w-5 tw-h-5 tw-ml-1 tw-cursor-pointer"
@@ -114,7 +117,7 @@ const FeedPanelBody: FC<FeedPanelBodyProp> = ({
           {repliesLength > 0 ? (
             <Fragment>
               <div className="tw-mb-3 tw-flex">
-                <span>{getReplyText(repliesLength)}</span>
+                <span>{getReplyText(repliesLength, 'reply', 'replies')}</span>
                 <span className="tw-flex-auto tw-self-center tw-ml-1.5">
                   <hr />
                 </span>

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityThreadPanel/ActivityThreadPanel.tsx

@@ -89,8 +89,10 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
                   from: thread.createdBy,
                 };
                 const postLength = thread.posts.length;
-                const replies = thread.postsCount;
-                const repliedUsers = thread.posts.map((f) => f.from);
+                const replies = thread.postsCount - 1;
+                const repliedUsers = thread.posts
+                  .map((f) => f.from)
+                  .slice(1, 3);
                 const lastPost = thread.posts[postLength - 1];
 
                 return (
@@ -103,31 +105,31 @@ const ActivityThreadList: FC<ActivityThreadListProp> = ({
                     />
                     {postLength > 0 ? (
                       <Fragment>
-                        <ActivityFeedCard
-                          isEntityFeed
-                          className="tw-mb-6 tw-ml-9"
-                          feed={lastPost}
-                        />
                         <div className="tw-mb-6">
                           <div className="tw-ml-9 tw-flex tw-mb-6">
                             <FeedFooter
                               isFooterVisible
+                              className="tw--mt-4"
                               lastReplyTimeStamp={lastPost?.postTs}
                               repliedUsers={repliedUsers}
                               replies={replies}
                               threadId={thread.id}
                               onThreadSelect={() => onThreadSelect(thread.id)}
                             />
-                            <span className="tw-mx-1.5 tw-mt-1 tw-inline-block tw-text-gray-400">
-                              |
-                            </span>
-                            <p
-                              className="link-text tw-text-xs tw-mt-1.5 tw-underline"
-                              onClick={() => onThreadIdSelect(thread.id)}>
-                              Reply
-                            </p>
                           </div>
                         </div>
+                        <ActivityFeedCard
+                          isEntityFeed
+                          className="tw-mb-6 tw-ml-9"
+                          feed={lastPost}
+                        />
+                        <p
+                          className="link-text tw-text-xs tw-underline tw-ml-9 tw-pl-9 tw--mt-4 tw-mb-6"
+                          onClick={() => {
+                            onThreadIdSelect(thread.id);
+                          }}>
+                          Reply
+                        </p>
                       </Fragment>
                     ) : (
                       <p
@@ -185,7 +187,7 @@ const ActivityThread: FC<ActivityThreadProp> = ({
         {repliesLength > 0 ? (
           <Fragment>
             <div className="tw-mb-3 tw-flex">
-              <span>{getReplyText(repliesLength)}</span>
+              <span>{getReplyText(repliesLength, 'reply', 'replies')}</span>
               <span className="tw-flex-auto tw-self-center tw-ml-1.5">
                 <hr />
               </span>
@@ -304,6 +306,7 @@ const ActivityThreadPanel: FC<ActivityThreadPanelProp> = ({
         <FeedPanelHeader
           className="tw-px-4 tw-shadow-sm"
           entityField={entityField as string}
+          noun="Conversations"
           onCancel={onCancel}
         />
         {!isUndefined(selectedThread) ? (