refactor(saml): keep the highlighted XML editor, pin it with language

Swapping the IdP metadata field to InputGroup lost syntax highlighting,
which is the reason SAML used ValueEditor in the first place: an
administrator pastes a metadata document and has to be able to read it.
Reverted, so SAML keeps the editor it has on main.

`onlyOneLang` goes instead. A caller that pins `language` has nothing to
switch to, so pinning now hides the format row and the copy control,
which is all that boolean ever did. The SAML call site loses one prop
rather than gaining one.

The InvalidJson story went with it: the warning renders against the
active format label, so a pinned story has nowhere to show it. The
browser test added in this PR covers that path instead.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/ValueEditor.stories.tsx

@@ -51,7 +51,6 @@ export const Json: Story = {
   render: () => (
     <Interactive
       label='Value'
-      language='json'
       initialValue='{ "colour": "blue", "size": 12 }'
     />
   ),
@@ -76,13 +75,6 @@ export const ValueArrivesAfterMount: Story = {
   render: () => <LateLoading />,
 }
 
-// Invalid JSON surfaces a warning against the active language label.
-export const InvalidJson: Story = {
-  render: () => (
-    <Interactive label='Value' language='json' initialValue='{ "colour": ' />
-  ),
-}
-
 export const CodeMedium: Story = {
   render: () => (
     <Interactive
@@ -100,6 +92,18 @@ export const Disabled: Story = {
   ),
 }
 
+// A pinned format hides the row, since there is nothing to switch to. This is
+// what the SAML IdP metadata field renders.
+export const XmlOnly: Story = {
+  render: () => (
+    <Interactive
+      label='IdP metadata XML'
+      language='xml'
+      initialValue={'<EntityDescriptor entityID="https://example.com" />'}
+    />
+  ),
+}
+
 // The multivariate control value carries a weight chip and a tooltip, so it is
 // the widest label this component gets. Label and format buttons share one flex
 // row, so they compress rather than overlap.

frontend/web/components/ValueEditor/ValueEditor.tsx

@@ -76,7 +76,9 @@ const ValueEditor: FC<ValueEditorProps> = ({
     setLanguage(next)
   }
 
-  const showControls = !disabled
+  // A caller that pins the format has nothing to switch, so the row goes, and
+  // copy goes with it as it always has.
+  const showControls = !disabled && !languageProp
 
   return (
     <div

frontend/web/components/pages/organisation-settings/tabs/sso/saml/modals/CreateSAML.tsx

@@ -3,6 +3,7 @@ import FieldLabel from 'components/base/forms/FieldLabel'
 import InputGroup from 'components/base/forms/InputGroup'
 import Utils from 'common/utils/utils'
 import Switch from 'components/Switch'
+import ValueEditor from 'components/ValueEditor'
 import {
   useCreateSamlConfigurationMutation,
   useUpdateSamlConfigurationMutation,
@@ -15,6 +16,8 @@ import { Req } from 'common/types/requests'
 import ErrorMessage from 'components/ErrorMessage'
 import { getStore } from 'common/store'
 import XMLUpload from 'components/XMLUpload'
+import { IonIcon } from '@ionic/react'
+import { cloudDownloadOutline } from 'ionicons/icons'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
 import { AttributeName } from 'common/types/responses'
@@ -160,17 +163,30 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
             (data &&
               ((data.name && !data.idp_metadata_xml) ||
                 data.idp_metadata_xml))) && (
-            <InputGroup
-              title='IdP metadata XML'
-              textarea
-              className='full-width mb-0'
-              data-test='idpMetadataXml'
-              inputProps={{ name: 'idpMetadataXml' }}
-              value={metadataXml || data?.idp_metadata_xml || ''}
-              onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
-                setMetadataXml(Utils.safeParseEventValue(event))
+            <ValueEditor
+              label='IdP metadata XML'
+              labelAfter={
+                data?.idp_metadata_xml && (
+                  <div className='clickable' onClick={downloadIDPMetadata}>
+                    <Tooltip
+                      title={
+                        <IonIcon
+                          className='icon-action'
+                          icon={cloudDownloadOutline}
+                          style={{ fontSize: '18px' }}
+                        />
+                      }
+                      place='right'
+                    >
+                      Download IDP Metadata
+                    </Tooltip>
+                  </div>
+                )
               }
-              placeholder="e.g. '<xml>time<xml>' "
+              className='full-width'
+              value={metadataXml || data?.idp_metadata_xml}
+              onChange={setMetadataXml}
+              language='xml'
             />
           )}
           <Row className='or-divider my-1'>
@@ -204,15 +220,6 @@ const CreateSAML: FC<CreateSAML> = ({ organisationId, samlName }) => {
         </div>
       )}
       <div className='text-right py-2'>
-        {!!data?.idp_metadata_xml && (
-          <Button
-            theme='secondary'
-            onClick={downloadIDPMetadata}
-            className='mr-2'
-          >
-            Download IdP Metadata
-          </Button>
-        )}
         {isEdit && (
           <Button
             disabled={isLoading}