SWI-4827 Update Prism and Add read-only Label (#38)

* update prism syntax highlighting * add label for `read-only` property * snapshots
Bandwidth · Dec 5, 2024 · e396aae · e396aae
1 parent 4980aea
commit e396aae
Show file tree

Hide file tree

Showing 8 changed files with 405 additions and 279 deletions.
diff --git a/src/common-elements/PrismDiv.tsx b/src/common-elements/PrismDiv.tsx
diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
@@ -87,6 +87,16 @@ export const RequiredLabel = styled(FieldLabel).attrs({
   line-height: 1;
 `;
 
+export const ReadOnlyLabel = styled(FieldLabel).attrs({
+  as: 'div',
+})`
+  color: ${props => props.theme.schema.readOnlyLabelColor};
+  font-size: ${props => props.theme.schema.labelsTextSize};
+  font-weight: normal;
+  margin-left: 20px;
+  line-height: 1;
+`;
+
 export const PropertyLabel = styled(RequiredLabel)`
   color: ${props => props.theme.colors.primary.light};
 `;

diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 import {
   ClickablePropertyNameCell,
   PropertyLabel,
+  ReadOnlyLabel,
   RequiredLabel,
 } from '../../common-elements/fields';
 import { FieldDetails } from './FieldDetails';
@@ -52,6 +53,7 @@ export class Field extends React.Component<FieldProps> {
     const { className = '', field, isLast, expandByDefault } = this.props;
     const { name, deprecated, required, kind } = field;
     const withSubSchema = !field.schema.isPrimitive && !field.schema.isCircular;
+    const readOnly = field.schema?.readOnly;
 
     const expanded = field.expanded === undefined ? expandByDefault : field.expanded;
 
@@ -60,6 +62,7 @@ export class Field extends React.Component<FieldProps> {
         {kind === 'additionalProperties' && <PropertyLabel>additional property</PropertyLabel>}
         {kind === 'patternProperties' && <PropertyLabel>pattern property</PropertyLabel>}
         {required && <RequiredLabel>required</RequiredLabel>}
+        {readOnly && <ReadOnlyLabel>read-only</ReadOnlyLabel>}
       </>
     );
 

diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
diff --git a/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap b/src/components/__tests__/__snapshots__/FieldDetails.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
     >
        
       <span
-        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+        class="sc-kpDqfm sc-ikkxIA cGRfjn bPXQUO"
       >
           
       </span>
@@ -39,7 +39,7 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
     </span>
      
     <span
-      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn field-example"
+      class="sc-kpDqfm sc-fPXMVe cGRfjn hvfdZk field-example"
     >
       []
     </span>
@@ -53,14 +53,14 @@ exports[`FieldDetailsComponent renders correctly 1`] = `
     </span>
      
     <span
-      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn field-example"
+      class="sc-kpDqfm sc-fPXMVe cGRfjn hvfdZk field-example"
     >
       "example"
     </span>
   </div>
   <div>
     <div
-      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+      class="sc-kdBSHD sc-uVWWZ iOlzdo cdRLuO"
     >
       <p>
         test description
@@ -95,7 +95,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
     >
        
       <span
-        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+        class="sc-kpDqfm sc-ikkxIA cGRfjn bPXQUO"
       >
           
       </span>
@@ -109,7 +109,7 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
     </span>
      
     <span
-      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn field-example"
+      class="sc-kpDqfm sc-fPXMVe cGRfjn hvfdZk field-example"
     >
       {"properties":{}}
     </span>
@@ -123,14 +123,14 @@ exports[`FieldDetailsComponent renders correctly when default value is object in
     </span>
      
     <span
-      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn field-example"
+      class="sc-kpDqfm sc-fPXMVe cGRfjn hvfdZk field-example"
     >
       "example"
     </span>
   </div>
   <div>
     <div
-      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+      class="sc-kdBSHD sc-uVWWZ iOlzdo cdRLuO"
     >
       <p>
         test description
@@ -165,17 +165,17 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty
     >
        
       <span
-        class="sc-kpDqfm sc-gFqAkR cGRfjn fYEICH"
+        class="sc-kpDqfm sc-ikkxIA cGRfjn bPXQUO"
       >
           
       </span>
     </span>
     <span
-      class="sc-kpDqfm sc-dAlyuH sc-dxcDKg cGRfjn gHomYR gXntsr"
+      class="sc-kpDqfm sc-dAlyuH sc-gvZAcH cGRfjn gHomYR eXivNJ"
     >
       [
       <span
-        class="sc-kpDqfm sc-eDPEul cGRfjn cCKYVD field-pattern"
+        class="sc-kpDqfm sc-eldPxv cGRfjn beMlYF field-pattern"
       >
         ^see regex[0-9]$
       </span>
@@ -191,14 +191,14 @@ exports[`FieldDetailsComponent renders correctly when field items have string ty
     </span>
      
     <span
-      class="sc-kpDqfm sc-eldPxv cGRfjn ehWiAn field-example"
+      class="sc-kpDqfm sc-fPXMVe cGRfjn hvfdZk field-example"
     >
       "example"
     </span>
   </div>
   <div>
     <div
-      class="sc-lcIPJg sc-hknOHE gBHqkN jFBMaE"
+      class="sc-kdBSHD sc-uVWWZ iOlzdo cdRLuO"
     >
       <p>
         test description

diff --git a/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap b/src/components/__tests__/__snapshots__/OneOfSchema.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`Components SchemaView OneOf deprecated should match snapshot 1`] = `
        
       <div>
         <div
-          class="sc-eeDRCY sc-eBMEME gTGgei fbXBig"
+          class="sc-eeDRCY sc-eBMEME kNSrQS fbXBig"
         />
       </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up @@
           <div>
             <div
-              class="sc-eeDRCY sc-eBMEME gTGgei fbXBig"
+              class="sc-eeDRCY sc-eBMEME kNSrQS fbXBig"
             />
           </div>
         </div>
@@ Expand Down @@