Add the function to revoke Openstack Security Group in the SPA

@sekinet

Thank you for pushing the patch. However, I would like to confirm a few things.

• In type: 'link', the process is as if a web page with the specified URL is incorporated by dangerouslySetInnerHTML(). Was that implementation required?
• In EntityDetailPage.tsx, there is a modification to remove "early continue" and add "forEach", may I confirm why?
• A dependency on RequestStack has been added to OpenStackOperationsService, and a process has been added to retrieve the referrer. Was this the same referrer checking done in the pre-port code? ?

That is all I have to say about reading the code. Thanks.

@sekinet

Thank you for your answers.

Without this implementation, links would be displayed as strings like

This part can be expressed without dangerouslySetInnerHTML().
A modified example is shown in git diff format.

diff --git a/modules/cloud_dashboard/cloud_dashboard/src/molecules/TableBlock.tsx b/modules/cloud_dashboard/cloud_dashboard/src/molecules/TableBlock.tsx
index 1091997b..4675bf5f 100644
--- a/modules/cloud_dashboard/cloud_dashboard/src/molecules/TableBlock.tsx
+++ b/modules/cloud_dashboard/cloud_dashboard/src/molecules/TableBlock.tsx
@@ -3,6 +3,35 @@ import EntityInfoRecordData from 'model/EntityInfoRecordData';
 import { Table } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
+const TdBlock = ({ text }: { text: string }) => {
+  try {
+    // For strings that can be parsed as JSON.
+    const temp = JSON.parse(text);
+    if (('type' in temp) && (temp['type'] === 'link')) {
+      const url: string = temp['url'];
+      const label: string = temp['label'];
+
+      return <td className="word-break-all">
+        <a href={url}>{label}</a>
+      </td>;
+    }
+
+    return <td className="word-break-all">
+      {text}
+    </td>;
+  } catch {
+    if (text.includes('\n')) {
+      return <td className="word-break-all">
+        <pre>{text}</pre>
+      </td>;
+    }
+
+    return <td className="word-break-all">
+      {text}
+    </td>;
+  }
+}
+
 /**
  * Block of table view.
  *
@@ -58,13 +87,7 @@ const TableBlock = ({ record }: { record: EntityInfoRecordData }) => {
                 return <tr className={index % 2 === 0 ? 'odd' : 'even'}>
                   {
                     keys.map((key, index2) => {
-                      return <td className="word-break-all" key={index2}>{
-                        r[key].includes('\n')
-                          ? <pre>{r[key]}</pre>
-                          : r[key].includes('<a href')
-                            ? <div dangerouslySetInnerHTML={{ __html: r[key] }}/>
-                            : <>{r[key]}</>
-                      }</td>;
+                      return <TdBlock key={index2} text={r[key]} />;
                     })
                   }
                 </tr>;
diff --git a/modules/cloud_dashboard/cloud_dashboard/src/service/utility.ts b/modules/cloud_dashboard/cloud_dashboard/src/service/utility.ts
index ef388566..c7bd2e30 100644
--- a/modules/cloud_dashboard/cloud_dashboard/src/service/utility.ts
+++ b/modules/cloud_dashboard/cloud_dashboard/src/service/utility.ts
@@ -183,7 +183,11 @@ export const convertDataForUI = (data: any, ec: EntityColumn, dataCache: { [key:
       // source: VmwareVmGuestOsDataProvider.php
       return data in VMWARE_OS_DICT ? VMWARE_OS_DICT[data] : data;
     case 'link':
-        return '<a href="' + ec.url + '">' + ec.label +  '</a>';
+      return JSON.stringify({
+        type: 'link',
+        url: ec.url,
+        label: ec.label
+      });
     default:
       return data;
   }

Note

Within a .tsx format file, return allows JSX to be returned as the return value. In other words, it is used to generate "a" tags.
In addition, the sample code above determines whether or not the "a" tag is a string that you want to use, based on whether or not it is in JSON format.

@sekinet

I see no problem with the fix. Thank you for your patch.

@ryo-yamashita

Thank you for your review.

@sekinet

Thank you for the update. I posted my comment. Thanks

@sekinet

Thank you for the update. It looks good to me.

@ryo-yamashita

What do you think?

Thanks

@yas @sekinet

It looks good to me, too. Thanks.

@ryo-yamashita

Thank you for your review.

@sekinet

Could you please rebase the patch? Then I'll merge the patch. Thanks!

@ryo-yamashita

Thank you for your review.

@sekinet

I'll merge the patch to 4.x and 5.x, and close this issue as Fixed.

@ryo-yamashita

Thank you for your review.

@sekinet

I'll merge the patch to 4.x and 5.x, and close this issue as Fixed.