ref(js): Convert projectKeys/KeyRow to a FC (#39209)

static/app/views/settings/project/projectKeys/list/keyRow.tsx

@@ -1,4 +1,3 @@
-import {Component} from 'react';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
 
@@ -26,85 +25,70 @@ type Props = {
   projectId: string;
 } & Pick<RouteComponentProps<{}, {}>, 'routes' | 'location' | 'params'>;
 
-class KeyRow extends Component<Props> {
-  handleRemove = () => {
-    const {data, onRemove} = this.props;
-    onRemove(data);
-  };
+function KeyRow({data, onRemove, onToggle, access, routes, location, params}: Props) {
+  const handleEnable = () => onToggle(true, data);
+  const handleDisable = () => onToggle(false, data);
 
-  handleEnable = () => {
-    const {onToggle, data} = this.props;
-    onToggle(true, data);
-  };
+  const editUrl = recreateRoute(`${data.id}/`, {routes, params, location});
+  const controlActive = access.has('project:write');
 
-  handleDisable = () => {
-    const {onToggle, data} = this.props;
-    onToggle(false, data);
-  };
-
-  render() {
-    const {access, data, routes, location, params} = this.props;
-    const editUrl = recreateRoute(`${data.id}/`, {routes, params, location});
-    const controlActive = access.has('project:write');
-
-    const controls = [
-      <Button key="edit" to={editUrl} size="sm">
-        {t('Configure')}
-      </Button>,
+  const controls = [
+    <Button key="edit" to={editUrl} size="sm">
+      {t('Configure')}
+    </Button>,
+    <Button
+      key="toggle"
+      size="sm"
+      onClick={data.isActive ? handleDisable : handleEnable}
+      disabled={!controlActive}
+    >
+      {data.isActive ? t('Disable') : t('Enable')}
+    </Button>,
+    <Confirm
+      key="remove"
+      priority="danger"
+      disabled={!controlActive}
+      onConfirm={() => onRemove(data)}
+      confirmText={t('Remove Key')}
+      message={t(
+        'Are you sure you want to remove this key? This action is irreversible.'
+      )}
+    >
       <Button
-        key="toggle"
         size="sm"
-        onClick={data.isActive ? this.handleDisable : this.handleEnable}
         disabled={!controlActive}
-      >
-        {data.isActive ? t('Disable') : t('Enable')}
-      </Button>,
-      <Confirm
-        key="remove"
-        priority="danger"
-        disabled={!controlActive}
-        onConfirm={this.handleRemove}
-        confirmText={t('Remove Key')}
-        message={t(
-          'Are you sure you want to remove this key? This action is irreversible.'
-        )}
-      >
-        <Button
-          size="sm"
-          disabled={!controlActive}
-          icon={<IconDelete />}
-          aria-label={t('Delete')}
-        />
-      </Confirm>,
-    ];
+        icon={<IconDelete />}
+        aria-label={t('Delete')}
+      />
+    </Confirm>,
+  ];
 
-    return (
-      <Panel>
-        <PanelHeader hasButtons>
-          <Title disabled={!data.isActive}>
-            <PanelHeaderLink to={editUrl}>{data.label}</PanelHeaderLink>
-            {!data.isActive && (
-              <small>
-                {' \u2014  '}
-                {t('Disabled')}
-              </small>
-            )}
-          </Title>
-          <Controls>
-            {controls.map((c, n) => (
-              <span key={n}> {c}</span>
-            ))}
-          </Controls>
-        </PanelHeader>
+  return (
+    <Panel>
+      <PanelHeader hasButtons>
+        <Title disabled={!data.isActive}>
+          <PanelHeaderLink to={editUrl}>{data.label}</PanelHeaderLink>
+          {!data.isActive && (
+            <small>
+              {' \u2014  '}
+              {t('Disabled')}
+            </small>
+          )}
+        </Title>
+        <Controls>
+          {controls.map((c, n) => (
+            <span key={n}> {c}</span>
+          ))}
+        </Controls>
+      </PanelHeader>
 
-        <StyledClippedBox clipHeight={300} defaultClipped btnText={t('Expand')}>
-          <StyledPanelBody disabled={!data.isActive}>
-            <ProjectKeyCredentials projectId={`${data.projectId}`} data={data} />
-          </StyledPanelBody>
-        </StyledClippedBox>
-      </Panel>
-    );
-  }
+      <StyledClippedBox clipHeight={300} defaultClipped btnText={t('Expand')}>
+        <StyledPanelBody disabled={!data.isActive}>
+          <ProjectKeyCredentials projectId={`${data.projectId}`} data={data} />
+        </StyledPanelBody>
+      </StyledClippedBox>
+    </Panel>
+  );
 }
 
 export default KeyRow;