Show more matches

package.json

@@ -66,7 +66,7 @@
     "eslint-plugin-jest-dom": "^5.0.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-testing-library": "^6.0.0",
+    "eslint-plugin-testing-library": "^7.0.0",
     "fs-extra": "^11.1.1",
     "glob": "^11.0.0",
     "html-webpack-plugin": "5.6.3",
@@ -83,7 +83,7 @@
     "sass-loader": "16.0.3",
     "style-loader": "4.0.0",
     "undici": "^5.28.2",
-    "webpack": "5.95.0",
+    "webpack": "5.96.1",
     "webpack-cli": "5.1.4",
     "webpack-concat-files-plugin": "^0.5.2",
     "whatwg-fetch": "^3.6.20"

public/css/sass/style.scss

@@ -1326,6 +1326,33 @@ ul.suggestion-item.graysmall:last-child {
   overflow: auto;
 }
 
+.tab {
+  .segment-footer-tab-more-button {
+    margin-left: auto;
+    margin-right: auto;
+    background-color: $grey4 !important;
+    color: $grey6 !important;
+    gap: 0;
+    padding-right: 16px !important;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &:hover {
+      background-color: $grey9 !important;
+    }
+
+    &.segment-footer-tab-more-button-extended-mode {
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .segment-footer-tab-concordance-results {
+    overflow: hidden;
+  }
+}
+
 .graygreen {
   color: #fff !important;
   border-top: 1px solid #ccc;
@@ -1472,6 +1499,8 @@ body .footer.showMatches .sub-editor.open {
 
 .sub-editor.matches .overflow {
   min-height: 50px;
+  max-height: 424px;
+  overflow-y: auto;
 }
 .sub-editor.matches .overflow span.loader {
   bottom: 20px;

public/js/cat_source/es6/components/segments/SegmentFooterTabMatches.js

@@ -13,6 +13,11 @@ import {SegmentContext} from './SegmentContext'
 import {SegmentFooterTabError} from './SegmentFooterTabError'
 import ApplicationStore from '../../stores/ApplicationStore'
 import DraftMatecatUtils from './utils/DraftMatecatUtils'
+import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button'
+import {NUM_CONTRIBUTION_RESULTS} from '../../constants/Constants'
+import ArrowDown from '../../../../../img/icons/ArrowDown'
+
+const MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED = 3
 
 class SegmentFooterTabMatches extends React.Component {
   static contextType = SegmentContext
@@ -26,6 +31,7 @@ class SegmentFooterTabMatches extends React.Component {
 
     this.state = {
       tmKeys: CatToolStore.getJobTmKeys(),
+      numContributionsToShow: MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED,
     }
   }
 
@@ -235,14 +241,24 @@ class SegmentFooterTabMatches extends React.Component {
       this.props.active_class !== nextProps.active_class ||
       this.props.tab_class !== nextProps.tab_class ||
       this.props.segment.unlocked !== nextProps.segment.unlocked ||
-      this.state.tmKeys !== nextState.tmKeys
+      this.state.tmKeys !== nextState.tmKeys ||
+      this.state.numContributionsToShow !== nextState.numContributionsToShow
     )
   }
 
   allowHTML(string) {
     return {__html: string}
   }
 
+  toggleExtendend = () => {
+    this.setState({
+      numContributionsToShow:
+        this.state.numContributionsToShow < NUM_CONTRIBUTION_RESULTS
+          ? NUM_CONTRIBUTION_RESULTS
+          : MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED,
+    })
+  }
+
   render() {
     const {clientConnected} = this.context
 
@@ -254,8 +270,11 @@ class SegmentFooterTabMatches extends React.Component {
       this.props.segment.contributions.matches.length > 0
     ) {
       let tpmMatches = this.processContributions(
-        this.props.segment.contributions.matches,
+        this.props.segment.contributions.matches.filter(
+          (contribution, index) => index < this.state.numContributionsToShow,
+        ),
       )
+
       tpmMatches.forEach((match, index) => {
         const {memoryKey} = match
         const isOwnedKey = memoryKey ? this.isOwnerKey(memoryKey) : false
@@ -373,6 +392,21 @@ class SegmentFooterTabMatches extends React.Component {
       })
     }
 
+    const isExtended =
+      this.state.numContributionsToShow === NUM_CONTRIBUTION_RESULTS
+
+    const moreButton = (
+      <Button
+        className={`segment-footer-tab-more-button ${isExtended ? 'segment-footer-tab-more-button-extended-mode' : ''}`}
+        type={BUTTON_TYPE.DEFAULT}
+        size={BUTTON_SIZE.SMALL}
+        onClick={this.toggleExtendend}
+      >
+        <ArrowDown />
+        {isExtended ? 'Fewer' : 'More'}
+      </Button>
+    )
+
     return (
       <div
         key={'container_' + this.props.code}
@@ -393,6 +427,8 @@ class SegmentFooterTabMatches extends React.Component {
                 <span className="loader loader_on" />
               )}
             </div>
+            {this.props.segment.contributions?.matches.length >
+              MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED && moreButton}
             {errors.length > 0 && <div className="engine-errors">{errors}</div>}
           </>
         ) : (

public/js/cat_source/es6/components/segments/TabConcordanceResults.js

@@ -11,6 +11,8 @@ import SegmentConstants from '../../constants/SegmentConstants'
 import Cookies from 'js-cookie'
 import DraftMatecatUtils from './utils/DraftMatecatUtils'
 import ApplicationStore from '../../stores/ApplicationStore'
+import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button'
+import ArrowDown from '../../../../../img/icons/ArrowDown'
 export const TabConcordanceResults = forwardRef(({segment, isActive}, ref) => {
   const [results, setResults] = useState(undefined)
   const [isExtended, setIsExtended] = useState(
@@ -157,14 +159,20 @@ export const TabConcordanceResults = forwardRef(({segment, isActive}, ref) => {
   const resultsDisplaying =
     results && (isExtended ? results : [...results].splice(0, 3))
 
-  const moreButton = results?.length > MAX_ITEMS_TO_DISPLAY && (
-    <a className="more" onClick={toggleExtendend}>
+  const moreButton = (
+    <Button
+      className={`segment-footer-tab-more-button ${isExtended ? 'segment-footer-tab-more-button-extended-mode' : ''}`}
+      type={BUTTON_TYPE.DEFAULT}
+      size={BUTTON_SIZE.SMALL}
+      onClick={toggleExtendend}
+    >
+      <ArrowDown />
       {isExtended ? 'Fewer' : 'More'}
-    </a>
+    </Button>
   )
 
   return (
-    <div>
+    <div className="segment-footer-tab-concordance-results">
       {Array.isArray(resultsDisplaying) &&
         (resultsDisplaying.length > 0 ? (
           <div>

public/js/cat_source/es6/constants/Constants.js

@@ -31,7 +31,7 @@ export const UNIT_COUNT = {
   CHARACTERS: 'characters',
 }
 
-export const NUM_CONTRIBUTION_RESULTS = 3
+export const NUM_CONTRIBUTION_RESULTS = 10
 export const NUM_CONCORDANCE_RESULTS = 10
 
 export const EMAIL_PATTERN =