Add support for JSON highlighting (mlflow#11619)

Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com>
apurva-koti · Apr 4, 2024 · b3a2ee2 · b3a2ee2
1 parent b0cd952
commit b3a2ee2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/mlflow/server/js/src/model-registry/components/ModelVersionTable.test.tsx b/mlflow/server/js/src/model-registry/components/ModelVersionTable.test.tsx
@@ -76,7 +76,7 @@ describe('ModelVersionTable', () => {
       modelName: modelName,
       usingNextModelsUI: true,
       modelVersions: [mockModelVersionDetailed(modelName, 1, Stages.NONE, ModelVersionStatus.READY)],
-      aliases: [{alias: 'champion', version: '1'}]
+      aliases: [{ alias: 'champion', version: '1' }],
     };
     renderWithProviders(<ModelVersionTable {...props} />);
     expect(screen.queryByRole('columnheader', { name: 'Stage' })).not.toBeInTheDocument();

diff --git a/mlflow/server/js/src/model-registry/components/ModelVersionTable.tsx b/mlflow/server/js/src/model-registry/components/ModelVersionTable.tsx
@@ -57,7 +57,7 @@ type ModelVersionTableProps = {
   modelEntity?: ModelEntity;
   onMetadataUpdated: () => void;
   usingNextModelsUI: boolean;
-  aliases?: ModelAliasMap
+  aliases?: ModelAliasMap;
 };
 
 type ModelVersionColumnDef = ColumnDef<ModelVersionInfoEntity> & {
@@ -83,7 +83,7 @@ export const ModelVersionTable = ({
   modelEntity,
   onMetadataUpdated,
   usingNextModelsUI,
-  aliases
+  aliases,
 }: ModelVersionTableProps) => {
   const aliasesByVersion = useMemo(() => {
     const result: Record<string, string[]> = {};
@@ -92,7 +92,7 @@ export const ModelVersionTable = ({
         result[version] = [];
       }
       result[version].push(alias);
-    })
+    });
     return result;
   }, [aliases]);
   const versions = useMemo(

diff --git a/mlflow/server/js/src/shared/web-shared/snippet/index.tsx b/mlflow/server/js/src/shared/web-shared/snippet/index.tsx
@@ -1,7 +1,9 @@
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import python from 'react-syntax-highlighter/dist/cjs/languages/prism/python';
+import json from 'react-syntax-highlighter/dist/cjs/languages/prism/json';
 
 SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('json', json);
 
 import duotoneDarkStyle from './theme/databricks-duotone-dark';
 import lightStyle from './theme/databricks-light';
@@ -22,7 +24,7 @@ const themesStyles: Record<CodeSnippetTheme, any> = {
   duotoneDark: duotoneDarkStyle,
 };
 
-export type CodeSnippetLanguage = 'python';
+export type CodeSnippetLanguage = 'python' | 'json';
 
 export interface CodeSnippetProps {
   /**