From daa8bfb5d0ed03a5687bd45ae50321e66057641a Mon Sep 17 00:00:00 2001 From: Vladyslav Palyvoda Date: Tue, 22 Aug 2023 15:02:07 +0300 Subject: [PATCH] feat: Align configuration pages into one flow, create ConfigurationBody component for creating configuration pages (#26) Jira: EPMDEDP-12447 Resolves: #26 Change-Id: Ibde75a337ab4d48e534ac4b9a8d2d22324ccdf77 --- .../components/ConfigurationBody/index.tsx | 141 +++++++++++++ .../components/ConfigurationBody/types.ts | 24 +++ .../pages/edp-cluster-list/view.tsx | 172 ++++----------- .../edp-defect-dojo-integration/view.tsx | 172 ++++----------- .../pages/edp-gitserver-list/view.tsx | 156 ++++---------- .../pages/edp-jira-integration/view.tsx | 169 ++++----------- .../pages/edp-nexus-integration/view.tsx | 169 ++++----------- .../pages/edp-registry-list/view.tsx | 196 +++++------------- .../pages/edp-sonar-integration/view.tsx | 169 ++++----------- 9 files changed, 484 insertions(+), 884 deletions(-) create mode 100644 src/pages/edp-configuration/components/ConfigurationBody/index.tsx create mode 100644 src/pages/edp-configuration/components/ConfigurationBody/types.ts diff --git a/src/pages/edp-configuration/components/ConfigurationBody/index.tsx b/src/pages/edp-configuration/components/ConfigurationBody/index.tsx new file mode 100644 index 00000000..949b89ee --- /dev/null +++ b/src/pages/edp-configuration/components/ConfigurationBody/index.tsx @@ -0,0 +1,141 @@ +import { Icon } from '@iconify/react'; +import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Grid, + Link, + Tooltip, + Typography, +} from '@material-ui/core'; +import React from 'react'; +import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; +import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; +import { PageWrapper } from '../../../../components/PageWrapper'; +import { Render } from '../../../../components/Render'; +import { ICONS } from '../../../../icons/iconify-icons-mapping'; +import { menu } from '../../menu'; +import { ConfigurationBodyProps } from './types'; + +export const ConfigurationBody = ({ + pageData, + renderPlaceHolderData, + items, + emptyMessage, +}: ConfigurationBodyProps) => { + const { label, description, docUrl } = pageData; + const [expandedPanel, setExpandedPanel] = React.useState(null); + + const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { + setExpandedPanel(isExpanded ? panel : null); + }; + + const handleClosePlaceholder = () => { + setExpandedPanel(null); + }; + + const placeholderData = React.useMemo( + () => renderPlaceHolderData({ handleClosePlaceholder }), + [renderPlaceHolderData] + ); + + return ( + + + + + + {label} + + + {description}{' '} + + + Learn more. + + + + + + + + + {placeholderData.component} + + + + + + + {items && items.length ? ( + items.map(configurationItem => { + const key = configurationItem?.id; + const ownerReference = configurationItem?.ownerReference; + + return ( + + + } + > + + + + {configurationItem.title} + + + + + + + + + + + + + + + {configurationItem.component} + + + + + + ); + }) + ) : ( + + + {emptyMessage} + + + )} + + + + + + ); +}; diff --git a/src/pages/edp-configuration/components/ConfigurationBody/types.ts b/src/pages/edp-configuration/components/ConfigurationBody/types.ts new file mode 100644 index 00000000..41eb44e8 --- /dev/null +++ b/src/pages/edp-configuration/components/ConfigurationBody/types.ts @@ -0,0 +1,24 @@ +import React from 'react'; + +export interface ConfigurationItem { + title: string; + component: React.ReactElement; + id?: string; + ownerReference?: string; + disabled?: boolean; +} + +export interface ConfigurationBodyProps { + pageData: { + label: string; + description: string; + docUrl?: string; + }; + renderPlaceHolderData: ({ + handleClosePlaceholder, + }: { + handleClosePlaceholder: () => void; + }) => ConfigurationItem; + items: ConfigurationItem[]; + emptyMessage: string; +} diff --git a/src/pages/edp-configuration/pages/edp-cluster-list/view.tsx b/src/pages/edp-configuration/pages/edp-cluster-list/view.tsx index 6a4c3229..430b55ab 100644 --- a/src/pages/edp-configuration/pages/edp-cluster-list/view.tsx +++ b/src/pages/edp-configuration/pages/edp-cluster-list/view.tsx @@ -1,26 +1,10 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Tooltip, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; -import { Render } from '../../../../components/Render'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { SecretKubeObject } from '../../../../k8s/Secret'; import { ARGO_CD_SECRET_LABEL_SECRET_TYPE } from '../../../../k8s/Secret/labels'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageClusterSecret } from '../../../../widgets/ManageClusterSecret'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { CLUSTER_LIST_PAGE_DESCRIPTION } from './constants'; export const PageView = () => { @@ -29,122 +13,50 @@ export const PageView = () => { labelSelector: `${ARGO_CD_SECRET_LABEL_SECRET_TYPE}=cluster`, }); - const [expandedPanel, setExpandedPanel] = React.useState(null); + const secretsArray = React.useMemo(() => (items ? items.filter(Boolean) : []), [items]); - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: el?.metadata.name, + ownerReference, + component: ( + + ), + }; + }), + [secretsArray] + ); return ( - - - - - - {CLUSTER_LIST_PAGE_DESCRIPTION.label} - - - {CLUSTER_LIST_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - {items && items.length ? ( - items.map(el => { - const key = el?.metadata?.name || el?.metadata?.uid; - const ownerReference = el?.metadata?.ownerReferences?.[0].kind; - - return ( - - - } - > - - - - {el?.metadata?.name} - - - - - - - - - - - - - - - - - - - - - ); - }) - ) : ( - - No clusters - - )} - - - - - + ({ + title: 'Add Cluster', + component: ( + + ), + })} + items={configurationItemList} + emptyMessage={'No Cluster secrets found'} + /> ); }; diff --git a/src/pages/edp-configuration/pages/edp-defect-dojo-integration/view.tsx b/src/pages/edp-configuration/pages/edp-defect-dojo-integration/view.tsx index 9eeea96a..bd07e629 100644 --- a/src/pages/edp-configuration/pages/edp-defect-dojo-integration/view.tsx +++ b/src/pages/edp-configuration/pages/edp-defect-dojo-integration/view.tsx @@ -1,38 +1,16 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Tooltip, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; -import { Render } from '../../../../components/Render'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { SecretKubeObject } from '../../../../k8s/Secret'; import { SecretKubeObjectInterface } from '../../../../k8s/Secret/types'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageDefectDojoIntegrationSecret } from '../../../../widgets/ManageDefectDojoIntegrationSecret'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { DEFECT_DOJO_INTEGRATION_PAGE_DESCRIPTION } from './constants'; const findDefectDojoIntegrationSecret = (items: SecretKubeObjectInterface[]) => items?.find(el => el.metadata.name === 'defectdojo-ciuser-token'); export const PageView = () => { - const [expandedPanel, setExpandedPanel] = React.useState(null); - - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; - const [defectDojoSecret, setDefectDojoSecret] = React.useState(null); React.useEffect(() => { @@ -53,114 +31,56 @@ export const PageView = () => { }; }, []); - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; - - const defectDojoSecretName = defectDojoSecret?.metadata.name; - const defectDojoSecretOwnerReference = defectDojoSecret?.metadata?.ownerReferences?.[0].kind; - const creationDisabled = React.useMemo( () => (defectDojoSecret === null ? true : !!defectDojoSecret), [defectDojoSecret] ); + const secretsArray = [defectDojoSecret].filter(Boolean); + + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; + + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: el?.metadata.name, + ownerReference, + component: ( + + ), + }; + }), + [secretsArray] + ); + return ( - - - - - - {DEFECT_DOJO_INTEGRATION_PAGE_DESCRIPTION.label} - - - {DEFECT_DOJO_INTEGRATION_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - {defectDojoSecret ? ( - - - } - > - - - - {defectDojoSecretName} - - - - - - - - - - - - - - - - - - - - - ) : ( - - - No integration found - - - )} - - - - - + ({ + title: 'Create service account', + disabled: creationDisabled, + component: ( + + ), + })} + items={configurationItemList} + emptyMessage={'No DefectDojo integration secrets found'} + /> ); }; diff --git a/src/pages/edp-configuration/pages/edp-gitserver-list/view.tsx b/src/pages/edp-configuration/pages/edp-gitserver-list/view.tsx index 92c443fa..4b325c0e 100644 --- a/src/pages/edp-configuration/pages/edp-gitserver-list/view.tsx +++ b/src/pages/edp-configuration/pages/edp-gitserver-list/view.tsx @@ -1,23 +1,9 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { EDPGitServerKubeObject } from '../../../../k8s/EDPGitServer'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageGitServer } from '../../../../widgets/ManageGitServer'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { GIT_SERVER_LIST_PAGE_DESCRIPTION } from './constants'; export const PageView = () => { @@ -25,108 +11,50 @@ export const PageView = () => { namespace: getDefaultNamespace(), }); - const [expandedPanel, setExpandedPanel] = React.useState(null); + const secretsArray = React.useMemo(() => (items ? items.filter(Boolean) : []), [items]); - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: el?.metadata.name, + ownerReference, + component: ( + + ), + }; + }), + [secretsArray] + ); return ( - - - - - - {GIT_SERVER_LIST_PAGE_DESCRIPTION.label} - - - {GIT_SERVER_LIST_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - {items && items.length ? ( - items.map(el => { - const key = el?.spce?.gitHost || el?.metadata?.uid; - - return ( - - - } - > - - - - {el?.metadata?.name} - - - - - - - - - - - - - - ); - }) - ) : ( - - - No Git Servers - - - )} - - - - - + ({ + title: 'Create Git Server', + component: ( + + ), + })} + items={configurationItemList} + emptyMessage={'No Git Servers found'} + /> ); }; diff --git a/src/pages/edp-configuration/pages/edp-jira-integration/view.tsx b/src/pages/edp-configuration/pages/edp-jira-integration/view.tsx index ee9b66a7..675aa1aa 100644 --- a/src/pages/edp-configuration/pages/edp-jira-integration/view.tsx +++ b/src/pages/edp-configuration/pages/edp-jira-integration/view.tsx @@ -1,38 +1,16 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Tooltip, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; -import { Render } from '../../../../components/Render'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { SecretKubeObject } from '../../../../k8s/Secret'; import { SecretKubeObjectInterface } from '../../../../k8s/Secret/types'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageJiraIntegrationSecret } from '../../../../widgets/ManageJiraIntegrationSecret'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { JIRA_INTEGRATION_PAGE_DESCRIPTION } from './constants'; const findJiraIntegrationSecret = (items: SecretKubeObjectInterface[]) => items?.find(el => el.metadata.name === 'jira-user'); export const PageView = () => { - const [expandedPanel, setExpandedPanel] = React.useState(null); - - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; - const [jiraSecret, setJiraSecret] = React.useState(null); React.useEffect(() => { @@ -53,111 +31,56 @@ export const PageView = () => { }; }, []); - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; - - const jiraSecretName = jiraSecret?.metadata.name; - const jiraSecretOwnerReference = jiraSecret?.metadata?.ownerReferences?.[0].kind; - const creationDisabled = React.useMemo( () => (jiraSecret === null ? true : !!jiraSecret), [jiraSecret] ); + const secretsArray = [jiraSecret].filter(Boolean); + + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; + + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: el?.metadata.name, + ownerReference, + component: ( + + ), + }; + }), + [secretsArray] + ); + return ( - - - - - - {JIRA_INTEGRATION_PAGE_DESCRIPTION.label} - - - {JIRA_INTEGRATION_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - {jiraSecret ? ( - - - } - > - - - - {jiraSecretName} - - - - - - - - - - - - - - - - - - - - - ) : ( - - - No integration found - - - )} - - - - - + ({ + title: 'Create service account', + disabled: creationDisabled, + component: ( + + ), + })} + items={configurationItemList} + emptyMessage={'No Jira integration secrets found'} + /> ); }; diff --git a/src/pages/edp-configuration/pages/edp-nexus-integration/view.tsx b/src/pages/edp-configuration/pages/edp-nexus-integration/view.tsx index e76aadc0..f616e6bf 100644 --- a/src/pages/edp-configuration/pages/edp-nexus-integration/view.tsx +++ b/src/pages/edp-configuration/pages/edp-nexus-integration/view.tsx @@ -1,38 +1,16 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Tooltip, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; -import { Render } from '../../../../components/Render'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { SecretKubeObject } from '../../../../k8s/Secret'; import { SecretKubeObjectInterface } from '../../../../k8s/Secret/types'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageNexusIntegrationSecret } from '../../../../widgets/ManageNexusIntegrationSecret'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { NEXUS_INTEGRATION_PAGE_DESCRIPTION } from './constants'; const findNexusIntegrationSecret = (items: SecretKubeObjectInterface[]) => items.find(el => el.metadata.name === 'nexus-ci.user'); export const PageView = () => { - const [expandedPanel, setExpandedPanel] = React.useState(null); - - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; - const [nexusSecret, setNexusSecret] = React.useState(null); React.useEffect(() => { @@ -53,111 +31,56 @@ export const PageView = () => { }; }, []); - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; - - const nexusSecretName = nexusSecret?.metadata.name; - const nexusSecretOwnerReference = nexusSecret?.metadata?.ownerReferences?.[0].kind; - const creationDisabled = React.useMemo( () => (nexusSecret === null ? true : !!nexusSecret), [nexusSecret] ); + const secretsArray = [nexusSecret].filter(Boolean); + + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; + + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: el?.metadata.name, + ownerReference, + component: ( + + ), + }; + }), + [secretsArray] + ); + return ( - - - - - - {NEXUS_INTEGRATION_PAGE_DESCRIPTION.label} - - - {NEXUS_INTEGRATION_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - {nexusSecret ? ( - - - } - > - - - - {nexusSecret?.metadata.name} - - - - - - - - - - - - - - - - - - - - - ) : ( - - - No integration found - - - )} - - - - - + ({ + title: 'Create service account', + disabled: creationDisabled, + component: ( + + ), + })} + items={configurationItemList} + emptyMessage={'No Nexus integration secrets found'} + /> ); }; diff --git a/src/pages/edp-configuration/pages/edp-registry-list/view.tsx b/src/pages/edp-configuration/pages/edp-registry-list/view.tsx index 9173013e..47154d25 100644 --- a/src/pages/edp-configuration/pages/edp-registry-list/view.tsx +++ b/src/pages/edp-configuration/pages/edp-registry-list/view.tsx @@ -1,27 +1,12 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Tooltip, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; import { Render } from '../../../../components/Render'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { useEDPComponentsURLsQuery } from '../../../../k8s/EDPComponent/hooks/useEDPComponentsURLsQuery'; import { SecretKubeObject } from '../../../../k8s/Secret'; import { SecretKubeObjectInterface } from '../../../../k8s/Secret/types'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageRegistrySecret } from '../../../../widgets/ManageRegistrySecret'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { REGISTRY_LIST_PAGE_DESCRIPTION } from './constants'; interface Secrets { @@ -56,11 +41,6 @@ const findKanikoAndRegcredSecrets = (secrets: SecretKubeObjectInterface[]) => { export const PageView = () => { const { data: EDPComponentsURLS } = useEDPComponentsURLsQuery(); const dockerRegistryURL = EDPComponentsURLS?.['docker-registry']; - const [expandedPanel, setExpandedPanel] = React.useState(null); - - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; const [secrets, setSecrets] = React.useState({ kanikoDockerConfig: null, @@ -92,6 +72,31 @@ export const PageView = () => { const kanikoDockerConfigSecret = secrets.kanikoDockerConfig; const regcredSecret = secrets.regcred; const secretsArray = [kanikoDockerConfigSecret, regcredSecret].filter(Boolean); + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; + + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: generateItemName(el), + ownerReference, + component: ( + + + + ), + }; + }), + [secretsArray, dockerRegistryURL, kanikoDockerConfigSecret, regcredSecret] + ); const creationDisabled = React.useMemo(() => { if (kanikoDockerConfigSecret === null && regcredSecret === null) { @@ -101,130 +106,31 @@ export const PageView = () => { return !!kanikoDockerConfigSecret && !!regcredSecret; }, [kanikoDockerConfigSecret, regcredSecret]); - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; - return ( - - - - - - {REGISTRY_LIST_PAGE_DESCRIPTION.label} - - - {REGISTRY_LIST_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - - - {secretsArray && secretsArray.length ? ( - secretsArray.map(el => { - const key = el?.metadata?.name || el?.metadata?.uid; - const name = generateItemName(el); - const ownerReference = el?.metadata?.ownerReferences?.[0].kind; - - return ( - - - } - > - - - - {name} - - - - - - - - - - - - - - - - - - - - - - - ); - }) - ) : ( - - - No registry items - - - )} - - - - - + ({ + title: 'Create service account', + disabled: creationDisabled, + component: ( + + + + ), + })} + items={configurationItemList} + emptyMessage={'No registry secrets found'} + /> ); }; diff --git a/src/pages/edp-configuration/pages/edp-sonar-integration/view.tsx b/src/pages/edp-configuration/pages/edp-sonar-integration/view.tsx index 39441f9c..ccaa486e 100644 --- a/src/pages/edp-configuration/pages/edp-sonar-integration/view.tsx +++ b/src/pages/edp-configuration/pages/edp-sonar-integration/view.tsx @@ -1,38 +1,16 @@ -import { Icon } from '@iconify/react'; -import { EmptyContent } from '@kinvolk/headlamp-plugin/lib/CommonComponents'; -import { - Accordion, - AccordionDetails, - AccordionSummary, - Grid, - Link, - Tooltip, - Typography, -} from '@material-ui/core'; import React from 'react'; -import { CreateItemAccordion } from '../../../../components/CreateItemAccordion'; -import { PageWithSubMenu } from '../../../../components/PageWithSubMenu'; -import { PageWrapper } from '../../../../components/PageWrapper'; -import { Render } from '../../../../components/Render'; import { EDP_USER_GUIDE } from '../../../../constants/urls'; -import { ICONS } from '../../../../icons/iconify-icons-mapping'; import { SecretKubeObject } from '../../../../k8s/Secret'; import { SecretKubeObjectInterface } from '../../../../k8s/Secret/types'; import { getDefaultNamespace } from '../../../../utils/getDefaultNamespace'; import { ManageSonarIntegrationSecret } from '../../../../widgets/ManageSonarIntegrationSecret'; -import { menu } from '../../menu'; +import { ConfigurationBody } from '../../components/ConfigurationBody'; import { SONAR_INTEGRATION_PAGE_DESCRIPTION } from './constants'; const findSonarIntegrationSecret = (items: SecretKubeObjectInterface[]) => items?.find(el => el.metadata.name === 'sonar-ciuser-token'); export const PageView = () => { - const [expandedPanel, setExpandedPanel] = React.useState(null); - - const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => { - setExpandedPanel(isExpanded ? panel : null); - }; - const [sonarSecret, setSonarSecret] = React.useState(null); React.useEffect(() => { @@ -53,111 +31,56 @@ export const PageView = () => { }; }, []); - const handleClosePlaceholder = () => { - setExpandedPanel(null); - }; - - const sonarSecretName = sonarSecret?.metadata.name; - const sonarSecretOwnerReference = sonarSecret?.metadata?.ownerReferences?.[0].kind; - const creationDisabled = React.useMemo( () => (sonarSecret === null ? true : !!sonarSecret), [sonarSecret] ); + const secretsArray = [sonarSecret].filter(Boolean); + + const configurationItemList = React.useMemo( + () => + secretsArray.map(el => { + const ownerReference = el?.metadata?.ownerReferences?.[0].kind; + + return { + id: el?.metadata?.name || el?.metadata?.uid, + title: el?.metadata.name, + ownerReference, + component: ( + + ), + }; + }), + [secretsArray] + ); + return ( - - - - - - {SONAR_INTEGRATION_PAGE_DESCRIPTION.label} - - - {SONAR_INTEGRATION_PAGE_DESCRIPTION.description}{' '} - - - Learn more. - - - - - - - - - - - - - - - - {sonarSecret ? ( - - - } - > - - - - {sonarSecret?.metadata.name} - - - - - - - - - - - - - - - - - - - - - ) : ( - - - No integration found - - - )} - - - - - + ({ + title: 'Create service account', + disabled: creationDisabled, + component: ( + + ), + })} + items={configurationItemList} + emptyMessage={'No SonarQube integration secrets found'} + /> ); };