feat: LSDV-5520: Project Creation Wizard Tip (Label Studio Community)

label_studio/frontend/package.json

@@ -35,7 +35,7 @@
     "@sentry/browser": "^6.8.0",
     "@sentry/react": "^6.8.0",
     "@sentry/tracing": "^6.8.0",
-    "@svgr/webpack": "^8.0.1",
+    "@svgr/webpack": "^8.1.0",
     "@types/chroma-js": "^2.1.3",
     "@types/enzyme": "^3.10.8",
     "@types/expect-puppeteer": "^4.4.5",

label_studio/frontend/src/assets/icons/index.js

@@ -25,4 +25,5 @@ export { default as LsThumbsDown } from './thumbs-down.svg';
 export { default as LsThumbsUp } from './thumbs-up.svg';
 export { default as IconUpload } from './upload.svg';
 export { default as LsPencil } from './pencil.svg';
-export { default as IconInfoOutline } from './info-outline.svg';
+export { default as IconInfoOutline } from './info-outline.svg';
+export { default as IconSpark } from './spark.svg'

label_studio/frontend/src/assets/images/index.js

@@ -0,0 +1 @@
+export { default as HeidiSpeaking } from "./heidi-speaking.svg";

label_studio/frontend/src/components/Badges/Enterprise.styl

@@ -0,0 +1,24 @@
+.enterprise-badge
+  display inline-block
+  border-radius 4px
+  background linear-gradient(135deg, #FFA663 0%, #FF7557 51.56%, #E37BD3 100%)
+  vertical-align middle
+  margin 0 8px
+
+  &__label
+    margin 1px
+    background #FFF1EE
+    color #FF7557
+    border-radius 3px
+    font 11px Roboto
+    padding 2px 5px 2px 3px
+    display flex
+    gap 4px
+    align-items center
+
+  &_filled &__label
+    background none
+    color #FFF1EE
+
+  &_filled &__icon path
+    fill #FFF1EE

label_studio/frontend/src/components/Badges/Enterprise.tsx

@@ -0,0 +1,19 @@
+import { FC } from "react";
+import { IconSpark } from "../../assets/icons";
+import { Block, Elem } from "../../utils/bem";
+import "./Enterprise.styl";
+
+export const EnterpriseBadge: FC<{
+  filled?: boolean
+}> = ({
+  filled,
+}) => {
+  return (
+    <Block name="enterprise-badge" mod={{ filled }}>
+      <Elem name="label">
+        <Elem name="icon" tag={IconSpark} />
+          Enterprise
+      </Elem>
+    </Block>
+  );
+};

label_studio/frontend/src/components/Button/Button.styl

@@ -19,7 +19,7 @@
   font-weight 500
   font-size 16px
 
-  &:hover:not(:disabled):not(&_waiting)
+  &:hover:not(:disabled):not(&_waiting):not(&_type_text):not(&_type_link)
     color var(--button-color)
     box-shadow 0px 2px 4px rgba(#000, 0.05), inset 0px -1px 0px rgba(#000, 0.1), inset 0px 0px 0px 1px rgba(#000, 0.2)
 

label_studio/frontend/src/components/Caption/Caption.styl

@@ -0,0 +1,8 @@
+.caption
+  font 12px Roboto
+
+  a
+    color #09f
+
+  a::before
+    content " "

label_studio/frontend/src/components/Caption/Caption.tsx

@@ -0,0 +1,11 @@
+import { FC, ReactElement } from "react";
+import { Block } from "../../utils/bem";
+import "./Caption.styl";
+
+export const Caption: FC<{ children: ReactElement }> = ({ children }) => {
+  return (
+    <Block name="caption" tag="p">
+      {children}
+    </Block>
+  );
+};

label_studio/frontend/src/components/HeidiTips/HeidiTip.styl

@@ -0,0 +1,61 @@
+.heidy-tip
+  &__content
+    padding 16px
+    color #000
+    border 1px solid #BFBFBF
+    font-family Roboto
+    font-size 14px
+    border-radius 8px
+    box-shadow 0px 2px 6px 0px rgba(0, 0, 0, 0.10)
+    box-sizing border-box
+
+  &__header
+    display flex
+    width 100%
+    min-height 24px
+    margin-bottom 8px
+    flex-direction row
+    justify-content space-between
+
+  &__title
+    font-size 16px
+    font-weight 500
+
+  &__link
+    color #09F
+    font-family Roboto
+    font-weight 500
+
+    &:hover
+      text-decoration underline
+
+    &::before
+      content " "
+
+  &__dismiss
+    width 24px
+    height 24px
+    padding 0
+    border none
+    display flex
+    box-shadow none
+    justify-content center
+    align-items center
+
+    svg
+      width 14px
+      height 14px
+
+    svg > path
+      stroke #898098
+
+    &:hover
+      background rgba(#096DD9, 0.05)
+
+      svg > path
+        stroke #1f1f1f
+
+  &__heidi
+    margin-top -12px
+    padding-left 16px
+    pointer-events none

label_studio/frontend/src/components/HeidiTips/HeidiTip.tsx

@@ -0,0 +1,69 @@
+import { FC, MouseEvent, useCallback, useMemo } from "react";
+import { Block, Elem } from "../../utils/bem";
+import { LsCross } from "../../assets/icons";
+import "./HeidiTip.styl";
+import { Button } from "../Button/Button";
+import { HeidiSpeaking } from "../../assets/images";
+import { HeidiTipProps, Tip } from "./types";
+import { Tooltip } from "../Tooltip/Tooltip";
+
+export const HeidiTip: FC<HeidiTipProps> = ({ tip, onDismiss }) => {
+  const handleClick = useCallback((event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onDismiss();
+  }, []);
+
+  return (
+    <Block name="heidy-tip">
+      <Elem name="content">
+        <Elem name="header">
+          <Elem name="title">
+            {tip.title}
+          </Elem>
+          {tip.closable && (
+            /* @ts-ignore-next-line */
+            <Tooltip title="Don't show">
+              { /* @ts-ignore-next-line */}
+              <Elem name="dismiss" tag={Button} type="text" onClick={handleClick}>
+                <LsCross />
+              </Elem>
+            </Tooltip>
+          )}
+        </Elem>
+        <Elem name="text">
+          {tip.content}
+          <HeidiLink link={tip.link} />
+        </Elem>
+      </Elem>
+      <Elem name="heidi">
+        <HeidiSpeaking />
+      </Elem>
+    </Block>
+  );
+};
+
+const HeidiLink: FC<{ link: Tip["link"] }> = ({
+  link,
+}) => {
+  const url = useMemo(() => {
+    const base = new URL(link.url);
+
+    Object.keys(link.params ?? {}).forEach((key) => {
+      const value = link.params?.[key];
+
+      if (value) base.searchParams.set(key, value);
+    });
+
+    /* if needed, add server ID here */
+
+    return base.toString();
+  }, [link]);
+
+  return (
+    /* @ts-ignore-next-line */
+    <Elem name="link" tag="a" href={url} target="_blank">
+      {link.label}
+    </Elem>
+  );
+};

label_studio/frontend/src/components/HeidiTips/HeidiTips.tsx

@@ -0,0 +1,18 @@
+import { FC, memo, useCallback, useState } from "react";
+import { HeidiTipsProps } from './types';
+import { HeidiTip } from "./HeidiTip";
+import { dismissTip, getRandomTip, isTipDismissed } from "./utils";
+
+export const HeidiTips: FC<HeidiTipsProps> = memo(({
+  collection,
+}) => {
+  const [tip, setTip] = useState(getRandomTip(collection));
+  const dismiss = useCallback(() => {
+    dismissTip(collection);
+    setTip(null);
+  }, []);
+
+  return tip && (
+    <HeidiTip tip={tip} onDismiss={dismiss} />
+  );
+});

label_studio/frontend/src/components/HeidiTips/content.ts

@@ -0,0 +1,83 @@
+import { Tip } from "./types";
+
+export const TipsCollection: Record<string, Tip[]> = {
+  projectCreation: [{
+    title: "Did you know?",
+    content: "It’s easier to find the projects when you organize them into workspaces using Label Studio Enterprise.",
+    closable: true,
+    link: {
+      label: "Learn more",
+      url: "https://docs.humansignal.com/guide/manage_projects#Create-workspaces-to-organize-projects",
+      params: {
+        experiment: "placeholder",
+        treatment: "placeholder",
+        server_id: "placeholder",
+      },
+    },
+  }, {
+    title: "Unlock faster access provisioning",
+    content: "Streamline assigning staff to multiple projects by assigning them to workspaces in Label Studio Enterprise.",
+    closable: true,
+    link: {
+      label: "Learn more",
+      url: "https://docs.humansignal.com/guide/manage_projects#Add-or-remove-members-to-a-workspace",
+      params: {
+        experiment: "placeholder",
+        treatment: "placeholder",
+        server_id: "placeholder",
+      },
+    },
+  }, {
+    title: "Did you know?",
+    content: "Users with the Manager role can supervise a set of projects by assigning them to workspaces in Label Studio Enterprise.",
+    closable: true,
+    link: {
+      label: "Learn more",
+      url: "https://docs.humansignal.com/guide/manage_users#Roles-in-Label-Studio-Enterprise",
+      params: {
+        experiment: "placeholder",
+        treatment: "placeholder",
+        server_id: "placeholder",
+      },
+    },
+  }, {
+    title: "Did you know?",
+    content: "You can control access to specific projects and workspaces for internal team members and external annotators using Label Studio Enterprise.",
+    closable: true,
+    link: {
+      label: "Learn more",
+      url: "https://docs.humansignal.com/guide/manage_users#Roles-in-Label-Studio-Enterprise",
+      params: {
+        experiment: "placeholder",
+        treatment: "placeholder",
+        server_id: "placeholder",
+      },
+    },
+  }, {
+    title: "Did you know?",
+    content: "You can use or modify dozens or templates to configure your labeling UI, or create a custom configuration from scratch using simple XML-like tag",
+    closable: true,
+    link: {
+      label: "Learn more",
+      url: "https://labelstud.io/guide/setup",
+      params: {
+        experiment: "placeholder",
+        treatment: "placeholder",
+        server_id: "placeholder",
+      },
+    },
+  }, {
+    title: "Did you know?",
+    content: "You can label tasks with collaborators by setting the minimum number of annotations to more than one. ",
+    closable: true,
+    link: {
+      label: "Learn more",
+      url: "https://labelstud.io/guide/labeling#Label-with-collaborators",
+      params: {
+        experiment: "placeholder",
+        treatment: "placeholder",
+        server_id: "placeholder",
+      },
+    },
+  }],
+};

label_studio/frontend/src/components/HeidiTips/types.ts

@@ -0,0 +1,21 @@
+import { TipsCollection } from "./content";
+
+export type Tip = {
+  title: string,
+  content: string,
+  closable?: boolean,
+  link: {
+    url: string,
+    label: string,
+    params?: Record<string, string>
+  },
+}
+
+export type HeidiTipsProps = {
+  collection: keyof typeof TipsCollection
+}
+
+export type HeidiTipProps = {
+  tip: Tip,
+  onDismiss: () => void
+}