App selections should update current auth states

packages/api-explorer/__tests__/AuthBox.test.jsx

@@ -14,6 +14,7 @@ const props = {
   open: false,
   operation: oas.operation('/or-security', 'post'),
   onChange: () => {},
+  onGroupChange: () => {},
   onSubmit: () => {},
   toggle: () => {},
 };
@@ -68,3 +69,30 @@ test('should display multiple securities', () => {
 
   expect(authBox.find('SecurityInput')).toHaveLength(2);
 });
+
+describe('group selection', () => {
+  const groupProps = {
+    group: 'someid',
+    groups: [
+      { id: '1230', name: 'someid' },
+      { id: '7000', name: 'anotherId' },
+    ],
+  };
+
+  it('should only display a single dropdown regardless of the number of securities', () => {
+    const comp = mount(<AuthBox {...props} {...groupProps} />);
+
+    expect(comp.find('select')).toHaveLength(1);
+  });
+
+  it('should update auth on changes', () => {
+    const onGroupChangeSpy = jest.fn();
+    const comp = mount(<AuthBox {...props} {...groupProps} onGroupChange={onGroupChangeSpy} />);
+
+    const select = comp.find('select');
+    select.instance().value = '7000';
+    select.simulate('change');
+
+    expect(onGroupChangeSpy).toHaveBeenCalledWith('7000', 'anotherId');
+  });
+});

packages/api-explorer/__tests__/lib/get-auth.test.js

@@ -16,6 +16,17 @@ test('should fetch all auths from the OAS files', () => {
   });
 });
 
+test('should fetch auths from selected app', () => {
+  const user = {
+    keys: [
+      { oauthScheme: '111', name: 'app-1' },
+      { oauthScheme: '222', name: 'app-2' },
+    ],
+  };
+
+  expect(getAuth(user, { 'api-setting': oas }, 'app-2').oauthScheme).toBe('222');
+});
+
 test('should not error if oas.components is not set', () => {
   expect(() => {
     getAuth({ oauthScheme: 'oauth', apiKeyScheme: 'apikey' }, { 'api-setting': {} });

packages/api-explorer/src/AuthBox.jsx

@@ -5,13 +5,47 @@ const { Operation } = require('oas');
 
 const SecurityInput = require('./SecurityInput');
 
-function Securities({ authInputRef, operation, onChange, oauth, auth, onSubmit }) {
+function GroupsList({ group, groups, onGroupChange }) {
+  function onSelect({ target }) {
+    onGroupChange(target.value, target.options[target.selectedIndex].text);
+  }
+
+  if (!groups || (groups && groups.length <= 1)) {
+    return false;
+  }
+
+  return (
+    <select onChange={onSelect} style={{ float: 'right' }} value={group}>
+      {groups.map(item => (
+        <option key={item.id} value={item.id}>
+          {item.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function Securities({
+  auth,
+  authInputRef,
+  group,
+  groups,
+  oauth,
+  onChange,
+  onGroupChange,
+  onSubmit,
+  operation,
+}) {
   const securityTypes = operation.prepareSecurity();
-  return Object.keys(securityTypes).map(type => {
+  return Object.keys(securityTypes).map((type, idx) => {
     const securities = securityTypes[type];
     return (
       <form key={type} onSubmit={onSubmit}>
-        <h3>{`${type} Auth`}</h3>
+        <h3>
+          {`${type} Auth`}
+          {/* Only show the groups list for the first security (assuming there are multiple). */}
+          {idx === 0 && <GroupsList group={group} groups={groups} onGroupChange={onGroupChange} />}
+        </h3>
         <div className="pad">
           <section>
             {
@@ -44,15 +78,18 @@ function Securities({ authInputRef, operation, onChange, oauth, auth, onSubmit }
 }
 
 function AuthBox({
+  auth,
   authInputRef,
-  operation,
-  onSubmit,
+  group,
+  groups,
+  needsAuth,
+  oauth,
   onChange,
+  onGroupChange,
+  onSubmit,
   open,
-  needsAuth,
+  operation,
   toggle,
-  oauth,
-  auth,
 }) {
   if (Object.keys(operation.prepareSecurity()).length === 0) return null;
 
@@ -67,8 +104,11 @@ function AuthBox({
           <Securities
             auth={auth}
             authInputRef={authInputRef}
+            group={group}
+            groups={groups}
             oauth={oauth}
             onChange={onChange}
+            onGroupChange={onGroupChange}
             onSubmit={e => {
               e.preventDefault();
               onSubmit();
@@ -87,7 +127,23 @@ function AuthBox({
   );
 }
 
+const commonProps = {
+  group: PropTypes.string,
+  groups: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  ),
+  onGroupChange: PropTypes.func.isRequired,
+};
+
+GroupsList.propTypes = {
+  ...commonProps,
+};
+
 AuthBox.propTypes = {
+  ...commonProps,
   auth: PropTypes.shape({}),
   authInputRef: PropTypes.func,
   needsAuth: PropTypes.bool,