Skip to content

Commit 8d3c1e3

Browse files
OliwiaGoworOliwiaGowor
committed
feat: adding resource to the forms
1 parent 9ba8c46 commit 8d3c1e3

File tree

5 files changed

+106
-79
lines changed

5 files changed

+106
-79
lines changed

‎src/components/KymaCompanion/components/Chat/messages/CodePanel.tsx‎

Lines changed: 93 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,28 @@
1-
import { Text, Panel, Title, Icon, FlexBox } from '@ui5/webcomponents-react';
1+
import {
2+
Text,
3+
Panel,
4+
Title,
5+
Icon,
6+
FlexBox,
7+
Link,
8+
Button,
9+
} from '@ui5/webcomponents-react';
210
import { formatCodeSegment } from 'components/KymaCompanion/utils/formatMarkdown';
311
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
4-
import { useRecoilValue } from 'recoil';
12+
import { useRecoilState, useRecoilValue } from 'recoil';
513
import {
614
isCurrentThemeDark,
715
Theme,
816
themeState,
917
} from 'state/preferences/themeAtom';
1018
import copyToCliboard from 'copy-to-clipboard';
1119
import './CodePanel.scss';
20+
import { columnLayoutState } from 'state/columnLayoutAtom';
21+
import { useUrl } from 'hooks/useUrl';
22+
import { useNavigate, useSearchParams } from 'react-router-dom';
23+
import { clusterState } from 'state/clusterAtom';
24+
import jsyaml from 'js-yaml';
25+
import pluralize from 'pluralize';
1226

1327
function getCustomTheme(theme: Theme) {
1428
const isDark = isCurrentThemeDark(theme);
@@ -51,13 +65,70 @@ function getCustomTheme(theme: Theme) {
5165
}
5266

5367
interface CodePanelProps {
54-
text: string;
68+
segment: object;
5569
}
5670

57-
export default function CodePanel({ text }: CodePanelProps): JSX.Element {
71+
export default function CodePanel({ segment }: CodePanelProps): JSX.Element {
5872
const theme = useRecoilValue(themeState);
5973
const syntaxTheme = getCustomTheme(theme);
60-
const { language, code } = formatCodeSegment(text);
74+
const { language, code } = formatCodeSegment(segment?.content ?? segment);
75+
const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState);
76+
const currUrl = useUrl();
77+
const navigate = useNavigate();
78+
const [searchParams] = useSearchParams();
79+
const cluster = useRecoilValue(clusterState);
80+
81+
const createUrl = (namespace, resType, type, resName) => {
82+
const basePath = `/cluster/${cluster?.contextName}`;
83+
const resourcePath = `${
84+
namespace ? `/namespaces/${namespace}` : ''
85+
}/${pluralize(resType).toLowerCase()}${resName ? '/' + resName : ''}`;
86+
// const layoutParam = searchParams.get('layout')
87+
// ? `?layout=${searchParams.get('layout')}`
88+
// : '';
89+
const createParams =
90+
type === 'Update'
91+
? '?layout=TwoColumnsMidExpanded&showEdit=true'
92+
: '?layout=TwoColumnsMidExpanded&showCreate=true';
93+
94+
return `${basePath}${resourcePath}${createParams}`;
95+
};
96+
97+
const handleSetupInEditor = (url, resource, type) => {
98+
const parts = url.split('/').slice(1); // Remove the leading empty string from split
99+
let [namespace, resType, resName] = [null, '', ''];
100+
if (parts[0] === 'namespaces') {
101+
[namespace, resType, resName] = [parts[1], parts[2], parts[3]];
102+
103+
setLayoutColumn({
104+
...layoutState,
105+
layout: 'TwoColumnsMidExpanded',
106+
showCreate:
107+
type === 'New'
108+
? {
109+
...layoutState.showCreate,
110+
resource: jsyaml.load(resource.replace('yaml', '')),
111+
resourceType: resType,
112+
namespaceId: namespace,
113+
}
114+
: null,
115+
showEdit:
116+
type === 'Update'
117+
? {
118+
...layoutState.showEdit,
119+
resource: jsyaml.load(resource.replace('yaml', '')),
120+
resourceType: resType,
121+
namespaceId: namespace,
122+
}
123+
: null,
124+
});
125+
} else {
126+
[resType, resName] = [parts[0], parts[1]];
127+
}
128+
129+
navigate(createUrl(namespace, resType, type, resName));
130+
};
131+
61132
return !language ? (
62133
<div className="code-response sap-margin-y-small">
63134
<Icon
@@ -77,12 +148,23 @@ export default function CodePanel({ text }: CodePanelProps): JSX.Element {
77148
<Title level="H6" size="H6">
78149
{language}
79150
</Title>
80-
<Icon
81-
mode="Interactive"
82-
name="copy"
83-
design="Information"
84-
onClick={() => copyToCliboard(code)}
85-
/>
151+
<Button icon="copy" onClick={() => copyToCliboard(code)}>
152+
{segment?.link?.name}
153+
</Button>
154+
{segment?.type === 'codeWithAction' && (
155+
<Button
156+
icon="sys-add"
157+
onClick={() =>
158+
handleSetupInEditor(
159+
segment?.link?.address,
160+
segment?.content,
161+
segment?.link?.type,
162+
)
163+
}
164+
>
165+
{segment?.link?.name}
166+
</Button>
167+
)}
86168
</FlexBox>
87169
}
88170
fixed

‎src/components/KymaCompanion/components/Chat/messages/Message.tsx‎

Lines changed: 3 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,6 @@ export default function Message({
4141
messageChunks,
4242
isLoading,
4343
}: MessageProps): JSX.Element {
44-
const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState);
45-
const currUrl = useUrl();
46-
const navigate = useNavigate();
47-
const [searchParams] = useSearchParams();
48-
const cluster = useRecoilValue(clusterState);
49-
5044
if (isLoading) {
5145
return <TasksList messageChunks={messageChunks} />;
5246
}
@@ -60,51 +54,6 @@ export default function Message({
6054
console.log(segmentedText);
6155
console.log(test);
6256

63-
const createUrl = url => {};
64-
console.log(layoutState);
65-
const handleSetupInEditor = (url, resource) => {
66-
// const resourceUrl = usePrepareResourceUrl({
67-
// apiGroup: '',
68-
// apiVersion: '',
69-
// resourceType: pluralize(resource?.kind || '').toLowerCase(),
70-
// })
71-
setLayoutColumn({
72-
...layoutState,
73-
showCreate: {
74-
...layoutState.showCreate,
75-
resource: resource,
76-
resourceType: '',
77-
namespaceId: '',
78-
},
79-
});
80-
const parts = url.split('/');
81-
parts.shift();
82-
let resType = '';
83-
let namespace;
84-
console.log(parts);
85-
if (parts[0] === 'namespaces') {
86-
resType = parts[2];
87-
namespace = parts[1];
88-
navigate(
89-
`/cluster/${cluster?.contextName}/namespaces/${namespace}/${pluralize(
90-
resType,
91-
).toLowerCase()}/${parts[3]}`,
92-
);
93-
} else {
94-
resType = parts[0];
95-
resType = parts[2];
96-
namespace = parts[1];
97-
navigate(
98-
`/cluster/${cluster?.contextName}/${pluralize(resType).toLowerCase()}/${
99-
parts[1]
100-
}`,
101-
);
102-
}
103-
console.log(resType);
104-
};
105-
106-
console.log(window.location.pathname);
107-
10857
return (
10958
<div className={'message ' + className}>
11059
{segmentedText && (
@@ -115,24 +64,13 @@ export default function Message({
11564
<Text key={index} className="text bold">
11665
{segment.content}
11766
</Text>
118-
) : segment.type === 'code' ? (
119-
<CodePanel key={index} text={segment.content} />
67+
) : segment.type === 'code' ||
68+
segment.type === 'codeWithAction' ? (
69+
<CodePanel key={index} segment={segment} />
12070
) : segment.type === 'highlighted' ? (
12171
<Text key={index} className="text highlighted">
12272
{segment.content}
12373
</Text>
124-
) : segment.type === 'codeWithAction' ? (
125-
<>
126-
<CodePanel key={index} text={segment.content} />
127-
<Link
128-
key={index}
129-
onClick={() =>
130-
handleSetupInEditor(segment.link.address, segment.content)
131-
}
132-
>
133-
{segment.link.name}
134-
</Link>
135-
</>
13674
) : (
13775
segment.content
13876
)

‎src/components/KymaCompanion/utils/formatMarkdown.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,11 @@ export function handleResponseFormatting(text: string) {
6868
);
6969

7070
formattedContent = formattedContent.concat(segmentMarkdownText(text));
71-
console.log(formattedContent);
7271

7372
// Step 3: Reinsert YAML blocks at their placeholders
7473
for (let i = 0; i < formattedContent.length; i++) {
75-
console.log(formattedContent[i].content);
7674
const match = formattedContent[i].content.match(/YAML_PLACEHOLDER_(\d+)/);
77-
console.log(match);
75+
7876
if (match) {
7977
const yamlIndex = parseInt(match[1], 10);
8078
formattedContent[i] = {

‎src/shared/ResourceForm/components/ResourceForm.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { cloneDeep } from 'lodash';
2424
import { getDescription, SchemaContext } from 'shared/helpers/schema';
2525

2626
import './ResourceForm.scss';
27+
import { columnLayoutState } from 'state/columnLayoutAtom';
2728

2829
export const excludeStatus = resource => {
2930
const modifiedResource = cloneDeep(resource);
@@ -73,6 +74,10 @@ export function ResourceForm({
7374
resetLayout,
7475
formWithoutPanel,
7576
}) {
77+
const layoutState = useRecoilValue(columnLayoutState);
78+
if (layoutState?.showCreate?.resource)
79+
resource = layoutState.showCreate.resource;
80+
if (layoutState?.showEdit?.resource) resource = layoutState.showEdit.resource;
7681
// readonly schema ID, set only once
7782
const resourceSchemaId = useMemo(
7883
() => resource?.apiVersion + '/' + resource?.kind,

‎src/shared/components/DynamicPageComponent/DynamicPageComponent.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,10 @@ export const DynamicPageComponent = ({
142142
tabContainerRef,
143143
);
144144

145+
useEffect(() => {
146+
if (showEdit) setSelectedSectionIdState('edit');
147+
}, [showEdit]);
148+
145149
const handleColumnClose = () => {
146150
layoutNumber === 'MidColumn'
147151
? setLayoutColumn({

0 commit comments

Comments
 (0)