fix: move topology details to separate components

frontend/packages/rhoas-plugin/locales/en/rhoas-plugin.json

@@ -5,18 +5,25 @@
  "Unlock with token": "Unlock with token",
  "Unlocked": "Unlocked",
  "RHOAS can include Streams for Kafka, Service Registry": "RHOAS can include Kafka, Service Registry and other Red Hat Services",
+ "KafkaCardDescription": "OpenShift Streams for Apache Kafka",
+ "ManagedServices-card-description": "Red Hat OpenShift Application Services provide a streamlined developer experience for building, deploying, and scaling cloud-native applications in open hybrid-cloud environments. The combination of enterprise-grade Kubernetes, cloud-native approach toapplication delivery, and managed operations allows teams to focus on core competencies, accelerate time to value and reduce operational cost.",
  "Access Red Hat Cloud Services with API Token": "Access Red Hat Cloud Services with API Token",
- "To access this Cloud Service, input the API token which can be located at": "To access this Cloud Service, input the API token which can be located at ",
- "API token can be accessed at": "API token can be accessed at",
+ "Problem with creating secret": "Problem with creating secret: {{error}} Namespace: {{namespace}}",
+ "Cannot create service account": "Cannot create service account: {{error}} Namespace: {{namespace}}",
+ "To access this Cloud Service, input the API token which can be located at <2>https://cloud.redhat.com/openshift/token</2>": "To access this Cloud Service, input the API token which can be located at <2>https://cloud.redhat.com/openshift/token</2>",
+ "API Token": "API Token",
  "Cant create an access token? Contact your administrator": "Cant create an access token? Contact your administrator",
  "Create": "Create",
- "Cancel": "Cancel",
  "Reset": "Reset",
  "Select Kafka Cluster": "Select Kafka Cluster",
  "The Kafka cluster selected below will appear on the topology view.": "The Kafka cluster selected below will appear on the topology view.",
  "All Kafka clusters are in use": "All Kafka clusters are in use",
  "Go back to Services Catalog": "Go back to Services Catalog",
  "No Kafka Clusters found": "No Kafka Clusters found",
+ "Cancel": "Cancel",
+ "Could not fetch services": "Could not fetch services",
+ "Could not connect to RHOAS with API Token": "Could not connect to RHOAS with API Token",
+ "Failed to load list of services": "Failed to load list of services: {{error}}",
  "Search by name": "Search by name",
  "Search by name...": "Search by name...",
  "Cluster Name": "Name",
@@ -28,15 +35,7 @@
  "List of Kafka Instances": "List of Kafka Instances",
  "Bootstrap Server": "Bootstrap Server",
  "URL": "URL",
- "Failed to load list of services": "Failed to load list of services: {{error}}",
- "Could not fetch services": "Could not fetch services",
- "Could not connect to RHOAS with API Token": "Could not connect to RHOAS with API Token",
  "Cloud Service": "Cloud Service",
  "This resource represents service that exist outside your cluster": "This resource represents service that exist outside your cluster",
- "Create a binding connector": "Create a binding connector",
- "API Token": "API Token",
- "Problem with creating secret": "Problem with creating secret: {{error}} Namespace: {{namespace}}",
- "Cannot create service account": "Cannot create service account: {{error}} Namespace: {{namespace}}",
- "KafkaCardDescription": "OpenShift Streams for Apache Kafka",
- "ManagedServices-card-description": "Red Hat OpenShift Application Services provide a streamlined developer experience for building, deploying, and scaling cloud-native applications in open hybrid-cloud environments. The combination of enterprise-grade Kubernetes, cloud-native approach toapplication delivery, and managed operations allows teams to focus on core competencies, accelerate time to value and reduce operational cost."
-}
+ "Create a binding connector": "Create a binding connector"
+}

frontend/packages/rhoas-plugin/locales/en/topology.json

@@ -1,3 +1,3 @@
 {
  "Create a binding connector": "Create a binding connector"
-}
+}

frontend/packages/rhoas-plugin/package.json

@@ -13,7 +13,7 @@
  "entry": "src/plugin.ts",
  "exposedModules": {
  "constants": "src/const.ts",
- "catalog": "src/catalog.tsx"
+ "catalog": "src/catalog"
  }
  }
 }

frontend/packages/rhoas-plugin/src/catalog/providers/useRhoasCatalog.tsx

@@ -111,7 +111,6 @@ const useRhoasCatalog: CatalogExtensionHook<CatalogItem[]> = ({
  href: `/rhoas/ns/${namespace}/kafka`,
  },
  details: {
- properties: [{ label: 'Type', value: 'Red Hat Cloud Service' }],
  descriptions: serviceKafkaCardDetailsDescription,
  },
  },
@@ -131,7 +130,6 @@ const useRhoasCatalog: CatalogExtensionHook<CatalogItem[]> = ({
  url: operatorIcon,
  },
  details: {
- properties: [{ label: 'Type', value: 'Red Hat Cloud Service' }],
  descriptions: cloudServicesCardDetailsDescription,
  },
  },

frontend/packages/rhoas-plugin/src/components/access-services/ServicesToken.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import {
  Button,
  Form,
@@ -20,7 +20,6 @@ export const ServiceToken: React.FC<ServiceTokenProps> = ({ namespace }: Service
  const [sendDisabled, setSendDisabled] = React.useState(false);
  const [apiTokenValue, setApiTokenValue] = React.useState<string>('');
  const [errorMessage, setErrorMessage] = React.useState<string>('');
-
  const { t } = useTranslation();
 
  const onCreate = async () => {
@@ -44,18 +43,16 @@ export const ServiceToken: React.FC<ServiceTokenProps> = ({ namespace }: Service
  <>
  <TextContent>
  <Text component={TextVariants.p}>
- {t(
- 'rhoas-plugin~To access this Cloud Service, input the API token which can be located at',
- )}
-
- <a
- href="https://cloud.redhat.com/openshift/token"
- rel="noopener noreferrer"
- target="_blank"
- >
- {' '}
- https://cloud.redhat.com/openshift/token
- </a>
+ <Trans t={t} ns="rhoas-plugin">
+ To access this Cloud Service, input the API token which can be located at{' '}
+ <a
+ href="https://cloud.redhat.com/openshift/token"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ https://cloud.redhat.com/openshift/token
+ </a>
+ </Trans>
  </Text>
  </TextContent>
  <Form>

frontend/packages/rhoas-plugin/src/topology/components/DetailsComponent.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ResourceSummary } from '@console/internal/components/utils';
+import { useTranslation } from 'react-i18next';
+import { KafkaConnection } from '../../utils/rhoas-types';
+
+export const DetailsComponent: React.FC<{ obj: KafkaConnection }> = ({ obj }) => {
+ const { t } = useTranslation();
+ const boostrapServerHost = obj.status?.bootstrapServerHost;
+ const url = obj.status?.metadata?.cloudUI;
+
+ return (
+ <div className="co-m-pane__body">
+ <div className="row">
+ <div className="col-sm-6">
+ <ResourceSummary resource={obj} />
+ </div>
+ {boostrapServerHost && (
+ <dl className="co-m-pane__details">
+ <dt>{t('rhoas-plugin~Bootstrap Server')}</dt>
+ <dd>{boostrapServerHost}</dd>
+ </dl>
+ )}
+ {url && (
+ <dl className="co-m-pane__details">
+ <dt>{t('rhoas-plugin~URL')}</dt>
+ <dd>
+ <a href={url} rel="noopener noreferrer" target="_blank">
+ {url}
+ </a>
+ </dd>
+ </dl>
+ )}
+ </div>
+ </div>
+ );
+};

frontend/packages/rhoas-plugin/src/topology/components/ResourceComponent.tsx

@@ -0,0 +1,29 @@
+import { ResourceLink } from '@console/internal/components/utils';
+import { referenceForModel } from '@console/internal/module/k8s';
+import { SecretModel } from '@console/internal/models';
+import * as React from 'react';
+import { KafkaConnection } from '../../utils/rhoas-types';
+
+export const ResourcesComponent: React.FC<{ obj: KafkaConnection }> = ({ obj }) => {
+ const serviceAccountSecretName = obj?.spec?.credentials?.serviceAccountSecretName;
+ const { namespace } = obj.metadata;
+
+ const link = (
+ <ResourceLink
+ kind={referenceForModel(SecretModel)}
+ name={serviceAccountSecretName}
+ namespace={namespace}
+ />
+ );
+
+ return (
+ <ul>
+ <h3>Secret</h3>
+ <li className="list-group-item container-fluid">
+ <div className="row">
+ <span className="col-xs-12">{link}</span>
+ </div>
+ </li>
+ </ul>
+ );
+};

frontend/packages/rhoas-plugin/src/topology/components/TopologyKafkaPanel.tsx

@@ -3,17 +3,11 @@ import { useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 import { Node } from '@patternfly/react-topology';
-import {
- navFactory,
- SimpleTabNav,
- ResourceSummary,
- ResourceLink,
-} from '@console/internal/components/utils';
-import { referenceForModel } from '@console/internal/module/k8s';
-import { SecretModel } from '@console/internal/models';
 import * as UIActions from '@console/internal/actions/ui';
 import './TopologyKafkaPanel.css';
-import { KafkaConnection } from '../../utils/rhoas-types';
+import { navFactory, SimpleTabNav } from '@console/internal/components/utils';
+import { ResourcesComponent } from './ResourceComponent';
+import { DetailsComponent } from './DetailsComponent';
 
 type PropsFromState = {
  selectedDetailsTab?: any;
@@ -37,62 +31,6 @@ type OwnProps = {
 
 type TopologyRhoasPanelProps = PropsFromState & PropsFromDispatch & OwnProps;
 
-const DetailsComponent: React.FC<{ obj: KafkaConnection }> = ({ obj }) => {
- const { t } = useTranslation();
- const boostrapServerHost = obj.status?.bootstrapServerHost;
- const url = obj.status?.metadata?.cloudUI;
-
- return (
- <div className="co-m-pane__body">
- <div className="row">
- <div className="col-sm-6">
- <ResourceSummary resource={obj} />
- </div>
- {boostrapServerHost && (
- <dl className="co-m-pane__details">
- <dt>{t('rhoas-plugin~Bootstrap Server')}</dt>
- <dd>{boostrapServerHost}</dd>
- </dl>
- )}
- {url && (
- <dl className="co-m-pane__details">
- <dt>{t('rhoas-plugin~URL')}</dt>
- <dd>
- <a href={url} rel="noopener noreferrer" target="_blank">
- {url}
- </a>
- </dd>
- </dl>
- )}
- </div>
- </div>
- );
-};
-
-const ResourcesComponent: React.FC<{ obj: KafkaConnection }> = ({ obj }) => {
- const serviceAccountSecretName = obj?.spec?.credentials?.serviceAccountSecretName;
- const { namespace } = obj.metadata;
-
- const link = (
- <ResourceLink
- kind={referenceForModel(SecretModel)}
- name={serviceAccountSecretName}
- namespace={namespace}
- />
- );
-
- return (
- <ul>
- <h3>Secret</h3>
- <li className="list-group-item container-fluid">
- <div className="row">
- <span className="col-xs-12">{link}</span>
- </div>
- </li>
- </ul>
- );
-};
-
 export const ConnectedTopologyRhoasPanel: React.FC<TopologyRhoasPanelProps> = ({
  item,
  selectedDetailsTab,

frontend/public/locales/en/public.json

@@ -731,9 +731,6 @@
  "Enabled": "Enabled",
  "Failed to create connection": "Failed to create connection",
  "Please try again": "Please try again",
- "Could not fetch services": "Could not fetch services",
- "Could not connect to RHOAS with API Token": "Could not connect to RHOAS with API Token",
- "Failed to load list of services": "Failed to load list of services",
  "No results found": "No results found",
  "No results match the filter criteria. Remove all filters or clear all filters to show results.": "No results match the filter criteria. Remove all filters or clear all filters to show results."
 }