Feature/display resource yaml #81
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { ResourceProps } from './YamlViewButton.tsx'; | ||
| import { FC } from 'react'; | ||
|
|
||
| import { stringify } from 'yaml'; | ||
|
|
||
| import { useTranslation } from 'react-i18next'; | ||
| import { ResourceObject } from '../../lib/api/types/crate/resourceObject.ts'; | ||
| import Loading from '../Shared/Loading.tsx'; | ||
| import IllustratedError from '../Shared/IllustratedError.tsx'; | ||
| import YamlViewer from './YamlViewer.tsx'; | ||
| import useResource from '../../lib/api/useApiResource'; | ||
|
|
||
| export const YamlLoader: FC<ResourceProps> = ({ | ||
| workspaceName, | ||
| resourceType, | ||
| resourceName, | ||
| }) => { | ||
| const { isLoading, data, error } = useResource( | ||
| ResourceObject(workspaceName ?? '', resourceType, resourceName), | ||
| ); | ||
| const { t } = useTranslation(); | ||
| if (isLoading) return <Loading />; | ||
| if (error) { | ||
| return <IllustratedError error={t('common.cannotLoadData')} />; | ||
| } | ||
|
|
||
| return ( | ||
| <YamlViewer | ||
| yamlString={stringify(data)} | ||
| filename={`${workspaceName ? `${workspaceName}_` : ''}${resourceType}_${resourceName}`} | ||
| /> | ||
| ); | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,51 @@ | ||||||
| import { Bar, Button, Dialog } from '@ui5/webcomponents-react'; | ||||||
| import { FC, useState } from 'react'; | ||||||
| import { YamlLoader } from './YamlLoader.tsx'; | ||||||
| import { useTranslation } from 'react-i18next'; | ||||||
|
|
||||||
| export type ResourceProps = { | ||||||
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||
| workspaceName?: string; | ||||||
|
There was a problem hiding this comment. Can this ever be Just wondering if we can simply write
Suggested change
There was a problem hiding this comment. Yes, for the Project YAML it is empty. There was a problem hiding this comment. Ok, in this case I’m wondering what if we made this a bit more generic by decoupling from the workspace/project context? Something like: export type YamlViewButtonProps = {
apiPath: string;
localFilename: string;
}After all, it’s essentially just a dialog that displays downloads and YAML content. It probably shouldn’t need to know the specifics of how to retrieve that data. Just thinking out loud here - we’ll likely need to revisit the fetch logic when we implement GraphQL anyway, so we can see how this approach works then. |
||||||
| resourceType: 'projects' | 'workspaces' | 'managedcontrolplanes'; | ||||||
| resourceName: string; | ||||||
| }; | ||||||
|
|
||||||
| export const YamlViewButton: FC<ResourceProps> = ({ | ||||||
| workspaceName, | ||||||
| resourceType, | ||||||
| resourceName, | ||||||
| }) => { | ||||||
| const [isOpen, setIsOpen] = useState(false); | ||||||
| const { t } = useTranslation(); | ||||||
| return ( | ||||||
| <span> | ||||||
|
There was a problem hiding this comment. Any reason for the
Suggested change
There was a problem hiding this comment. It is wrapped in span so it it display: inline instead of display:block. So I can put it next to some text. There was a problem hiding this comment. Wouldn’t |
||||||
| <Dialog | ||||||
| open={isOpen} | ||||||
lucasgoral marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
| stretch | ||||||
| footer={ | ||||||
| <Bar | ||||||
| design="Footer" | ||||||
| endContent={ | ||||||
| <Button design="Emphasized" onClick={() => setIsOpen(false)}> | ||||||
| {t('common.close')} | ||||||
| </Button> | ||||||
| } | ||||||
| /> | ||||||
| } | ||||||
| > | ||||||
| <YamlLoader | ||||||
| workspaceName={workspaceName} | ||||||
| resourceName={resourceName} | ||||||
| resourceType={resourceType} | ||||||
| /> | ||||||
| </Dialog> | ||||||
| <Button | ||||||
| icon="document" | ||||||
| aria-label={t('buttons.viewResource')} | ||||||
| title={t('buttons.viewResource')} | ||||||
| onClick={() => { | ||||||
| setIsOpen(true); | ||||||
| }} | ||||||
| /> | ||||||
| </span> | ||||||
| ); | ||||||
| }; | ||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,10 @@ | ||||||||
| .container { | ||||||||
| position: relative; | ||||||||
|
There was a problem hiding this comment. I’m wondering if we should change the overflow to get rid of the horizontal scrollbar, although it feels a bit hacky. What do you think?
Suggested change
I don’t think there’s any guarantee that we can fit the content horizontally to the screen, so maybe not the best idea. 🤔 |
||||||||
| } | ||||||||
|
|
||||||||
| .buttons { | ||||||||
| position: sticky; | ||||||||
lucasgoral marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||
| top: 0; | ||||||||
| right: 0; | ||||||||
| z-index: 1; | ||||||||
| } | ||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,85 @@ | ||||||
| import { FC } from 'react'; | ||||||
| import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; | ||||||
| import { | ||||||
| materialLight, | ||||||
| materialDark, | ||||||
| } from 'react-syntax-highlighter/dist/esm/styles/prism'; // You can choose different styles | ||||||
|
||||||
| } from 'react-syntax-highlighter/dist/esm/styles/prism'; // You can choose different styles | |
| } from 'react-syntax-highlighter/dist/esm/styles/prism'; |
Good to know, though 😃
Comment on lines
+18
to
+21
There was a problem hiding this comment.
We could create a custom hook that handles both error handling and potentially a countdown timer (similar to other copy buttons that update their display after a few seconds).
For example, something like: const { copy, recentlyCopied } = useCopyToClipboard(2000);
What are your thoughts on this? If you agree, I’d suggest adding it as a new backlog item (i.e. not as a part of this pull request).
Comment on lines
+22
to
+32
There was a problem hiding this comment.
I noticed we already have a DownloadKubeconfig function that handles file downloads.
I think it might be worth considering extracting this logic into a separate function, like useFileDownload().
Perhaps we could tackle this refactoring in a follow-up task? What are your thoughts?
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
lucasgoral marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.