Merge pull request #277 from mareklibra/html.ID.Oct27

Add HTML IDs
openshift-assisted · Oct 27, 2020 · 4e4c9b1 · 4e4c9b1
2 parents 04e3604 + c192aaa
commit 4e4c9b1
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 4 deletions.
diff --git a/src/components/clusterDetail/ClusterCredentials.tsx b/src/components/clusterDetail/ClusterCredentials.tsx
@@ -11,13 +11,15 @@ type ClusterCredentialsProps = {
   error: boolean;
   retry: () => void;
   credentials?: Credentials;
+  idPrefix?: string;
 };
 
 const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
   cluster,
   credentials,
   error,
   retry,
+  idPrefix = 'cluster-creds',
 }) => {
   let credentialsBody: JSX.Element;
   if (error) {
@@ -37,13 +39,15 @@ const ClusterCredentials: React.FC<ClusterCredentialsProps> = ({
                 iconPosition="right"
                 isInline
                 onClick={() => window.open(credentials.consoleUrl, '_blank', 'noopener')}
+                id={`${idPrefix}-link-console-url`}
               >
                 {credentials.consoleUrl}
               </Button>
               <br />
               <TroubleshootingOpenshiftConsoleButton
                 consoleUrl={credentials.consoleUrl}
                 cluster={cluster}
+                idPrefix={idPrefix}
               />
             </>
           }

diff --git a/src/components/clusterDetail/ClusterDetail.tsx b/src/components/clusterDetail/ClusterDetail.tsx
@@ -56,6 +56,8 @@ type ClusterDetailProps = {
   setResetClusterModalOpen: (isOpen: boolean) => void;
 };
 
+const getID = (suffix: string) => `cluster-detail-${suffix}`;
+
 const ClusterDetail: React.FC<ClusterDetailProps> = ({
   cluster,
   setCancelInstallationModalOpen,
@@ -119,9 +121,14 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({
               credentials={credentials}
               error={!!credentialsError}
               retry={fetchCredentials}
+              idPrefix={getID('cluster-creds')}
             />
           )}
-          <KubeconfigDownload status={cluster.status} clusterId={cluster.id} />
+          <KubeconfigDownload
+            status={cluster.status}
+            clusterId={cluster.id}
+            id={getID('button-download-kubeconfig')}
+          />
           <GridItem>
             <TextContent>
               <Text component="h2">Bare Metal Inventory</Text>
@@ -142,7 +149,10 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({
           </ToolbarButton>
         )}
         {cluster.status === 'error' && (
-          <ToolbarButton onClick={() => setResetClusterModalOpen(true)}>
+          <ToolbarButton
+            id={getID('button-reset-cluster')}
+            onClick={() => setResetClusterModalOpen(true)}
+          >
             Reset Cluster
           </ToolbarButton>
         )}
@@ -151,12 +161,14 @@ const ClusterDetail: React.FC<ClusterDetailProps> = ({
             isDisabled={!credentials || !!credentialsError}
             cluster={cluster}
             consoleUrl={credentials?.consoleUrl}
+            id={getID('button-launch-console')}
           />
         )}
         <ToolbarButton
           variant={ButtonVariant.link}
           component={(props) => <Link to={`${routeBasePath}/clusters`} {...props} />}
           isHidden={isSingleClusterMode()}
+          id={getID('button-back-to-all-clusters')}
         >
           Back to all clusters
         </ToolbarButton>

diff --git a/src/components/clusterDetail/ClusterInstallationError.tsx b/src/components/clusterDetail/ClusterInstallationError.tsx
@@ -19,6 +19,9 @@ type ClusterInstallationErrorProps = {
   title?: string;
   setResetClusterModalOpen: (isOpen: boolean) => void;
 };
+
+const getID = (suffix: string) => `cluster-install-error-${suffix}`;
+
 const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
   cluster,
   title = 'Cluster installation failed',
@@ -33,17 +36,22 @@ const ClusterInstallationError: React.FC<ClusterInstallationErrorProps> = ({
         title={title}
         actionLinks={
           <>
-            <AlertActionLink onClick={() => setResetClusterModalOpen(true)}>
+            <AlertActionLink
+              onClick={() => setResetClusterModalOpen(true)}
+              id={getID('button-reset-cluster')}
+            >
               Reset Cluster
             </AlertActionLink>
             <AlertActionLink
               onClick={() => downloadClusterInstallationLogs(addAlert, cluster.id)}
               isDisabled={!canDownloadClusterLogs(cluster)}
+              id={getID('button-download-installation-logs')}
             >
               Download Installation Logs
             </AlertActionLink>
             <AlertActionLink
               onClick={() => window.open(getBugzillaLink(cluster.openshiftVersion), '_blank')}
+              id={getID('button-report-bug')}
             >
               Report a bug
             </AlertActionLink>

diff --git a/src/components/clusterDetail/ConsoleModal.tsx b/src/components/clusterDetail/ConsoleModal.tsx
@@ -17,10 +17,12 @@ import { InfoCircleIcon } from '@patternfly/react-icons';
 type WebConsoleHintProps = {
   cluster: Cluster;
   consoleUrl?: string;
+  idPrefix?: string;
 };
 
 type LaunchOpenshiftConsoleButtonProps = WebConsoleHintProps & {
   isDisabled: boolean;
+  id?: string;
 };
 
 type ConsoleModalProps = WebConsoleHintProps & {
@@ -68,6 +70,7 @@ export const LaunchOpenshiftConsoleButton: React.FC<LaunchOpenshiftConsoleButton
   cluster,
   consoleUrl,
   isDisabled,
+  id,
 }) => {
   const [isOpen, setOpen] = React.useState(false);
 
@@ -78,6 +81,7 @@ export const LaunchOpenshiftConsoleButton: React.FC<LaunchOpenshiftConsoleButton
         variant={ButtonVariant.primary}
         isDisabled={isDisabled}
         onClick={() => setOpen(true)}
+        id={id}
       >
         Launch OpenShift Console
       </ToolbarButton>
@@ -94,6 +98,7 @@ export const LaunchOpenshiftConsoleButton: React.FC<LaunchOpenshiftConsoleButton
 export const TroubleshootingOpenshiftConsoleButton: React.FC<WebConsoleHintProps> = ({
   cluster,
   consoleUrl,
+  idPrefix,
 }) => {
   const [isOpen, setOpen] = React.useState(false);
 
@@ -105,6 +110,7 @@ export const TroubleshootingOpenshiftConsoleButton: React.FC<WebConsoleHintProps
         iconPosition="left"
         isInline
         onClick={() => setOpen(true)}
+        id={`${idPrefix}-troubleshooting-hint-open`}
       >
         Not able to access the Web Console?
       </Button>

diff --git a/src/components/clusterDetail/KubeconfigDownload.tsx b/src/components/clusterDetail/KubeconfigDownload.tsx
@@ -10,9 +10,10 @@ import { getErrorMessage, handleApiError, ocmClient } from '../../api';
 type KubeconfigDownloadProps = {
   clusterId: Cluster['id'];
   status: Cluster['status'];
+  id?: string;
 };
 
-const KubeconfigDownload: React.FC<KubeconfigDownloadProps> = ({ clusterId, status }) => {
+const KubeconfigDownload: React.FC<KubeconfigDownloadProps> = ({ clusterId, status, id }) => {
   const { addAlert } = React.useContext(AlertsContext);
 
   const download = React.useCallback(
@@ -49,6 +50,7 @@ const KubeconfigDownload: React.FC<KubeconfigDownloadProps> = ({ clusterId, stat
         variant={ButtonVariant.secondary}
         onClick={() => download(clusterId, status)}
         isDisabled={!canDownloadKubeconfig(status)}
+        id={id}
       >
         Download kubeconfig
       </Button>