Merge remote-tracking branch 'origin/master' into fb-leap-240/fix-cli…

…ck-outside

.github/pull_request_template.md

@@ -1,80 +1,37 @@
+1.) First replace this text with a brief description of what this pull request does. Include reasoning, references, and other thoughts for better understanding.
+2.) Then fill in the items below (adding more description if necessary) or remove them if they aren't relevant. 
+Please read all items and ensure that each section has been **filled in OR removed** to create more consistent PRs! Thank you!
+
 ### PR fulfills these requirements
-- [ ] Commit message(s) and PR title follows the format `[fix|feat|ci|chore|doc]: TICKET-ID: Short description of change made` ex. `fix: DEV-XXXX: Removed inconsistent code usage causing intermittent errors`
-- [ ] Tests for the changes have been added/updated (for bug fixes/features)
-- [ ] Docs have been added/updated (for bug fixes/features)
+- [ ] Tests for the changes have been added/updated
+- [ ] Docs have been added/updated
 - [ ] Best efforts were made to ensure docs/code are concise and coherent (checked for spelling/grammatical errors, commented out code, debug logs etc.)
-- [ ] Self-reviewed and ran all changes on a local instance (for bug fixes/features)
-
-
-
-#### Change has impacts in these area(s)
-_(check all that apply)_
-- [ ] Product design
-- [ ] Frontend
-
-
+- [ ] Self-reviewed and ran all changes on a local instance
 
 ### Describe the reason for change
-_(link to issue, supportive screenshots etc.)_
-
-
-
-#### What does this fix?
-_(if this is a bug fix)_
-
-
-
-#### What is the new behavior?
-_(if this is a breaking or feature change)_
-
-
-
-#### What is the current behavior?
-_(if this is a breaking or feature change)_
-
-
+_(if it's not clear from main description — otherwise remove this section)_
 
-#### What libraries were added/updated?
-_(list all with version changes)_
-
-
-
-#### Does this change affect performance?
-_(if so describe the impacts positive or negative)_
-
-
-
-#### Does this change affect security?
-_(if so describe the impacts positive or negative)_
-
-
-
-#### What alternative approaches were there?
-_(briefly list any if applicable)_
-
-
-
-#### What feature flags were used to cover this change?
-_(briefly list any if applicable)_
+### What feature flags were used to cover this change?
+_(list any feature flags created for this PR or used to cover changes in this PR)_
 
+### What alternative approaches were there?
+_(if there are multiple ways to go, describe them and the reasoning for chosing the current way)_
 
+### This change affects (describe how if yes)
+- [ ] Performance
+- [ ] Security
+- [ ] UX
 
 ### Does this PR introduce a breaking change?
-_(check only one)_
 - [ ] Yes, and covered entirely by feature flag(s)
 - [ ] Yes, and covered partially by feature flag(s)
 - [ ] No
 - [ ] Not sure (briefly explain the situation below)
 
-
-
 ### What level of testing was included in the change?
-_(check all that apply)_
-- [ ] e2e
-- [ ] integration
-- [ ] unit
-
-
+- [ ] e2e (codecept)
+- [ ] integration (cypress)
+- [ ] unit (jest)
 
 ### Which logical domain(s) does this change affect?
-_(for bug fixes/features, be as precise as possible. ex. Authentication, Annotation History, Review Stream etc.)_
+_(if not already included in the description, add a comma-separated list like "Taxonomy, Dynamic Children")_

.github/workflows/build_bundle.yml

@@ -46,7 +46,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Configure yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('**/yarn.lock') }}

.github/workflows/e2e_tests.yml

@@ -43,7 +43,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Configure yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('**/yarn.lock') }}

.github/workflows/eslint.yml

@@ -45,7 +45,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Configure yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('**/yarn.lock') }}
@@ -62,7 +62,7 @@ jobs:
           npm list --depth=1 || true
 
       - name: Run ESLint
-        uses: tj-actions/eslint-changed-files@v21
+        uses: tj-actions/eslint-changed-files@v23
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/fun_tests.yml

@@ -44,7 +44,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Configure yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('**/yarn.lock') }}

.github/workflows/release-set-version.yml

@@ -31,7 +31,7 @@ jobs:
           node-version: "${{ env.NODE }}"
 
       - name: Cache node modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: npm-${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-jsdoc-to-markdown

.github/workflows/unit_tests.yml

@@ -40,7 +40,7 @@ jobs:
         run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Configure yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
           key: ${{ env.CACHE_NAME_PREFIX }}-${{ runner.os }}-node-${{ env.NODE }}-${{ hashFiles('**/yarn.lock') }}

e2e/tests/ner-text.test.js

@@ -259,3 +259,26 @@ Scenario('NER Text with SECURE MODE', async function({ I, LabelStudio }) {
     window.LS_SECURE_MODE = window.OLD_LS_SECURE_MODE;
   });
 });
+
+Scenario('NER Text regions in Outliner', async function({ I, LabelStudio }) {
+  const params = {
+    annotations: [{ id: 'TestCmpl', result: resultsFromUrl }],
+    config: configUrl,
+    data: { url },
+  };
+
+  I.amOnPage('/');
+  // enabling both flags for New UI, but will work with Otliner one only as well
+  LabelStudio.setFeatureFlags({
+    ff_front_1170_outliner_030222_short: true,
+    fflag_feat_front_dev_3873_labeling_ui_improvements_short: true,
+  });
+  LabelStudio.init(params);
+
+  I.waitForElement('.lsf-richtext__line', 60);
+
+  I.see('American political leader');
+
+  I.seeElement(locate('.lsf-outliner-item').withText(resultsFromUrl[0].value.text));
+  I.seeElement(locate('.lsf-outliner-item').withText(resultsFromUrl[1].value.text));
+});

src/components/Node/Node.tsx

@@ -127,7 +127,7 @@ const NodeDebug: FC<any> = observer(({ className, node }) => {
 const Node: FC<any> = observer(({ className, node }) => {
   const name = useNodeName(node);
 
-  if (!(name in NodeViews)) {
+  if (!name || !(name in NodeViews)) {
     console.error(`No ${name} in NodeView`);
     return null;
   }
@@ -138,9 +138,9 @@ const Node: FC<any> = observer(({ className, node }) => {
   return (
     <Block name="node" tag="span" className={className}>
       {labelName}
-      {node?.isDrawing && (
+      {node.isDrawing && (
         <Elem tag="span" name="incomplete">
-          <Tooltip title="Incomplete polygon">
+          <Tooltip title={`Incomplete ${node.type?.replace('region', '') ?? 'region'}`}>
             <IconWarning />
           </Tooltip>
         </Elem>

src/components/SidePanels/DetailsPanel/RegionDetails.tsx

@@ -91,13 +91,9 @@ export const RegionDetailsMain: FC<{region: any}> = observer(({
         {region?.text ? (
           <Block name="region-meta">
             <Elem name="item">
-              <Elem
-                name="content"
-                mod={{ type: 'text' }}
-                dangerouslySetInnerHTML={{
-                  __html: region.text.replace(/\\n/g, '\n'),
-                }}
-              />
+              <Elem name="content" mod={{ type: 'text' }}>
+                {region.text.replace(/\\n/g, '\n')}
+              </Elem>
             </Elem>
           </Block>
         ) : null}

src/components/SidePanels/DetailsPanel/RegionItem.tsx

@@ -50,10 +50,10 @@ export const RegionItem: FC<RegionItemProps> = observer(({
         {withIds && <span>{region.cleanId}</span>}
       </Elem>
       {MainDetails && <Elem name="content"><MainDetails region={region}/></Elem>}
-      {region?.isDrawing && (
+      {region.isDrawing && (
         <Elem name="warning">
           <IconWarning />
-          <Elem name="warning-text">Incomplete {region.type.replace('region', '')}</Elem>
+          <Elem name="warning-text">Incomplete {region.type?.replace('region', '') ?? 'region'}</Elem>
         </Elem>
       )}
       {withActions && (

src/components/SidePanels/OutlinerPanel/OutlinerTree.tsx

@@ -408,7 +408,7 @@ const NodeIconComponent: FC<any> = observer(({ node }) => {
 });
 
 const RootTitle: FC<any> = observer(({
-  item,
+  item, // can be undefined for group titles in Labels or Tools mode
   label,
   isArea,
   ...props
@@ -437,9 +437,10 @@ const RootTitle: FC<any> = observer(({
         {!props.isGroup && <Elem name="index">{props.idx + 1}</Elem>}
         <Elem name="title">
           {label}
+          {item?.text && <Elem name="text">{item.text.replace(/\\n/g, '\n')}</Elem>}
           {item?.isDrawing && (
             <Elem tag="span" name="incomplete">
-              <Tooltip title="Incomplete polygon">
+              <Tooltip title={`Incomplete ${item.type?.replace('region', '') ?? 'region'}`}>
                 <IconWarning />
               </Tooltip>
             </Elem>

src/components/SidePanels/OutlinerPanel/TreeView.styl

@@ -75,6 +75,7 @@
   &-title
     flex 1
     padding-left 5px
+    min-width 0
 
     .labels-list
       display inline-block
@@ -117,6 +118,14 @@
     display inline-flex
     flex 1
     color var(--text-color, #000)
+    min-width 0
+
+  &__text
+    margin-left 5px
+    color #000
+    overflow hidden
+    white-space nowrap
+    text-overflow ellipsis
 
   &__incomplete
     display inline-flex

src/tags/object/RichText/model.js

@@ -222,7 +222,7 @@ const Model = types
         // nodes count better be the same, so replace them with stubs
         // we should not sanitize text tasks because we already have htmlEscape in view.js
         if (isFF(FF_SAFE_TEXT) && self.type === 'text') {
-          self._value = val;
+          self._value = String(val);
         } else {
           self._value = sanitizeHtml(String(val));
         }

src/utils/data.js

@@ -16,10 +16,10 @@ export const parseValue = (value, task) => {
 
   // value can refer to structures, not only texts, so just replace wouldn't be enough
   if (value.match(reVar)?.[0] === value) {
-    return get(task, value.substr(1)) ?? '';
+    return get(task, value.slice(1)) ?? '';
   }
 
-  return value.replace(reVar, (v) => get(task, v.substr(1) ?? ''));
+  return value.replace(reVar, (v) => get(task, v.slice(1) ?? ''));
 };
 
 /**
@@ -72,9 +72,9 @@ export const parseCSV = (text, separator = 'auto') => {
 
   const re = new RegExp(
     [
-      '"(""|[^"]+)*"', // quoted text with possible quoted quotes inside it ("not a ""value""")
+      '"(?:""|[^"])*"', // quoted text with possible quoted quotes inside it ("not a ""value""")
       `[^"${separator}]+`, // usual value, no quotes, between separators
-      `(?=${separator}(${separator}|$))`, // empty value in the middle or at the end of string
+      `(?=${separator}(?:${separator}|$))`, // empty value in the middle or at the end of string
       `^(?=${separator})`, // empty value at the start of the string
     ].join('|'),
     'g',

tests/functional/specs/object_tags/text.cy.ts

@@ -0,0 +1,37 @@
+import { LabelStudio } from '@heartexlabs/ls-test/helpers/LSF';
+
+describe('<Text> tag', () => {
+  it('Display non-string values', () => {
+    const config = `
+      <View>
+        <Header>String — usual case</Header>
+        <Text name="string" value="$string"></Text>
+        <Header>Float number</Header>
+        <Text name="number" value="$number"></Text>
+        <Header>Boolean</Header>
+        <Text name="bool" value="$bool"></Text>
+        <Header>Array</Header>
+        <Text name="array" value="$array"></Text>
+        <Header value="Crazy header $string $number $bool $array" />
+      </View>
+    `;
+
+    const data = {
+      string: 'Simple text',
+      number: 123.45,
+      bool: false,
+      array: [1, 2, 3],
+    };
+
+    LabelStudio.params()
+      .config(config)
+      .data(data)
+      .withResult([])
+      .init();
+
+    cy.get('.lsf-object').contains('Simple text').should('be.visible');
+    cy.get('.lsf-object').contains('123.45').should('be.visible');
+    cy.get('.lsf-object').contains('false').should('be.visible');
+    cy.get('.lsf-object').contains('1,2,3').should('be.visible');
+  });
+});