fix: OPTIC-945: Improve the bundling strategy and ship a single entrypoint with a common vendor chunk across all libs - restore (#6199)

Co-authored-by: yyassi-heartex <[email protected]>
Co-authored-by: Brandon Martel <[email protected]>

Author: yyassi-heartex

deploy/default.conf

@@ -120,18 +120,6 @@ http {
         alias /label-studio/label_studio/core/static_build/;
     }
 
-    # Frontend react
-    # Source: https://github.com/heartexlabs/label-studio-frontend
-    location /label-studio-frontend/ {
-        alias /label-studio/web/dist/libs/editor/;
-    }
-
-    # Data Manager
-    # Source: https://github.com/heartexlabs/dm2
-    location /dm/ {
-        alias /label-studio/web/dist/libs/datamanager/;
-    }
-
     # LabelStudio frontend
     # Source: https://github.com/heartexlabs/label-studio/blob/HEAD/label_studio/frontend/src
     location /react-app/ {

label_studio/core/feature_flags/stale_feature_flags.py

@@ -59,4 +59,5 @@
     'ff_dev_2007_rework_choices_280322_short': True,
     'ff_front_dev_1495_avatar_mess_210122_short': True,
     'ff_front_1170_outliner_030222_short': True,
+    'fflag_fix_front_lsdv_4620_memory_leaks_100723_short': False,
 }

label_studio/core/utils/common.py

@@ -207,20 +207,6 @@ def paginator_help(objects_name, tag):
     )
 
 
-def find_editor_files():
-    """Find label studio files"""
-
-    # playground uses another LSF build
-    prefix = '/label-studio/'
-    editor_dir = settings.EDITOR_ROOT
-
-    # find editor files to include in html
-    editor_js = [prefix + f for f in os.listdir(editor_dir) if f.endswith('.js')]
-    editor_css = [prefix + f for f in os.listdir(editor_dir) if f.endswith('.css')]
-
-    return {'editor_js': editor_js, 'editor_css': editor_css}
-
-
 def string_is_url(url):
     try:
         url_validator(url)

label_studio/data_manager/views.py

@@ -1,6 +1,5 @@
 """This file and its contents are licensed under the Apache License 2.0. Please see the included NOTICE for copyright information and LICENSE for a copy of the license.
 """
-from core.utils.common import find_editor_files
 from core.version import get_short_version
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import render
@@ -9,5 +8,4 @@
 @login_required
 def task_page(request, pk):
     response = {'version': get_short_version()}
-    response.update(find_editor_files())
     return render(request, 'base.html', response)

label_studio/feature_flags.json

@@ -4027,7 +4027,7 @@
     },
     "fflag_fix_front_lsdv_4620_memory_leaks_100723_short": {
       "key": "fflag_fix_front_lsdv_4620_memory_leaks_100723_short",
-      "on": true,
+      "on": false,
       "prerequisites": [],
       "targets": [],
       "contextTargets": [],

label_studio/templates/base.html

@@ -16,25 +16,19 @@
   <meta name="msapplication-navbutton-color" content="#272727">  <!-- Windows Phone -->
   <meta name="apple-mobile-web-app-status-bar-style" content="#272727">  <!-- iOS Safari -->
 
+  <!-- Preload fonts -->
+  <link rel="preload" href="{{settings.HOSTNAME}}{% static 'fonts/Figtree-Regular.ttf' %}" type="font" crossorigin="anonymous">
+  <link rel="preload" href="{{settings.HOSTNAME}}{% static 'fonts/Figtree-SemiBold.ttf' %}" type="font" crossorigin="anonymous">
+
+  <!-- CSS -->
   <link href="{{settings.HOSTNAME}}{% static 'images/favicon.ico' %}" rel="shortcut icon"/>
   <link href="{{settings.HOSTNAME}}{% static 'css/uikit.css' %}" rel="stylesheet">
   <link href="{{settings.HOSTNAME}}{% static 'css/main.css' %}" rel="stylesheet">
-  <link href="{{settings.HOSTNAME}}/static/fonts/roboto/roboto.css" rel="stylesheet">
   <link href="{{settings.HOSTNAME}}/react-app/main.css?v={{ versions.backend.commit }}" rel="stylesheet">
 
-  <script src="{{settings.HOSTNAME}}{% static 'js/jquery.min.js' %}"></script>
-  <script src="{{settings.HOSTNAME}}{% static 'js/helpers.js' %}"></script>
-
   {% block app-scripts %}
-    <script nonce="{{request.csp_nonce}}">
-      EDITOR_JS = `{{settings.HOSTNAME}}/label-studio-frontend/main.js?v={{ versions.lsf.commit }}`;
-      EDITOR_CSS = `{{settings.HOSTNAME}}/label-studio-frontend/main.css?v={{ versions.lsf.commit }}`;
-      DM_JS = `{{settings.HOSTNAME}}/dm/main.js?v={{ versions.dm2.commit }}`;
-      DM_CSS = `{{settings.HOSTNAME}}/dm/main.css?v={{ versions.dm2.commit }}`;
-    </script>
   {% endblock %}
 
-
   <script
    src="https://browser.sentry-cdn.com/5.17.0/bundle.min.js"
    integrity="sha384-lowBFC6YTkvMIWPORr7+TERnCkZdo5ab00oH5NkFLeQUAmBTLGwJpFjF6djuxJ/5"
@@ -49,7 +43,6 @@
   {% endblock %}
 
   {% block head-toast %}
-    <script src="{{settings.HOSTNAME}}{% static 'js/Toast.min.js' %}"></script>
     <link href="{{settings.HOSTNAME}}{% static 'css/Toast.min.css' %}" rel="stylesheet">
   {% endblock %}
 
@@ -119,21 +112,29 @@
 </script>
 
 {% block app-js %}
+<script src="{{settings.HOSTNAME}}/react-app/runtime.js?v={{ versions.backend.commit }}"></script>
+{% comment %}
+  NOTE: purposely setting this to not cache using backend commit as we do not intend this to change frequently.
+  If for any reason we need to invalidate the cache, we can do so by changing the version number.
+{% endcomment %}
+<script src="{{settings.HOSTNAME}}/react-app/vendor.js?v=1"></script>
 <script src="{{settings.HOSTNAME}}/react-app/main.js?v={{ versions.backend.commit }}"></script>
 {% endblock %}
 
-<div id="dynamic-content">
+{% block bottomjs %}
+  <script src="{{settings.HOSTNAME}}{% static 'js/jquery.min.js' %}"></script>
+  <script src="{{settings.HOSTNAME}}{% static 'js/helpers.js' %}"></script>
+  <script src="{{settings.HOSTNAME}}{% static 'js/Toast.min.js' %}"></script>
   <script nonce="{{request.csp_nonce}}">
       applyCsrf();
 
       $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade');
       });
   </script>
+{% endblock %}
 
-  {% block bottomjs %}
-  {% endblock %}
-
+<div id="dynamic-content">
   {% block storage-persistence %}
   <script nonce="{{request.csp_nonce}}">
     {# storage persistence #}

label_studio/users/templates/users/new-ui/user_login.html

@@ -7,11 +7,11 @@ <h2>Log in</h2>
       {% csrf_token %}
       <div class="input-wrapper">
         <label>Email Address</label>
-        <input type="text" class="ls-input" name="email" id="email" value="{{ form.data.email }}">
+        <input type="text" class="lsf-input-ls" name="email" id="email" value="{{ form.data.email }}">
       </div>
       <div class="input-wrapper">
         <label>Password</label>
-        <input type="password" class="ls-input" name="password" id="password">
+        <input type="password" class="lsf-input-ls" name="password" id="password">
       </div>
       {% if form.non_field_errors %}
         {% for error in form.non_field_errors %}
@@ -21,10 +21,10 @@ <h2>Log in</h2>
         {% endfor %}
       {% endif %}
       <div class="form-group">
-        <input type="checkbox" id="persist_session" name="persist_session" class="ls-checkbox" checked="checked" style="width: auto;" />
+        <input type="checkbox" id="persist_session" name="persist_session" class="lsf-checkbox-ls" checked="checked" style="width: auto;" />
         <label for="persist_session">Keep me logged in this browser</label>
       </div>
-      <button type="submit" aria-label="Log In" class="ls-button ls-button_look_primary">Log in</button>
+      <button type="submit" aria-label="Log In" class="lsf-button-ls lsf-button-ls_look_primary">Log in</button>
     </form>
   </div>
   {% if not settings.DISABLE_SIGNUP_WITHOUT_LINK %}

label_studio/users/templates/users/new-ui/user_signup.html

@@ -11,7 +11,7 @@ <h2>Sign Up</h2>
     {% csrf_token %}
       <div class="input-wrapper">
         <label>Email Address</label>
-        <input type="text" class="ls-input" name="email" id="email" value="{{ form.data.email }}">
+        <input type="text" class="lsf-input-ls" name="email" id="email" value="{{ form.data.email }}">
         {% if user_form.errors.email %}
           <ul class="field_errors">
             {% for error in user_form.errors.email %}
@@ -22,7 +22,7 @@ <h2>Sign Up</h2>
         </div>
       <div class="input-wrapper">
         <label>Password</label>
-        <input type="password" class="ls-input" name="password" id="password">
+        <input type="password" class="lsf-input-ls" name="password" id="password">
         {% if user_form.errors.password %}
           <ul class="field_errors">
             {% for error in user_form.errors.password %}
@@ -33,7 +33,7 @@ <h2>Sign Up</h2>
       </div>
       <div class="form-group">
         <input name="allow_newsletters" id="allow_newsletters" type="hidden" value="true">
-        <input name="allow_newsletters_visual" id="allow_newsletters_visual" class="ls-checkbox"
+        <input name="allow_newsletters_visual" id="allow_newsletters_visual" class="lsf-checkbox-ls"
                 type="checkbox" style="width: auto" checked="true"
                 onchange="document.getElementById('allow_newsletters').value=document.getElementById('allow_newsletters_visual').checked">
         <label for="allow_newsletters_visual" style="display: inline-block; cursor: pointer;">
@@ -50,7 +50,7 @@ <h2>Sign Up</h2>
           </p>
         {% endfor %}
       {% endif %}
-      <p><button type="submit" aria-label="Create Account" class="ls-button ls-button_look_primary">Create Account</button></p>
+      <p><button type="submit" aria-label="Create Account" class="lsf-button-ls lsf-button-ls_look_primary">Create Account</button></p>
     </form>
   </div>
   <div class="text-wrapper">

label_studio/users/templates/users/user_account.html

@@ -31,19 +31,19 @@
       <ul>
         <li class="field">
           <label for="">E-mail</label>
-          <input type="text" class="ls-input" value="{{user.email}}" disabled />
+          <input type="text" class="lsf-input-ls" value="{{user.email}}" disabled />
         </li>
         <li class="field">
           <label for="">First Name</label>
-          <input type="text" class="ls-input" name="first_name" value="{{user.first_name}}" />
+          <input type="text" class="lsf-input-ls" name="first_name" value="{{user.first_name}}" />
         </li>
         <li class="field">
           <label for="">Last Name</label>
-          <input type="text" class="ls-input" name="last_name" value="{{user.last_name}}" />
+          <input type="text" class="lsf-input-ls" name="last_name" value="{{user.last_name}}" />
         </li>
         <li class="field">
           <label for="">Phone</label>
-          <input type="text" class="ls-input" name="phone" value="{{user.phone}}" />
+          <input type="text" class="lsf-input-ls" name="phone" value="{{user.phone}}" />
           <!-- <span>We'll send you sms with code if you change your number</span>
           <span class="error">Incorrect phone number!</span> -->
         </li>
@@ -63,7 +63,7 @@
             {% endif %}
           </div>
 
-          <button class="ls-button ls-button_look_danger" name="delete-avatar" type="button">
+          <button class="lsf-button-ls lsf-button-ls_look_danger" name="delete-avatar" type="button">
             Delete
           </button>
 
@@ -78,7 +78,7 @@
       </div>
       <footer>
         <p class="secondary">Registered {{ user.date_joined|date:"M j, Y" }}, user ID {{ user.id }}</p>
-        <button class="ls-button ls-button_look_primary" onclick="smart_submit()">Save</button>
+        <button class="lsf-button-ls lsf-button-ls_look_primary" onclick="smart_submit()">Save</button>
       </footer>
     </form>
 
@@ -87,10 +87,10 @@
       <header>Access Token</header>
       <div class="field field--wide">
         <label for="access_token">Use this token to authenticate with our API:</label>
-        <input id="access_token" class="ls-input" name="access_token" type="text" value="{{token}}" readonly />
+        <input id="access_token" class="lsf-input-ls" name="access_token" type="text" value="{{token}}" readonly />
         <p class="actions">
-          <button type="button" class="blinking-status ls-button" data-copy="access_token">Copy</button>
-          <button type="button" class="blinking-status ls-button" name="renew">Renew</button>
+          <button type="button" class="blinking-status lsf-button-ls" data-copy="access_token">Copy</button>
+          <button type="button" class="blinking-status lsf-button-ls" name="renew">Renew</button>
         </p>
       </div>
       <!-- Example -->
@@ -105,8 +105,8 @@
           {% endif %}
         </textarea>
         <p class="actions">
-          <button type="button" class="blinking-status ls-button" data-copy="example_fetch">Copy</button>
-          <a class="ls-button"
+          <button type="button" class="blinking-status lsf-button-ls" data-copy="example_fetch">Copy</button>
+          <a class="lsf-button-ls"
              {% if settings.VERSION_EDITION == 'Enterprise' %}
              href="https://docs.heartex.com/guide/api.html"
              {% else %}

label_studio/users/templates/users/user_login.html

@@ -3,8 +3,8 @@
 {% block user_content %}
   <form id="login-form" action="{% url 'user-login' %}{% if next %}?next={{ next }}{% endif %}" method="post">
     {% csrf_token %}
-    <p><input type="text" class="ls-input" name="email" id="email" placeholder="Email" value="{{ form.data.email }}"></p>
-    <p><input type="password" class="ls-input" name="password" id="password" placeholder="Password"></p>
+    <p><input type="text" class="lsf-input-ls" name="email" id="email" placeholder="Email" value="{{ form.data.email }}"></p>
+    <p><input type="password" class="lsf-input-ls" name="password" id="password" placeholder="Password"></p>
     {% if form.non_field_errors %}
       {% for error in form.non_field_errors %}
         <p class="error">
@@ -13,10 +13,10 @@
       {% endfor %}
     {% endif %}
     <p>
-      <input type="checkbox" id="persist_session" name="persist_session" class="ls-checkbox" checked="checked" style="width: auto;" />
+      <input type="checkbox" id="persist_session" name="persist_session" class="lsf-checkbox-ls" checked="checked" style="width: auto;" />
       <label for="persist_session">Keep me logged in this browser</label>
     </p>
-    <p><button type="submit" aria-label="Log In" class="ls-button ls-button_look_primary">Log in</button></p>
+    <p><button type="submit" aria-label="Log In" class="lsf-button-ls lsf-button-ls_look_primary">Log in</button></p>
   </form>
 
 {% endblock %}

label_studio/users/templates/users/user_signup.html

@@ -9,7 +9,7 @@
   >
     {% csrf_token %}
     <div>
-      <input type="text" class="ls-input" name="email" id="email" placeholder="Email" value="{{ form.data.email }}">
+      <input type="text" class="lsf-input-ls" name="email" id="email" placeholder="Email" value="{{ form.data.email }}">
       {% if user_form.errors.email %}
         <ul class="field_errors">
           {% for error in user_form.errors.email %}
@@ -19,7 +19,7 @@
       {% endif %}
       </div>
     <div>
-      <input type="password" class="ls-input" name="password" id="password" placeholder="Password">
+      <input type="password" class="lsf-input-ls" name="password" id="password" placeholder="Password">
       {% if user_form.errors.password %}
         <ul class="field_errors">
           {% for error in user_form.errors.password %}
@@ -50,7 +50,7 @@
         </p>
       {% endfor %}
     {% endif %}
-    <p><button type="submit" aria-label="Create Account" class="ls-button ls-button_look_primary">Create Account</button></p>
+    <p><button type="submit" aria-label="Create Account" class="lsf-button-ls lsf-button-ls_look_primary">Create Account</button></p>
   </form>
 
 {% endblock %}

web/apps/labelstudio/src/app/App.jsx

@@ -9,7 +9,6 @@ import { initSentry } from "../config/Sentry";
 import { ApiProvider } from "../providers/ApiProvider";
 import { AppStoreProvider } from "../providers/AppStoreProvider";
 import { ConfigProvider } from "../providers/ConfigProvider";
-import { LibraryProvider } from "../providers/LibraryProvider";
 import { MultiProvider } from "../providers/MultiProvider";
 import { ProjectProvider } from "../providers/ProjectProvider";
 import { RoutesProvider } from "../providers/RoutesProvider";
@@ -52,19 +51,6 @@ window.LSH = browserHistory;
 initSentry(browserHistory);
 
 const App = ({ content }) => {
-  const libraries = {
-    lsf: {
-      scriptSrc: window.EDITOR_JS,
-      cssSrc: window.EDITOR_CSS,
-      checkAvailability: () => !!window.LabelStudio,
-    },
-    dm: {
-      scriptSrc: window.DM_JS,
-      cssSrc: window.DM_CSS,
-      checkAvailability: () => !!window.DataManager,
-    },
-  };
-
   return (
     <ErrorBoundary>
       <Router history={browserHistory}>
@@ -73,7 +59,6 @@ const App = ({ content }) => {
             <AppStoreProvider key="app-store" />,
             <ApiProvider key="api" />,
             <ConfigProvider key="config" />,
-            <LibraryProvider key="lsf" libraries={libraries} />,
             <RoutesProvider key="rotes" />,
             <ProjectProvider key="project" />,
             <ToastProvider key="toast" />,

web/apps/labelstudio/src/components/Button/Button.jsx

@@ -47,7 +47,7 @@ export const Button = React.forwardRef(
     }, [icon, size]);
 
     return (
-      <Block name="button" mod={mods} mix={className} ref={ref} tag={finalTag} type={type} {...rest}>
+      <Block name="button-ls" mod={mods} mix={className} ref={ref} tag={finalTag} type={type} {...rest}>
         <>
           {iconElem && (
             <Elem tag="span" name="icon">
@@ -65,7 +65,7 @@ Button.displayName = "Button";
 
 Button.Group = ({ className, children, collapsed }) => {
   return (
-    <Block name="button-group" mod={{ collapsed }} mix={className}>
+    <Block name="button-group-ls" mod={{ collapsed }} mix={className}>
       {children}
     </Block>
   );