Merge branch 'origin/develop' into 'fb-lsdv-5544'

HumanSignal · Aug 28, 2023 · 58b6746 · 58b6746
2 parents 3077e5c + 5e4bc3d
commit 58b6746
Show file tree

Hide file tree

Showing 16 changed files with 82 additions and 42 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1 +1,4 @@
 .github/                          @farioas
+docs/.npmignore                   @hlomzik @Gondragos @nicholasrq
+docs/package.json                 @hlomzik @Gondragos @nicholasrq
+docs/yarn.lock                    @hlomzik @Gondragos @nicholasrq
diff --git a/.github/workflows/docker-build-ontop.yml b/.github/workflows/docker-build-ontop.yml
@@ -82,7 +82,7 @@ jobs:
           cat "${DOCKERFILE_PATH}"
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.9.1
+        uses: docker/setup-buildx-action@v2.10.0
 
       - name: Login to DockerHub
         uses: docker/[email protected]

diff --git a/.github/workflows/docker-build-ubi.yml b/.github/workflows/docker-build-ubi.yml
@@ -32,7 +32,7 @@ jobs:
           fetch-depth: 0
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.9.1
+        uses: docker/setup-buildx-action@v2.10.0
 
       - name: Login to RedHat Registry
         uses: docker/[email protected]

diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build.yml
@@ -66,7 +66,7 @@ jobs:
           echo "build_version=$version" >> $GITHUB_OUTPUT
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.9.1
+        uses: docker/setup-buildx-action@v2.10.0
 
       - name: Login to DockerHub
         uses: docker/[email protected]

diff --git a/.github/workflows/docker-release-promote.yml b/.github/workflows/docker-release-promote.yml
@@ -170,7 +170,7 @@ jobs:
           fi
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2.9.1
+        uses: docker/setup-buildx-action@v2.10.0
 
       - name: Login to DockerHub
         uses: docker/[email protected]

diff --git a/label_studio/frontend/dist/react-app/index.js b/label_studio/frontend/dist/react-app/index.js
diff --git a/label_studio/frontend/dist/react-app/index.js.map b/label_studio/frontend/dist/react-app/index.js.map
diff --git a/label_studio/frontend/dist/react-app/main.css b/label_studio/frontend/dist/react-app/main.css
diff --git a/label_studio/frontend/dist/react-app/main.css.map b/label_studio/frontend/dist/react-app/main.css.map
diff --git a/label_studio/frontend/src/components/Caption/Caption.styl b/label_studio/frontend/src/components/Caption/Caption.styl
@@ -1,8 +1,12 @@
 .caption
   font 12px Roboto
+  margin 8px 0
 
   a
     color #09f
 
-  a::before
-    content " "
+    &::before
+      content " "
+
+    &:hover
+      text-decoration underline
diff --git a/label_studio/frontend/src/components/Form/Elements/Label/Label.js b/label_studio/frontend/src/components/Form/Elements/Label/Label.js
@@ -2,7 +2,7 @@ import React, { createElement } from 'react';
 import { cn } from '../../../../utils/bem';
 import './Label.styl';
 
-const Label = ({text, children, required, placement, description, size, large, style, simple, flat}) => {
+const Label = ({ text, children, required, placement, description, size, large, style, simple, flat }) => {
   const rootClass = cn('label');
   const classList = [rootClass];
   const tagName = simple ? 'div' : 'label';
@@ -25,7 +25,9 @@ const Label = ({text, children, required, placement, description, size, large, s
     <>
       <div className={rootClass.elem('text')}>
         <div className={rootClass.elem('content')}>
-          {text}
+          <div className={rootClass.elem('label')}>
+            {text}
+          </div>
           {description && <div className={rootClass.elem("description")}>{description}</div>}
         </div>
       </div>

diff --git a/label_studio/frontend/src/components/Form/Elements/Label/Label.styl b/label_studio/frontend/src/components/Form/Elements/Label/Label.styl
@@ -16,14 +16,24 @@
     line-height 22px
     color $black_40
 
+    a
+      color #096DD9
+
+      &:hover
+        text-decoration underline
+
   &__field
     line-height 0
 
+  &__label
+    display flex
+    align-items center
+
   &_size_large &__text
     font-weight 500
     font-size 16px
     line-height 22px
-    margin-bottom 16px
+    margin-bottom 8px
 
   &_flat &__text
     padding 0
@@ -38,11 +48,12 @@
   &_large &__text
     font-size 16px
     font-weight 500
-    margin-bottom 16px
+    margin-bottom 8px
 
   &_placement_right
     display inline-flex
     flex-direction row-reverse
+
   &_placement_left
     display inline-flex
 
@@ -63,3 +74,6 @@
   &_placement_right&_withDescription &__field
   &_placement_left&_withDescription &__field
     margin-top 5px
+
+    input[type=radio]
+      margin-top 0
diff --git a/label_studio/frontend/src/components/Form/Elements/RadioGroup/RadioGroup.js b/label_studio/frontend/src/components/Form/Elements/RadioGroup/RadioGroup.js
@@ -5,9 +5,9 @@ import { FormField } from "../../FormField";
 import "./RadioGroup.styl";
 
 const RadioContext = createContext();
-const {Block, Elem} = BemWithSpecifiContext();
+const { Block, Elem } = BemWithSpecifiContext();
 
-export const RadioGroup = ({label, className, validate, required, skip, simple, labelProps, size, value, onChange, children, ...props }) => {
+export const RadioGroup = ({ label, className, validate, required, skip, simple, labelProps, size, value, onChange, children, ...props }) => {
   const [currentValue, setCurrentValue] = useState(value);
 
   const onRadioChange = (value) => {
@@ -37,8 +37,8 @@ export const RadioGroup = ({label, className, validate, required, skip, simple,
             isSimple: simple === true,
           }}
         >
-          <Block name="radio-group" mod={{size, simple}} mix={className}>
-            <input ref={ref} name={props.name} type="hidden" defaultValue={currentValue}/>
+          <Block name="radio-group" mod={{ size, simple }} mix={className}>
+            <input ref={ref} name={props.name} type="hidden" defaultValue={currentValue} />
             <Elem name="buttons">
               {children}
             </Elem>
@@ -58,8 +58,9 @@ const RadioButton = ({ value, disabled, children, label, description, ...props }
   const clickHandler = useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
+    if (disabled) return;
     onChange(value);
-  }, [value]);
+  }, [value, disabled]);
 
   useEffect(() => {
     if (props.checked) setValue(value);
@@ -69,7 +70,14 @@ const RadioButton = ({ value, disabled, children, label, description, ...props }
     <Elem name="button" mod={{ checked, disabled }} onClickCapture={clickHandler}>
       {isSimple ? (
         <Label placement="right" text={label} description={description}>
-          <input type="radio" value={value} checked={checked} readOnly style={{pointerEvents: 'none'}}/>
+          <input
+            type="radio"
+            value={value}
+            checked={checked}
+            disabled={disabled}
+            readOnly
+            style={{ pointerEvents: 'none' }}
+          />
         </Label>
       ) : children}
     </Elem>

diff --git a/label_studio/frontend/src/components/HeidiTips/HeidiTip.styl b/label_studio/frontend/src/components/HeidiTips/HeidiTip.styl
@@ -20,6 +20,12 @@
   &__title
     font-size 16px
     font-weight 500
+    line-height 24px
+    letter-spacing 0.15px
+
+  &__text
+    line-height 20px
+    letter-spacing 0.25px
 
   &__link
     color #09F

diff --git a/label_studio/frontend/src/pages/Settings/GeneralSettings.js b/label_studio/frontend/src/pages/Settings/GeneralSettings.js
@@ -9,6 +9,7 @@ import './settings.styl';
 import { HeidiTips } from '../../components/HeidiTips/HeidiTips';
 import { FF_LSDV_E_297, isFF } from '../../utils/feature-flags';
 import { createURL } from '../../components/HeidiTips/utils';
+import { Caption } from '../../components/Caption/Caption';
 
 export const GeneralSettings = () => {
   const { project, fetchProject } = useContext(ProjectContext);
@@ -62,12 +63,12 @@ export const GeneralSettings = () => {
                   <EnterpriseBadge />
                 </Elem>
                 <Select placeholder="Select an option" disabled options={[]} />
-                <Block tag="p" name="settings-caption">
+                <Caption>
                   Simplify project management by organizing projects into workspaces. <a target="_blank" href={createURL("https://docs.humansignal.com/guide/manage_projects#Create-workspaces-to-organize-projects", {
-                    experiment: 'project_settings_tip',
-                    treatment: 'simplify_project_management',
-                  })}>Learn more</a>
-                </Block>
+                  experiment: 'project_settings_tip',
+                  treatment: 'simplify_project_management',
+                })}>Learn more</a>
+                </Caption>
               </Block>
             )}
             <RadioGroup name="color" label="Color" size="large" labelProps={{ size: "large" }}>
@@ -88,20 +89,20 @@ export const GeneralSettings = () => {
                 />
               ))}
               {isFF(FF_LSDV_E_297) && (
-                <Block name="disabled-field">
-                  <Elem name="label">
-                    <input type="radio" value="test" disabled />
-                  </Elem>
-                  <Elem name="label-wrapper">
-                    <Elem name="title">Uncertainty sampling <EnterpriseBadge /></Elem>
-                    <Elem name="description">
-                      <p>Tasks are chosen according to model uncertainty score (active learning mode). <a target="_blank" href={createURL("https://docs.humansignal.com/guide/active_learning", {
-                        experiment: 'project_settings_workspace',
-                        treatment: 'workspaces',
-                      })}>Learn more</a></p>
-                    </Elem>
-                  </Elem>
-                </Block>
+                <RadioGroup.Button
+                  key="uncertainty-sampling"
+                  value=""
+                  label={<>Uncertainty sampling <EnterpriseBadge /></>}
+                  disabled
+                  description={(
+                    <>
+                      Tasks are chosen according to model uncertainty score (active learning mode). <a target="_blank" href={createURL("https://docs.humansignal.com/guide/active_learning", {
+                      experiment: 'project_settings_workspace',
+                      treatment: 'workspaces',
+                    })}>Learn more</a>
+                    </>
+                  )}
+                />
               )}
             </RadioGroup>
           </Form.Row>

diff --git a/label_studio/frontend/src/pages/Settings/settings.styl b/label_studio/frontend/src/pages/Settings/settings.styl
@@ -19,7 +19,8 @@
 .workspace-placeholder
   &__badge-wrapper
     display flex
-    margin-bottom 16px
+    margin-bottom 8px
+    line-height normal
 
   &__title
     font-size 16px
@@ -55,7 +56,7 @@
 
     a
       color #09F;
-      font-size 12px;
+      font-size 14px;
       font-style normal;
       font-weight 500;
       line-height 16px;
@@ -78,6 +79,7 @@
     height: 22px;
     display: flex;
     margin-bottom: 4px;
+    align-items center
 
   &__description
     margin-top: 5px;
@@ -88,4 +90,4 @@
     padding: 0 16px;
     height: 22px;
     display: flex;
-    margin-bottom: 4px
+    margin-bottom: 4px