Hide delete button for SSO MFA devices in account settings

An SSO device cannot be deleted and will fail if you try to delete. This
will hide the button to prevent any confusion

web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.story.tsx

@@ -111,4 +111,13 @@ const devices: MfaDevice[] = [
     type: 'webauthn',
     usage: 'passwordless',
   },
+  {
+    id: '5',
+    description: 'sso provider',
+    name: 'okta',
+    registeredDate: new Date(1612493852000),
+    lastUsedDate: new Date(1614481052000),
+    type: 'sso',
+    usage: 'mfa',
+  },
 ];

web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.test.tsx

@@ -45,6 +45,18 @@ const devices: MfaDevice[] = [
   },
 ];
 
+const ssoDevice: MfaDevice[] = [
+  {
+    id: '1',
+    description: 'SSO Provider',
+    name: 'okta',
+    registeredDate: new Date(1628799417000),
+    lastUsedDate: new Date(1628799417000),
+    type: 'sso',
+    usage: 'mfa',
+  },
+];
+
 function getTableCellContents() {
   const [header, ...rows] = screen.getAllByRole('row');
   return {
@@ -77,6 +89,23 @@ test('renders devices', () => {
   });
 });
 
+test('does not render delete button on SSO devices', () => {
+  render(
+    <AuthDeviceList
+      header="Header"
+      deviceTypeColumnName="Passkey Type"
+      devices={ssoDevice}
+    />
+  );
+  expect(screen.getByText('Header')).toBeInTheDocument();
+  expect(getTableCellContents()).toEqual({
+    header: ['Passkey Type', 'Nickname', 'Added', 'Last Used', 'Actions'],
+    rows: [['SSO Provider', 'okta', '2021-08-12', '2021-08-12', '']],
+  });
+
+  expect(screen.queryByTestId('delete-device')).not.toBeInTheDocument();
+});
+
 test('renders no devices', () => {
   render(
     <AuthDeviceList

web/packages/teleport/src/Account/ManageDevices/AuthDeviceList/AuthDeviceList.tsx

@@ -72,9 +72,14 @@ export function AuthDeviceList({
               {
                 altKey: 'remove-btn',
                 headerText: 'Actions',
-                render: device => (
-                  <RemoveCell onRemove={() => onRemove(device)} />
-                ),
+                render: device => {
+                  if (device.type === 'sso') {
+                    // return empty cell because we don't want to delete SSO devices
+                    // but also we want the row highlight to still work on this dummy cell
+                    return <Cell />;
+                  }
+                  return <RemoveCell onRemove={() => onRemove(device)} />;
+                },
               },
             ]}
             data={devices}
@@ -97,7 +102,7 @@ interface RemoveCellProps {
 
 function RemoveCell({ onRemove }: RemoveCellProps) {
   return (
-    <Cell>
+    <Cell data-testid="delete-device">
       <ButtonWarningBorder title="Delete" p={2} onClick={onRemove}>
         <Icon.Trash size="small" />
       </ButtonWarningBorder>

web/packages/teleport/src/services/mfa/makeMfaDevice.ts

@@ -16,7 +16,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { MfaDevice } from './types';
+import { DeviceType, MfaDevice } from './types';
+
+function getType(jsonType: string): DeviceType {
+  if (jsonType === 'TOTP') {
+    return 'totp';
+  }
+  if (jsonType === 'SSO') {
+    return 'sso';
+  }
+  return 'webauthn';
+}
 
 export default function makeMfaDevice(json): MfaDevice {
   const { id, name, lastUsed, addedAt, residentKey } = json;
@@ -32,7 +42,7 @@ export default function makeMfaDevice(json): MfaDevice {
     description = 'unknown device';
   }
 
-  const type = json.type === 'TOTP' ? 'totp' : 'webauthn';
+  const type = getType(json.type);
   const usage = residentKey ? 'passwordless' : 'mfa';
 
   return {

web/packages/teleport/src/services/mfa/types.ts

@@ -45,7 +45,7 @@ export type SaveNewHardwareDeviceRequest = {
   credential: Credential;
 };
 
-export type DeviceType = 'totp' | 'webauthn';
+export type DeviceType = 'totp' | 'webauthn' | 'sso';
 
 // MfaAuthnResponse is a response to a MFA device challenge.
 export type MfaAuthnResponse =