From 607df965219d0a432888bcd218a4f2cd274ebe66 Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Mon, 15 Apr 2024 23:20:58 +0300
Subject: [PATCH] Handle undefined cacert Credentials field for copy clipboard
 action

When cacert is empty (and set to undefined) then trying to copy the field
value to clipboard causes a NPE.

This is 100% reproducable for all providers.

Fixing that by avoid rendering the copy clipboard component in case of an empty
value field.

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../ShowFieldWithClipboardCopy.tsx            | 35 +++++++++++++++++++
 .../{MaskedData.tsx => ShowMaskedField.tsx}   |  5 ++-
 .../list/OpenshiftCredentialsList.tsx         | 18 ++--------
 .../list/OpenstackCredentialsList.tsx         | 24 ++-----------
 .../components/list/OvirtCredentialsList.tsx  | 24 ++-----------
 .../list/VSphereCredentialsList.tsx           | 18 ++--------
 .../components/CredentialsSection/index.ts    |  3 +-
 7 files changed, 53 insertions(+), 74 deletions(-)
 create mode 100644 packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowFieldWithClipboardCopy.tsx
 rename packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/{MaskedData.tsx => ShowMaskedField.tsx} (61%)

diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowFieldWithClipboardCopy.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowFieldWithClipboardCopy.tsx
new file mode 100644
index 000000000..7d3ae5222
--- /dev/null
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowFieldWithClipboardCopy.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { ClipboardCopy, ClipboardCopyVariant, TextInput } from '@patternfly/react-core';
+
+export interface ShowFieldWithClipboardCopyProps {
+  value: string;
+}
+
+/**
+ * Show a readable field value.
+ * If value is an empty string, show a field read ony text with a proper text message.
+ * If value is a non empty string, show a read only field with a copy clipboard button
+ *
+ * @property value - field value
+ */
+export const ShowFieldWithClipboardCopy: React.FC<ShowFieldWithClipboardCopyProps> = ({
+  value,
+}) => {
+  const { t } = useForkliftTranslation();
+
+  return value ? (
+    <ClipboardCopy
+      isReadOnly
+      hoverTip={t('Copy')}
+      clickTip={t('Copied')}
+      isCode
+      variant={value && value.length > 128 ? ClipboardCopyVariant.expansion : undefined}
+    >
+      {value}
+    </ClipboardCopy>
+  ) : (
+    <TextInput value={'< No value >'} type="text" isDisabled />
+  );
+};
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/MaskedData.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowMaskedField.tsx
similarity index 61%
rename from packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/MaskedData.tsx
rename to packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowMaskedField.tsx
index 9057d9589..1356d636b 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/MaskedData.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/ShowMaskedField.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 
 import { TextInput } from '@patternfly/react-core';
 
-export const MaskedData: React.FC = () => {
+/**
+ * Show a readable masked (hidden) field value.
+ */
+export const ShowMaskedField: React.FC = () => {
   return <TextInput value="&bull;&bull;&bull;&bull;&bull;" type="text" isDisabled />;
 };
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenshiftCredentialsList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenshiftCredentialsList.tsx
index 24dcb06bb..b1ab33d8a 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenshiftCredentialsList.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenshiftCredentialsList.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Base64 } from 'js-base64';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { ClipboardCopy, ClipboardCopyVariant, Text, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core';
 
-import { MaskedData } from '../../MaskedData';
+import { ShowFieldWithClipboardCopy, ShowMaskedField } from '../../';
 import { ListComponentProps } from '../BaseCredentialsSection';
 
 export const OpenshiftCredentialsList: React.FC<ListComponentProps> = ({ secret, reveal }) => {
@@ -78,19 +78,7 @@ export const OpenshiftCredentialsList: React.FC<ListComponentProps> = ({ secret,
           </Text>
         </div>
         <div className="forklift-page-secret-content-div">
-          {reveal ? (
-            <ClipboardCopy
-              isReadOnly
-              hoverTip={t('Copy')}
-              clickTip={t('Copied')}
-              isCode
-              variant={value && value.length > 128 ? ClipboardCopyVariant.expansion : undefined}
-            >
-              {value}
-            </ClipboardCopy>
-          ) : (
-            <MaskedData />
-          )}
+          {reveal ? <ShowFieldWithClipboardCopy value={value} /> : <ShowMaskedField />}
         </div>
       </>,
     );
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenstackCredentialsList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenstackCredentialsList.tsx
index 423a026f0..d0feb0a50 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenstackCredentialsList.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OpenstackCredentialsList.tsx
@@ -3,15 +3,9 @@ import { Base64 } from 'js-base64';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  ClipboardCopy,
-  ClipboardCopyVariant,
-  DescriptionList,
-  Text,
-  TextVariants,
-} from '@patternfly/react-core';
+import { DescriptionList, Text, TextVariants } from '@patternfly/react-core';
 
-import { MaskedData } from '../../MaskedData';
+import { ShowFieldWithClipboardCopy, ShowMaskedField } from '../../';
 import { ListComponentProps } from '../BaseCredentialsSection';
 
 export const OpenstackCredentialsList: React.FC<ListComponentProps> = ({ secret, reveal }) => {
@@ -256,19 +250,7 @@ export const OpenstackCredentialsList: React.FC<ListComponentProps> = ({ secret,
           </Text>
         </div>
         <div className="forklift-page-secret-content-div">
-          {reveal ? (
-            <ClipboardCopy
-              isReadOnly
-              hoverTip={t('Copy')}
-              clickTip={t('Copied')}
-              isCode
-              variant={value && value.length > 128 ? ClipboardCopyVariant.expansion : undefined}
-            >
-              {value}
-            </ClipboardCopy>
-          ) : (
-            <MaskedData />
-          )}
+          {reveal ? <ShowFieldWithClipboardCopy value={value} /> : <ShowMaskedField />}
         </div>
       </>,
     );
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OvirtCredentialsList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OvirtCredentialsList.tsx
index 26bc5244b..225b51ed5 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OvirtCredentialsList.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/OvirtCredentialsList.tsx
@@ -3,15 +3,9 @@ import { Base64 } from 'js-base64';
 import { DetailsItem } from 'src/modules/Providers/utils';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  ClipboardCopy,
-  ClipboardCopyVariant,
-  DescriptionList,
-  Text,
-  TextVariants,
-} from '@patternfly/react-core';
+import { DescriptionList, Text, TextVariants } from '@patternfly/react-core';
 
-import { MaskedData } from '../../MaskedData';
+import { ShowFieldWithClipboardCopy, ShowMaskedField } from '../../';
 import { ListComponentProps } from '../BaseCredentialsSection';
 
 export const OvirtCredentialsList: React.FC<ListComponentProps> = ({ secret, reveal }) => {
@@ -97,19 +91,7 @@ export const OvirtCredentialsList: React.FC<ListComponentProps> = ({ secret, rev
           </Text>
         </div>
         <div className="forklift-page-secret-content-div">
-          {reveal ? (
-            <ClipboardCopy
-              isReadOnly
-              hoverTip={t('Copy')}
-              clickTip={t('Copied')}
-              isCode
-              variant={value && value.length > 128 ? ClipboardCopyVariant.expansion : undefined}
-            >
-              {value}
-            </ClipboardCopy>
-          ) : (
-            <MaskedData />
-          )}
+          {reveal ? <ShowFieldWithClipboardCopy value={value} /> : <ShowMaskedField />}
         </div>
       </>,
     );
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/VSphereCredentialsList.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/VSphereCredentialsList.tsx
index 8dd1b42e1..72bf4f47d 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/VSphereCredentialsList.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/components/list/VSphereCredentialsList.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Base64 } from 'js-base64';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { ClipboardCopy, ClipboardCopyVariant, Text, TextVariants } from '@patternfly/react-core';
+import { Text, TextVariants } from '@patternfly/react-core';
 
-import { MaskedData } from '../../MaskedData';
+import { ShowFieldWithClipboardCopy, ShowMaskedField } from '../../';
 import { ListComponentProps } from '../BaseCredentialsSection';
 
 export const VSphereCredentialsList: React.FC<ListComponentProps> = ({ secret, reveal }) => {
@@ -82,19 +82,7 @@ export const VSphereCredentialsList: React.FC<ListComponentProps> = ({ secret, r
           </Text>
         </div>
         <div className="forklift-page-secret-content-div">
-          {reveal ? (
-            <ClipboardCopy
-              isReadOnly
-              hoverTip={t('Copy')}
-              clickTip={t('Copied')}
-              isCode
-              variant={value && value.length > 128 ? ClipboardCopyVariant.expansion : undefined}
-            >
-              {value}
-            </ClipboardCopy>
-          ) : (
-            <MaskedData />
-          )}
+          {reveal ? <ShowFieldWithClipboardCopy value={value} /> : <ShowMaskedField />}
         </div>
       </>,
     );
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/index.ts b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/index.ts
index c552a3c15..4d19d83af 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/index.ts
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/details/components/CredentialsSection/index.ts
@@ -2,9 +2,10 @@
 export * from './components';
 export * from './CredentialsSection';
 export * from './EsxiCredentialsSection';
-export * from './MaskedData';
 export * from './OpenshiftCredentialsSection';
 export * from './OpenstackCredentialsSection';
 export * from './OvirtCredentialsSection';
+export * from './ShowFieldWithClipboardCopy';
+export * from './ShowMaskedField';
 export * from './VCenterCredentialsSection';
 // @endindex