fix(core): reset the auth in tryit to a supported scheme (stoplightio…

…#2366)

packages/elements-core/src/__fixtures__/operations/security-basic.ts

@@ -0,0 +1,24 @@
+import { IHttpOperation } from '@stoplight/types';
+
+export const httpOperation: IHttpOperation = {
+  id: '?http-operation-id?',
+  iid: 'GET token',
+  method: 'get',
+  path: '/token',
+  summary: 'Get Token',
+  responses: [],
+  security: [
+    [
+      {
+        id: '?http-security-basicKey?',
+        key: 'basicKey',
+        type: 'http',
+        scheme: 'basic',
+        description:
+          'Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.',
+      },
+    ],
+  ],
+};
+
+export default httpOperation;

packages/elements-core/src/__fixtures__/operations/security-bearer.ts

@@ -0,0 +1,25 @@
+import { IHttpOperation } from '@stoplight/types';
+
+export const httpOperation: IHttpOperation = {
+  id: '?http-operation-id?',
+  iid: 'GET todos',
+  method: 'get',
+  path: '/todos',
+  summary: 'List todos',
+  responses: [],
+  security: [
+    [
+      {
+        id: '?http-security-bearerKey?',
+        key: 'bearerKey',
+        type: 'http',
+        scheme: 'bearer',
+        description:
+          'Get access to data while protecting your account credentials. OAuth2 is also a safer and more secure way to give you access.',
+        bearerFormat: 'Authorization',
+      },
+    ],
+  ],
+};
+
+export default httpOperation;

packages/elements-core/src/components/TryIt/Auth/Auth.tsx

@@ -17,11 +17,23 @@ interface TryItAuthProps {
   value: HttpSecuritySchemeWithValues | undefined;
 }
 
+function getSupportedSecurityScheme(
+  value: HttpSecuritySchemeWithValues | undefined,
+  supportedSecuritySchemes: HttpSecurityScheme[],
+): [HttpSecurityScheme, string] {
+  // only keep the selected security scheme *if* the operation supports it (based on id)
+  if (value && supportedSecuritySchemes.some(s => value.scheme.id === s.id)) {
+    return [value.scheme, value.authValue ?? ''];
+  }
+
+  // otherwise, start over!
+  return [supportedSecuritySchemes[0], ''];
+}
+
 export const TryItAuth: React.FC<TryItAuthProps> = ({ operationSecurityScheme: operationAuth, onChange, value }) => {
   const operationSecurityArray = flatten(operationAuth);
   const filteredSecurityItems = operationSecurityArray.filter(scheme => securitySchemeKeys.includes(scheme?.type));
-
-  const securityScheme = value ? value.scheme : filteredSecurityItems[0];
+  const [securityScheme, authValue] = getSupportedSecurityScheme(value, filteredSecurityItems);
 
   const menuName = securityScheme ? getReadableSecurityName(securityScheme) : 'Security Scheme';
 
@@ -75,13 +87,7 @@ export const TryItAuth: React.FC<TryItAuthProps> = ({ operationSecurityScheme: o
       >
         Auth
       </Panel.Titlebar>
-      {
-        <SecuritySchemeComponent
-          scheme={value ? value.scheme : filteredSecurityItems[0]}
-          onChange={handleChange}
-          value={(value && value.authValue) ?? ''}
-        />
-      }
+      <SecuritySchemeComponent scheme={securityScheme} onChange={handleChange} value={authValue} />
     </Panel>
   );
 };

packages/elements-core/src/components/TryIt/TryIt.spec.tsx

@@ -23,6 +23,8 @@ import {
   emptySecurityOperation,
   singleSecurityOperation,
 } from '../../__fixtures__/operations/securedOperation';
+import { httpOperation as basicSecurityOperation } from '../../__fixtures__/operations/security-basic';
+import { httpOperation as bearerSecurityOperation } from '../../__fixtures__/operations/security-bearer';
 import { operation as basicOperation } from '../../__fixtures__/operations/simple-get';
 import { httpOperation as stringNumericEnumOperation } from '../../__fixtures__/operations/string-numeric-enums';
 import { httpOperation as urlEncodedPostOperation } from '../../__fixtures__/operations/urlencoded-post';
@@ -896,6 +898,47 @@ describe('TryIt', () => {
         APIKeyField = screen.getByLabelText('API Key');
         expect(APIKeyField).toHaveValue('123');
       });
+
+      it('invalidated unsupported security schemes between different operations', () => {
+        const { rerender } = render(<TryItWithPersistence httpOperation={basicSecurityOperation} />);
+
+        let usernameInput = screen.getByLabelText('Username');
+        let passwordInput = screen.getByLabelText('Password');
+
+        userEvent.type(usernameInput, 'user');
+        userEvent.type(passwordInput, 'password');
+
+        rerender(<TryItWithPersistence httpOperation={bearerSecurityOperation} />);
+
+        const tokenInput = screen.getByLabelText('Token');
+        userEvent.type(tokenInput, 'Bearer 1234');
+
+        rerender(<TryItWithPersistence httpOperation={basicSecurityOperation} />);
+
+        usernameInput = screen.getByLabelText('Username');
+        passwordInput = screen.getByLabelText('Password');
+
+        expect(usernameInput).toBeInTheDocument();
+        expect(passwordInput).toBeInTheDocument();
+      });
+
+      it('keep security schemes between different operations', () => {
+        const { rerender } = render(<TryItWithPersistence httpOperation={basicSecurityOperation} />);
+
+        let usernameInput = screen.getByLabelText('Username');
+        let passwordInput = screen.getByLabelText('Password');
+
+        userEvent.type(usernameInput, 'user');
+        userEvent.type(passwordInput, 'password');
+
+        rerender(<TryItWithPersistence httpOperation={putOperation} />);
+
+        usernameInput = screen.getByLabelText('Username');
+        passwordInput = screen.getByLabelText('Password');
+
+        expect(usernameInput).toHaveValue('user');
+        expect(passwordInput).toHaveValue('password');
+      });
     });
 
     describe('API Key component', () => {