Handling disableUnsafeCalls flag from options that would disable Run button for unsafe HTTP method calls

src/components/Operation/Operation.tsx

@@ -213,6 +213,7 @@ export class Operation extends React.Component<OperationProps, OperationState> {
                     response={this.state.response}
                     pendingRequest={this.state.pendingRequest}
                     handleApiCall={this.handleApiCall}
+                    disableUnsafeCalls={options.disableUnsafeCalls}
                   />
                 </TabPanel>
                 <TabPanel key={'Examples panel'}>

src/components/TryOut/Body.tsx

@@ -49,8 +49,8 @@ export const Body = ({
           cursor={'pointer'}
           onChange={({ target: { value } }) => setIsFormData(value === 'form-data')}
         >
-          <option value="form-data">Form</option>
           <option value="raw-json">JSON</option>
+          <option value="form-data">Form</option>
         </Dropdown>
       </SectionHeader>
       <>

src/components/TryOut/TryOut.tsx

@@ -22,11 +22,14 @@ enum RequestObjectType {
   BODY = 'body',
 }
 
+const UNSAFE_HTTP_METHODS = ['put', 'patch', 'post', 'delete'];
+
 interface TryOutProps {
   operation: OperationModel;
   response: any;
   pendingRequest: boolean;
   handleApiCall: (request: any) => void;
+  disableUnsafeCalls: boolean;
 }
 
 export type RequestBodyPayloadType = string | number | boolean | object | null;
@@ -54,15 +57,15 @@ const getInitialBodyByOperation = (operation: OperationModel): RequestBodyPayloa
 };
 
 export const TryOut = observer(
-  ({ operation, response, pendingRequest, handleApiCall }: TryOutProps) => {
+  ({ operation, response, pendingRequest, handleApiCall, disableUnsafeCalls }: TryOutProps) => {
     const [request, setRequest] = React.useState({
       queryParams: {},
       pathParams: {},
       cookieParams: {},
       header: {},
       body: getInitialBodyByOperation(operation),
     });
-    const [isFormData, setIsFormData] = React.useState(true);
+    const [isFormData, setIsFormData] = React.useState(false);
     const [error, setError] = React.useState(undefined);
     const [showError, setShowError] = React.useState(false);
     const [requiredFields, setRequiredFields] = React.useState<RequiredField[]>(
@@ -355,7 +358,11 @@ export const TryOut = observer(
           showResponseSamples={false}
         />
         <RunButton
-          disabled={pendingRequest || (isFormData && anyInvalidRequiredField(requiredFields))}
+          disabled={
+            (disableUnsafeCalls && UNSAFE_HTTP_METHODS.includes(operation.httpVerb)) ||
+            pendingRequest ||
+            (isFormData && anyInvalidRequiredField(requiredFields))
+          }
           onClick={handleRunClick}
         >{`Run`}</RunButton>
       </>

src/services/RedocNormalizedOptions.ts

@@ -53,6 +53,7 @@ export interface RedocRawOptions {
   ignoreNamedSchemas?: string[] | string;
   hideSchemaPattern?: boolean;
   generatedPayloadSamplesMaxDepth?: number;
+  disableUnsafeCalls?: boolean | string;
 }
 
 export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
@@ -245,6 +246,7 @@ export class RedocNormalizedOptions {
   ignoreNamedSchemas: Set<string>;
   hideSchemaPattern: boolean;
   generatedPayloadSamplesMaxDepth: number;
+  disableUnsafeCalls: boolean;
 
   constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
     raw = { ...defaults, ...raw };
@@ -315,5 +317,6 @@ export class RedocNormalizedOptions {
       RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth(
         raw.generatedPayloadSamplesMaxDepth,
       );
+    this.disableUnsafeCalls = argValueToBoolean(raw.disableUnsafeCalls);
   }
 }