cdapio · GnsP · May 13, 2024
diff --git a/app/cdap/components/AbstractWidget/SecureKey/SecureKeyTextarea.js b/app/cdap/components/AbstractWidget/SecureKey/SecureKeyTextarea.js
@@ -20,7 +20,7 @@ import SecureKey from 'components/AbstractWidget/SecureKey';
 import { WIDGET_PROPTYPES } from 'components/AbstractWidget/constants';
 
 export default function SecureKeyTextarea(props) {
-  return <SecureKey inputTextType="textarea" {...props} />;
+  return <SecureKey inputTextType="none" {...props} />;
 }
 
 SecureKeyTextarea.propTypes = WIDGET_PROPTYPES;

diff --git a/app/cdap/components/AbstractWidget/SecureKey/index.js b/app/cdap/components/AbstractWidget/SecureKey/index.js
@@ -15,6 +15,7 @@
  */
 
 import React, { Component } from 'react';
+import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { DEFAULT_WIDGET_PROPS } from 'components/AbstractWidget';
 import { MySecureKeyApi } from 'api/securekey';
@@ -27,14 +28,24 @@ import { SECURE_KEY_PREFIX, SECURE_KEY_SUFFIX, SYSTEM_NAMESPACE } from 'services
 import Mousetrap from 'mousetrap';
 import { Observable } from 'rxjs/Observable';
 import { WIDGET_PROPTYPES } from 'components/AbstractWidget/constants';
+import { IconButton } from '@material-ui/core';
+import ClearIcon from '@material-ui/icons/Clear';
 require('./SecureKeyTextarea.scss');
 
 const PREFIX = 'features.AbstractWidget.SecureKeyTextarea';
 
+const NonEditableTextWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`;
+
 export default class SecureKeyTextarea extends Component {
   static propTypes = {
     ...WIDGET_PROPTYPES,
-    inputTextType: PropTypes.oneOf(['textarea', 'text', 'password']),
+    inputTextType: PropTypes.oneOf(['textarea', 'text', 'password', 'none']),
     dataCy: PropTypes.string,
     dataTestId: PropTypes.string,
   };
@@ -146,6 +157,13 @@ export default class SecureKeyTextarea extends Component {
     }
   };
 
+  handleClearInput = (e) => {
+    e.stopPropagation();
+    if (this.props.onChange) {
+      this.props.onChange('');
+    }
+  };
+
   renderCustomEntry = () => {
     const helperText = (
       <div className="helper-text text-center" onClick={this.toggleCustomEntry}>
@@ -215,6 +233,25 @@ export default class SecureKeyTextarea extends Component {
   };
 
   renderInput = () => {
+    if (this.props.inputTextType === 'none') {
+      return (
+        <NonEditableTextWrapper
+          className="form-control raw-text-input"
+          onClick={this.toggleExpand}
+          data-cy={this.props.dataCy}
+          data-testid={this.props.dataTestId}
+          {...this.props.widgetProps}
+        >
+          <span>{this.props.value}</span>
+          {this.props.value && (
+            <IconButton aria-label="clear" onClick={this.handleClearInput}>
+              <ClearIcon fontSize="small" />
+            </IconButton>
+          )}
+        </NonEditableTextWrapper>
+      );
+    }
+
     if (this.props.inputTextType === 'textarea') {
       return (
         <textarea

diff --git a/app/cdap/components/NamespaceAdmin/AdminTabs.tsx b/app/cdap/components/NamespaceAdmin/AdminTabs.tsx
@@ -30,6 +30,7 @@ import TabContext from '@material-ui/lab/TabContext';
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 import ServiceAccounts from './ServiceAccounts';
+import SecureKeysTab from './SecureKeysTab';
 
 const StyledTabs = styled(Tabs)`
   border-bottom: 1px solid #e8e8e8;
@@ -95,6 +96,11 @@ export const AdminTabs = () => {
               value={`${baseNSPath}/connections`}
             />
             <LinkTab label="Drivers" to={`${baseNSPath}/drivers`} value={`${baseNSPath}/drivers`} />
+            <LinkTab
+              label="Secure keys"
+              to={`${baseNSPath}/securekeys`}
+              value={`${baseNSPath}/securekeys`}
+            />
             {namespacedServiceAccountsEnabled && (
               <LinkTab
                 label="Service Accounts"
@@ -119,6 +125,7 @@ export const AdminTabs = () => {
           <Route exact path={`${basepath}/connections`} component={Connections} />
           <Route exact path={`${basepath}/drivers`} component={Drivers} />
           <Route exact path={`${basepath}/scm`} component={SourceControlManagement} />
+          <Route exact path={`${basepath}/securekeys`} component={SecureKeysTab} />
           {namespacedServiceAccountsEnabled && (
             <Route exact path={`${basepath}/serviceaccounts`} component={ServiceAccounts} />
           )}

diff --git a/app/cdap/components/NamespaceAdmin/SecureKeysTab.tsx b/app/cdap/components/NamespaceAdmin/SecureKeysTab.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright © 2024 Cask Data, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import React, { useState } from 'react';
+import SecureKeysView from 'components/SecureKeys';
+
+export default function SecureKeysTab() {
+  return <SecureKeysView renderInTab={true} />;
+}
diff --git a/app/cdap/components/SecureKeys/SecureKeyList/index.tsx b/app/cdap/components/SecureKeys/SecureKeyList/index.tsx
@@ -23,30 +23,11 @@ import Paper from '@material-ui/core/Paper';
 import SecureKeyActionButtons from 'components/SecureKeys/SecureKeyList/SecureKeyActionButtons';
 import SecureKeyCreate from 'components/SecureKeys/SecureKeyCreate';
 import SecureKeySearch from 'components/SecureKeys/SecureKeySearch';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-
-export const CustomTableCell = withStyles((theme) => ({
-  head: {
-    backgroundColor: theme.palette.grey['300'],
-    color: theme.palette.common.white,
-    padding: '5px 10px',
-    fontSize: 13,
-    '&:first-of-type': {
-      borderRight: `1px solid ${theme.palette.grey['500']}`,
-    },
-  },
-  body: {
-    padding: '5px 10px',
-    fontSize: 13,
-    '&:first-of-type': {
-      borderRight: `1px solid ${theme.palette.grey['500']}`,
-    },
-  },
-}))(TableCell);
+import Table from 'components/shared/Table';
+import TableHead from 'components/shared/Table/TableHeader';
+import TableRow from 'components/shared/Table/TableRow';
+import TableCell from 'components/shared/Table/TableCell';
+import TableBody from 'components/shared/Table/TableBody';
 
 const styles = (theme): StyleRules => {
   return {
@@ -58,13 +39,12 @@ const styles = (theme): StyleRules => {
       display: 'grid',
       alignItems: 'center',
       gridTemplateColumns: 'repeat(7, 1fr)',
+      gridTemplateRows: '40px',
     },
     addSecureKeyButton: {
       gridRow: '1',
       gridColumnStart: '1',
       textTransform: 'none',
-      padding: '7px',
-      fontSize: '13px',
     },
     secureKeySearch: {
       gridRow: '1',
@@ -78,27 +58,16 @@ const styles = (theme): StyleRules => {
     },
     row: {
       height: 40,
-      '&:nth-of-type(odd)': {
-        backgroundColor: theme.palette.grey['600'],
-      },
       cursor: 'pointer',
       hover: {
         cursor: 'pointer',
       },
     },
-    nameCell: {
-      width: '30%',
-    },
-    descriptionCell: {
-      width: '60%',
-    },
-    actionButtonsCell: {
-      width: '10%',
-    },
   };
 };
 
 interface ISecureKeyListProps extends WithStyles<typeof styles> {
+  renderInTab?: boolean;
   state: any;
   alertSuccess: () => void;
   alertFailure: () => void;
@@ -107,6 +76,7 @@ interface ISecureKeyListProps extends WithStyles<typeof styles> {
 }
 
 const SecureKeyListView: React.FC<ISecureKeyListProps> = ({
+  renderInTab,
   classes,
   state,
   alertSuccess,
@@ -137,7 +107,7 @@ const SecureKeyListView: React.FC<ISecureKeyListProps> = ({
 
   return (
     <div>
-      <div className={classes.secureKeysTitle}>Secure keys</div>
+      {!renderInTab && <div className={classes.secureKeysTitle}>Secure keys</div>}
       <div className={classes.secureKeyManager}>
         <Button
           className={classes.addSecureKeyButton}
@@ -155,12 +125,12 @@ const SecureKeyListView: React.FC<ISecureKeyListProps> = ({
       </div>
 
       <Paper className={classes.root}>
-        <Table>
+        <Table columnTemplate="minmax(20rem, 1fr) 2fr 50px">
           <TableHead>
             <TableRow className={classes.row}>
-              <CustomTableCell>Key</CustomTableCell>
-              <CustomTableCell>Description</CustomTableCell>
-              <CustomTableCell></CustomTableCell>
+              <TableCell>Key</TableCell>
+              <TableCell>Description</TableCell>
+              <TableCell></TableCell>
             </TableRow>
           </TableHead>
           <TableBody data-cy="secure-key-list" data-testid="secure-key-list">
@@ -170,22 +140,19 @@ const SecureKeyListView: React.FC<ISecureKeyListProps> = ({
                 <TableRow
                   key={keyMetadata.get('name')}
                   hover
-                  selected
                   className={classes.row}
                   onClick={() => openEditDialog(keyIndex)}
                   data-cy={`secure-key-row-${keyMetadata.get('name')}`}
                   data-testid={`secure-key-row-${keyMetadata.get('name')}`}
                 >
-                  <CustomTableCell className={classes.nameCell}>{keyID}</CustomTableCell>
-                  <CustomTableCell className={classes.descriptionCell}>
-                    {keyMetadata.get('description')}
-                  </CustomTableCell>
-                  <CustomTableCell className={classes.actionButtonsCell}>
+                  <TableCell>{keyID}</TableCell>
+                  <TableCell>{keyMetadata.get('description')}</TableCell>
+                  <TableCell>
                     <SecureKeyActionButtons
                       openDeleteDialog={openDeleteDialog}
                       keyIndex={keyIndex}
                     />
-                  </CustomTableCell>
+                  </TableCell>
                 </TableRow>
               );
             })}

diff --git a/app/cdap/components/SecureKeys/index.tsx b/app/cdap/components/SecureKeys/index.tsx
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2019-2020 Cask Data, Inc.
+ * Copyright © 2019-2024 Cask Data, Inc.
  *
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
  * use this file except in compliance with the License. You may obtain a copy of
@@ -14,13 +14,13 @@
  * the License.
  */
 
-import * as React from 'react';
+import React, { useEffect, useReducer } from 'react';
+import styled from 'styled-components';
 
 import { List, fromJS } from 'immutable';
 import withStyles, { StyleRules, WithStyles } from '@material-ui/core/styles/withStyles';
 
 import Alert from 'components/shared/Alert';
-import If from 'components/shared/If';
 import LoadingSVGCentered from 'components/shared/LoadingSVGCentered';
 import { MySecureKeyApi } from 'api/securekey';
 import SecureKeyDelete from 'components/SecureKeys/SecureKeyDelete';
@@ -70,22 +70,22 @@ export function reducer(state, action) {
   }
 }
 
-const styles = (): StyleRules => {
-  return {
-    content: {
-      padding: '50px',
-    },
-  };
-};
+const ContentDiv = styled.div`
+  padding: ${({ renderInTab }) => (renderInTab ? '0px' : '50px')};
+`;
+
+interface ISecureKeyViewProps {
+  renderInTab?: boolean;
+}
 
-const SecureKeysView: React.FC<WithStyles<typeof styles>> = ({ classes }) => {
-  const [state, dispatch] = React.useReducer(reducer, initialState);
+const SecureKeysView: React.FC<ISecureKeyViewProps> = ({ renderInTab }) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
 
   const { secureKeyStatus, editMode, deleteMode, loading } = state;
 
   const namespace = getCurrentNamespace();
 
-  React.useEffect(() => {
+  useEffect(() => {
     fetchSecureKeys();
   }, []);
 
@@ -141,7 +141,7 @@ const SecureKeysView: React.FC<WithStyles<typeof styles>> = ({ classes }) => {
   };
 
   return (
-    <div className="container">
+    <div className={!renderInTab && 'container'}>
       <Alert
         message={'saved successfully'}
         showAlert={secureKeyStatus === SecureKeyStatus.Success}
@@ -155,41 +155,39 @@ const SecureKeysView: React.FC<WithStyles<typeof styles>> = ({ classes }) => {
         onClose={onAlertClose}
       />
 
-      <If condition={loading}>
-        <LoadingSVGCentered showFullPage />
-      </If>
-
-      <If condition={!loading}>
-        <div className={classes.content}>
+      {loading && <LoadingSVGCentered showFullPage />}
+      {!loading && (
+        <ContentDiv renderInTab={renderInTab}>
           <SecureKeyList
+            renderInTab={renderInTab}
             state={state}
             alertSuccess={alertSuccess}
             alertFailure={alertFailure}
             openDeleteDialog={openDeleteDialog}
             openEditDialog={openEditDialog}
           />
-        </div>
-      </If>
+        </ContentDiv>
+      )}
 
-      <If condition={editMode}>
+      {editMode && (
         <SecureKeyEdit
           state={state}
           open={editMode}
           handleClose={onEditDialogClose}
           alertSuccess={alertSuccess}
         />
-      </If>
-      <If condition={deleteMode}>
+      )}
+
+      {deleteMode && (
         <SecureKeyDelete
           state={state}
           open={deleteMode}
           handleClose={onDeleteDialogClose}
           alertSuccess={alertSuccess}
         />
-      </If>
+      )}
     </div>
   );
 };
 
-const SecureKeys = withStyles(styles)(SecureKeysView);
-export default SecureKeys;
+export default SecureKeysView;