feat(chat): replace "show more" by "show previous" for stages and sho…

…w last 3 stages by default (Issue 1820)
epam · Jul 24, 2024 · 7c102af · 7c102af
1 parent 5cf5fd5
commit 7c102af
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 23 deletions.
diff --git a/apps/chat-e2e/src/assertions/chatMessagesAssertion.ts b/apps/chat-e2e/src/assertions/chatMessagesAssertion.ts
@@ -27,8 +27,8 @@ export class ChatMessagesAssertion {
   ) {
     const button =
       label === 'more'
-        ? this.chatMessages.showMoreButton.getElementLocator()
-        : this.chatMessages.showLessButton.getElementLocator();
+        ? this.chatMessages.showPreviousButton.getElementLocator()
+        : this.chatMessages.hidePreviousButton.getElementLocator();
     expectedState === 'visible'
       ? await expect
           .soft(button, ExpectedMessages.buttonIsVisible)
@@ -44,8 +44,8 @@ export class ChatMessagesAssertion {
   ) {
     const button =
       label === 'more'
-        ? this.chatMessages.showMoreButton
-        : this.chatMessages.showLessButton;
+        ? this.chatMessages.showPreviousButton
+        : this.chatMessages.hidePreviousButton;
     const color = await button.getComputedStyleProperty(Styles.color);
     expect
       .soft(color[0], ExpectedMessages.elementColorIsValid)

diff --git a/apps/chat-e2e/src/tests/conversationWithStage.test.ts b/apps/chat-e2e/src/tests/conversationWithStage.test.ts
@@ -54,7 +54,7 @@ dialTest(
     await dialTest.step(
       'Click on "Show more" and verify all stages and "Show less" button are displayed',
       async () => {
-        await chatMessages.showMoreButton.click();
+        await chatMessages.showPreviousButton.click();
         await chatMessagesAssertion.assertMessageStagesCount(2, stagesCount);
         await chatMessagesAssertion.assertShowMoreLessButtonState(
           'less',
@@ -70,7 +70,7 @@ dialTest(
     await dialTest.step(
       'Click on "Show less" and verify 3 stages and "Show more" button are displayed',
       async () => {
-        await chatMessages.showLessButton.click();
+        await chatMessages.hidePreviousButton.click();
         await chatMessagesAssertion.assertMessageStagesCount(
           2,
           maxDisplayedStagesCount,

diff --git a/apps/chat-e2e/src/ui/selectors/chatSelectors.ts b/apps/chat-e2e/src/ui/selectors/chatSelectors.ts
@@ -143,8 +143,8 @@ export const ChatSelectors = {
   messageSpinner: '[data-qa="message-input-spinner"]',
   plotlyContainer: '.plot-container',
   maxWidth: '.max-w-none',
-  showMore: '[data-qa="show-more"]',
-  showLess: '[data-qa="show-less"]',
+  showPrevious: '[data-qa="show-previous"]',
+  hidePrevious: '[data-qa="hide-previous"]',
 };
 
 export const TableSelectors = {

diff --git a/apps/chat-e2e/src/ui/webElements/chatMessages.ts b/apps/chat-e2e/src/ui/webElements/chatMessages.ts
@@ -62,12 +62,12 @@ export class ChatMessages extends BaseElement {
       ChatSelectors.stageLoader,
     );
 
-  public showMoreButton = this.getChildElementBySelector(
-    ChatSelectors.showMore,
+  public showPreviousButton = this.getChildElementBySelector(
+    ChatSelectors.showPrevious,
   );
 
-  public showLessButton = this.getChildElementBySelector(
-    ChatSelectors.showLess,
+  public hidePreviousButton = this.getChildElementBySelector(
+    ChatSelectors.hidePrevious,
   );
 
   public async waitForResponseReceived() {

diff --git a/apps/chat/src/components/Chat/MessageStages.tsx b/apps/chat/src/components/Chat/MessageStages.tsx
@@ -15,35 +15,34 @@ export interface Props {
 const NUMBER_OF_VISIBLE_STAGES = 3;
 
 export const MessageStages = ({ stages }: Props) => {
-  const [showMore, setShowMore] = useState(false);
+  const [showPrevious, setShowPrevious] = useState(false);
 
   const displayedStages = stages.slice(
-    0,
-    showMore ? stages.length : NUMBER_OF_VISIBLE_STAGES,
+    showPrevious ? -stages.length : -NUMBER_OF_VISIBLE_STAGES,
   );
 
   return (
     <div data-no-context-menu className="flex flex-col gap-1">
-      {displayedStages.map((stage) => (
-        <MessageStage key={stage.index} stage={stage} />
-      ))}
       {stages.length > NUMBER_OF_VISIBLE_STAGES && (
         <button
-          onClick={() => setShowMore(!showMore)}
-          className="mt-2 flex leading-[18px] text-accent-primary"
-          data-qa={showMore ? 'show-less' : 'show-more'}
+          onClick={() => setShowPrevious(!showPrevious)}
+          className="mb-2 flex leading-[18px] text-accent-primary"
+          data-qa={showPrevious ? 'hide-previous' : 'show-previous'}
         >
-          {showMore ? 'Show less' : 'Show more'}
+          {showPrevious ? 'Hide previous' : 'Show previous'}
           <ChevronDown
             height={18}
             width={18}
             className={classNames(
               'ml-2 shrink-0 transition',
-              showMore && 'rotate-180',
+              !showPrevious && 'rotate-180',
             )}
           />
         </button>
       )}
+      {displayedStages.map((stage) => (
+        <MessageStage key={stage.index} stage={stage} />
+      ))}
     </div>
   );
 };