fix: DEV-2905: Change the model version selector api response handling and present upgrade error for out of date ml backend

label_studio/frontend/src/pages/Settings/MachineLearningSettings/ModelVersionSelector.js

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useAPI } from '../../../providers/ApiProvider';
 import { Select } from '../../../components/Form';
+import { Block, Elem } from '../../../utils/bem';
+
+import './ModelVersionSelector.styl';
 
 export const ModelVersionSelector = ({
   name = "model_version",
@@ -11,6 +14,7 @@ export const ModelVersionSelector = ({
   ...props
 }) => {
   const api = useAPI();
+  const [error, setError] = useState(null);
   const [versions, setVersions] = useState([]);
 
   const fetchMLVersions = useCallback(async () => {
@@ -24,24 +28,37 @@ export const ModelVersionSelector = ({
       },
     });
 
-    if (!modelVersions) return;
+    if (modelVersions?.message) {
+      setError(modelVersions.message);
+      return;
+    }
+
+
+    if (!modelVersions?.versions?.length) return;
 
-    setVersions(Object.entries(modelVersions).reduce((v, [key, value]) => [...v, {
-      value: key,
-      label: key + " (" + value + " predictions)",
-    }], []));
+    setVersions(modelVersions.versions.map(version => ({
+      value: version,
+      label: `${version} (${version} predictions)`,
+    })));
   }, [api, object?.id, apiName]);
 
   useEffect(fetchMLVersions, []);
 
   return (
-    <Select
-      name={name}
-      disabled={!versions.length}
-      defaultValue={object?.[valueName] || null}
-      options={versions}
-      placeholder={placeholder}
-      {...props}
-    />
+    <Block name="modelVersionSelector">
+      <Select
+        name={name}
+        disabled={!versions.length || error}
+        defaultValue={object?.[valueName] || null}
+        options={versions}
+        placeholder={placeholder}
+        {...props}
+      />
+      {error && (
+        <Elem name="message">
+          {error}
+        </Elem>
+      )}
+    </Block>
   );
 };

label_studio/frontend/src/pages/Settings/MachineLearningSettings/ModelVersionSelector.styl

@@ -0,0 +1,11 @@
+.modelVersionSelector
+  width 100%
+  display flex
+  flex-direction column
+  gap 12px
+
+  &__message
+    font-size 16px
+    color #DD0000
+    margin-bottom 12px
+