Skip to content

Commit

Permalink
HMS-5024: add use template modal
Browse files Browse the repository at this point in the history
  • Loading branch information
rverdile committed Dec 23, 2024
1 parent b6b719a commit 456d8e4
Show file tree
Hide file tree
Showing 6 changed files with 354 additions and 4 deletions.
24 changes: 23 additions & 1 deletion src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { render } from '@testing-library/react';
import {fireEvent, render} from '@testing-library/react';

Check warning on line 1 in src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx

View workflow job for this annotation

GitHub Actions / build

Replace `fireEvent,·render` with `·fireEvent,·render·`
import TemplateDetails from './TemplateDetails';
import { defaultTemplateItem } from 'testingHelpers';

Expand All @@ -14,6 +14,9 @@ jest.mock('react-router-dom', () => ({
useNavigate: jest.fn(),
useParams: () => ({ templateUUID: 'templateUUID' }),
Outlet: () => <></>,
useLocation: () => ({
pathname: '/templates/8b9f5062-5256-459a-9833-2b85b735225b/details/content/advisories',
}),
}));

jest.mock('Hooks/useArchVersion', () => () => ({
Expand All @@ -31,3 +34,22 @@ it('expect TemplateDetails to render correctly', () => {
expect(queryByText('Rhel9')).toBeInTheDocument();
expect(queryAllByText(defaultTemplateItem.name)).toHaveLength(2);
});

it('expect UseTemplateModal to render correctly', () => {
const { queryByText, getByLabelText } = render(<TemplateDetails />);

const useTemplate = getByLabelText('use-template-button') as Element;
expect(useTemplate).toBeInTheDocument();
fireEvent.click(useTemplate);
expect(queryByText('Assign the template to a system')).toBeInTheDocument()

Check warning on line 44 in src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx

View workflow job for this annotation

GitHub Actions / build

Insert `;`

const curlTab = getByLabelText('curl-tab') as Element;
expect(curlTab).toBeInTheDocument();
fireEvent.click(curlTab);
expect(queryByText('Download the repo file')).toBeInTheDocument()

Check warning on line 49 in src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx

View workflow job for this annotation

GitHub Actions / build

Insert `;`

const ansibleTab = getByLabelText('ansible-tab') as Element;
expect(ansibleTab).toBeInTheDocument();
fireEvent.click(ansibleTab);
expect(queryByText('Use this ansible playbook to download the repo file')).toBeInTheDocument()

Check warning on line 54 in src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx

View workflow job for this annotation

GitHub Actions / build

Insert `;`
});
17 changes: 14 additions & 3 deletions src/Pages/Templates/TemplateDetails/TemplateDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
LabelGroup,
Stack,
StackItem,
Title,
Title, Toolbar, ToolbarContent, ToolbarItem,

Check warning on line 10 in src/Pages/Templates/TemplateDetails/TemplateDetails.tsx

View workflow job for this annotation

GitHub Actions / build

Replace `·Toolbar,·ToolbarContent,` with `⏎··Toolbar,⏎··ToolbarContent,⏎·`
} from '@patternfly/react-core';
import { Outlet, useNavigate, useParams } from 'react-router-dom';
import { createUseStyles } from 'react-jss';
Expand All @@ -17,10 +17,12 @@ import { useFetchTemplate } from 'services/Templates/TemplateQueries';
import useArchVersion from 'Hooks/useArchVersion';
import DetailItem from './components/DetaiItem';
import { formatDateDDMMMYYYY } from 'helpers';
import TemplateDetailsTabs from './components/TemplateDetailsTabs';
import { global_BackgroundColor_light_100 } from '@patternfly/react-tokens';
import Loader from 'components/Loader';
import TemplateActionDropdown from './components/TemplateActionDropdown';
import UseTemplateModal from './components/UseTemplate/UseTemplateModal';
import React from 'react';
import TemplateDetailsTabs from './components/TemplateDetailsTabs';

const useStyles = createUseStyles({
fullHeight: {
Expand Down Expand Up @@ -107,7 +109,16 @@ export default function TemplateDetails() {
</Label>
</LabelGroup>
</Flex>
<TemplateActionDropdown />
<Toolbar>
<ToolbarContent>
<ToolbarItem spacer={{ default: 'spacerNone' }}>
<UseTemplateModal/>

Check warning on line 115 in src/Pages/Templates/TemplateDetails/TemplateDetails.tsx

View workflow job for this annotation

GitHub Actions / build

Insert `·`
</ToolbarItem>
<ToolbarItem>
<TemplateActionDropdown />

Check warning on line 118 in src/Pages/Templates/TemplateDetails/TemplateDetails.tsx

View workflow job for this annotation

GitHub Actions / build

Insert `·`
</ToolbarItem>
</ToolbarContent>
</Toolbar>
</StackItem>
<StackItem className={classes.descriptionMaxWidth}>
<Flex
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import {
ClipboardCopy,

Check warning on line 2 in src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx

View workflow job for this annotation

GitHub Actions / build

Delete `··`
ClipboardCopyButton,

Check warning on line 3 in src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx

View workflow job for this annotation

GitHub Actions / build

Delete `··`
ClipboardCopyVariant, CodeBlock, CodeBlockAction, CodeBlockCode,

Check warning on line 4 in src/Pages/Templates/TemplateDetails/components/UseTemplate/AnsibleTab.tsx

View workflow job for this annotation

GitHub Actions / build

Replace `····ClipboardCopyVariant,·CodeBlock,·CodeBlockAction,` with `··ClipboardCopyVariant,⏎··CodeBlock,⏎··CodeBlockAction,⏎·`
TabContent,
Text, TextContent,
TextList,
TextListItem,
TextVariants
} from '@patternfly/react-core';
import React from 'react';
import {createUseStyles} from 'react-jss';
import {useParams} from 'react-router-dom';

export const ANSIBLE_TAB = 'ansible'

const useStyles = createUseStyles({
textGroup: {
paddingTop: '8px',
},
})

type Props = {
tabContentRef: React.RefObject<HTMLElement>
}

const playbook1 = `---
- hosts: all
tasks:
- name: Download template.repo
ansible.builtin.get_url:
url: https://console.redhat.com/api/content-sources/v1/templates/`
const playbook2 = `/config.repo
dest: /etc/yum.repos.d/template.repo
mode: '0444'
client_cert: /etc/pki/consumer/cert.pem
client_key: /etc/pki/consumer/cert.key
`

const AnsibleTab = ({ tabContentRef }: Props) => {
const classes = useStyles();
const { templateUUID } = useParams();
const [copied, setCopied] = React.useState(false);

const clipboardCopyFunc = (event, text) => {
navigator.clipboard.writeText(text.toString());
};

const onClick = (event, text) => {
clipboardCopyFunc(event, text);
setCopied(true);
};

const actions = (
<React.Fragment>
<CodeBlockAction>
<ClipboardCopyButton
id="basic-copy-button"
textId="code-content"
aria-label="Copy to clipboard"
onClick={(e) => onClick(e, playbook1+`${templateUUID}`+playbook2)}
exitDelay={copied ? 1500 : 600}
maxWidth="110px"
variant="plain"
onTooltipHidden={() => setCopied(false)}
>
{copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}
</ClipboardCopyButton>
</CodeBlockAction>
</React.Fragment>
);

return (
<TabContent eventKey={ANSIBLE_TAB} id={ANSIBLE_TAB} ref={tabContentRef} hidden>
<TextContent className={classes.textGroup}>
<Text component={TextVariants.h2}>Register for subscriptions</Text>
<TextList isPlain>
<TextListItem>
<Text component="h6">Register with rhc</Text>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
rhc connect
</ClipboardCopy>
</TextListItem>
<TextListItem>
<Text component="h6">Or register with subscription manager</Text>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
subscription-manager register
</ClipboardCopy>
</TextListItem>
</TextList>
<TextList isPlain>
<TextListItem>
<Text component={TextVariants.h2}>Use this ansible playbook to download the repo file</Text>
<CodeBlock actions={actions}>
<CodeBlockCode>
{playbook1+`${templateUUID}`+playbook2}
</CodeBlockCode>
</CodeBlock>
<Text>Note: Adding or removing a repository from the template will not be reflected on the client until this file is re-downloaded</Text>
</TextListItem>
</TextList>
</TextContent>
</TabContent>
)
}

export default AnsibleTab;
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import {
ClipboardCopy,
ClipboardCopyVariant,
TabContent,
Text, TextContent,
TextList,
TextListItem,
TextVariants
} from '@patternfly/react-core';
import React from 'react';
import {createUseStyles} from 'react-jss';
import {useParams} from 'react-router-dom';

export const CURL_TAB = 'curl'

const useStyles = createUseStyles({
textGroup: {
paddingTop: '8px',
},
})

type Props = {
tabContentRef: React.RefObject<HTMLElement>
}

const CurlTab = ({ tabContentRef }: Props) => {
const classes = useStyles();
const { templateUUID } = useParams();

return (
<TabContent eventKey={CURL_TAB} id={CURL_TAB} ref={tabContentRef} hidden>
<TextContent className={classes.textGroup}>
<Text component={TextVariants.h2}>Register for subscriptions</Text>
<TextList isPlain>
<TextListItem>
<Text component="h6">Register with rhc</Text>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
rhc connect
</ClipboardCopy>
</TextListItem>
<TextListItem>
<Text component="h6">Or register with subscription manager</Text>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
subscription-manager register
</ClipboardCopy>
</TextListItem>
</TextList>
<TextList isPlain>
<TextListItem>
<Text component={TextVariants.h2}>Download the repo file</Text>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
{'curl -o /etc/yum.repos.d/template.repo https://console.redhat.com/api/content-sources/v1/templates/'+templateUUID+'/config.repo'}
</ClipboardCopy>
<Text>Note: Adding or removing a repository from the template will not be reflected on the client until this file is re-downloaded.</Text>
</TextListItem>
</TextList>
</TextContent>
</TabContent>
)
}

export default CurlTab;
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import {
ClipboardCopy,
ClipboardCopyVariant,
TabContent,
Text, TextContent,
TextList,
TextListItem,
TextVariants
} from '@patternfly/react-core';
import React from 'react';
import {ADD_ROUTE, DETAILS_ROUTE, SYSTEMS_ROUTE} from '../../../../../Routes/constants';
import {ExternalLinkAltIcon} from '@patternfly/react-icons';
import {createUseStyles} from 'react-jss';
import {useLocation} from 'react-router-dom';

export const INSIGHTS_TAB = 'insights'

const useStyles = createUseStyles({
textGroup: {
paddingTop: '8px',
},
})

type Props = {
tabContentRef: React.RefObject<HTMLElement>
}

const InsightsTab = ({ tabContentRef }: Props) => {
const classes = useStyles();

const { pathname } = useLocation();
const [mainRoute] = pathname?.split(`${DETAILS_ROUTE}/`) || [];
const addSystemsRoute = mainRoute + `${DETAILS_ROUTE}/`+ `${SYSTEMS_ROUTE}/` + `${ADD_ROUTE}/`;

return (
<TabContent eventKey={INSIGHTS_TAB} id={INSIGHTS_TAB} ref={tabContentRef}>
<TextContent className={classes.textGroup}>
<Text component={TextVariants.h2}>Register for subscriptions</Text>
<TextList isPlain>
<TextListItem>
<Text component="h6">Register with rhc</Text>
<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
rhc connect
</ClipboardCopy>
</TextListItem>
</TextList>
<Text component={TextVariants.h2}>Assign the template to a system</Text>
<TextList isPlain>
<TextListItem>
<Text>
Add template in {' '}
<a href={addSystemsRoute} rel='noreferrer' target='_blank'>
Systems <ExternalLinkAltIcon/>
</a>
</Text>
</TextListItem>
</TextList>
</TextContent>
</TabContent>
)
}

export default InsightsTab;
Loading

0 comments on commit 456d8e4

Please sign in to comment.