Add 'Manage' tab to Digital Twins page preview #957
There are no files selected for viewing
This file contains 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 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 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 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 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,26 @@ | ||
| import * as React from 'react'; | ||
| import { Dispatch, SetStateAction } from 'react'; | ||
| import { Button } from '@mui/material'; | ||
|
|
||
| interface DeleteButtonProps { | ||
| setShowLog: Dispatch<React.SetStateAction<boolean>>; | ||
| } | ||
|
|
||
| const handleToggleLog = (setShowLog: Dispatch<SetStateAction<boolean>>) => { | ||
|
There was a problem hiding this comment. The purpose of the function is unclear. The delete button is on Manage tab where there is no need for log dialogue. There was a problem hiding this comment. The function has been renamed |
||
| setShowLog(true); | ||
| }; | ||
|
|
||
| function DeleteButton({ setShowLog }: DeleteButtonProps) { | ||
| return ( | ||
| <Button | ||
| variant="contained" | ||
| size="small" | ||
| color="primary" | ||
| onClick={() => handleToggleLog(setShowLog)} | ||
| > | ||
| Delete | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| export default DeleteButton; | ||
This file contains 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,35 @@ | ||
| import * as React from 'react'; | ||
| import { Dispatch, SetStateAction } from 'react'; | ||
| import { Button } from '@mui/material'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { selectDigitalTwinByName } from '../../store/digitalTwin.slice'; | ||
| import DigitalTwin from '../../util/gitlabDigitalTwin'; | ||
|
|
||
| interface DialogButtonProps { | ||
| assetName: string; | ||
| setShowLog: Dispatch<React.SetStateAction<boolean>>; | ||
| } | ||
|
|
||
| export const handleToggleLog = async ( | ||
|
There was a problem hiding this comment. Is it There was a problem hiding this comment. The function has been renamed |
||
| digitalTwin: DigitalTwin, | ||
| setShowLog: Dispatch<SetStateAction<boolean>>, | ||
| ) => { | ||
| await digitalTwin.getFullDescription(); | ||
| setShowLog(true); | ||
| }; | ||
|
|
||
| function DetailsButton({ assetName, setShowLog }: DialogButtonProps) { | ||
| const digitalTwin = useSelector(selectDigitalTwinByName(assetName)); | ||
| return ( | ||
| <Button | ||
| variant="contained" | ||
| size="small" | ||
| color="primary" | ||
| onClick={() => handleToggleLog(digitalTwin, setShowLog)} | ||
| > | ||
| Details | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| export default DetailsButton; | ||
This file contains 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,28 @@ | ||
| import * as React from 'react'; | ||
| import { Button } from '@mui/material'; | ||
| import { Dispatch, SetStateAction } from 'react'; | ||
|
|
||
| interface ReconfigureButtonProps { | ||
| setShowReconfigure: Dispatch<SetStateAction<boolean>>; | ||
| } | ||
|
|
||
| const handleToggleReconfigure = ( | ||
|
There was a problem hiding this comment. The Reconfigure button is never inactive. The original html page and all the related React components are active in the background. Is there a need to deactivate the Details button. Perhaps you intend to use this click action to show README in which case the code structure and names have to reflect that intention? There was a problem hiding this comment. The function has been changed into There was a problem hiding this comment. An updated message: "There is no README.md file for the hello-world digital twin" |
||
| setShowReconfigure: Dispatch<SetStateAction<boolean>>, | ||
| ) => { | ||
| setShowReconfigure((prev) => !prev); | ||
| }; | ||
|
|
||
| function ReconfigureButton({ setShowReconfigure }: ReconfigureButtonProps) { | ||
| return ( | ||
| <Button | ||
| variant="contained" | ||
| size="small" | ||
| color="primary" | ||
| onClick={() => handleToggleReconfigure(setShowReconfigure)} | ||
| > | ||
| Reconfigure | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| export default ReconfigureButton; | ||
This file contains 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 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,66 @@ | ||
| import * as React from 'react'; | ||
| import { useState } from 'react'; | ||
| import { Box, Grid, Tabs, Tab } from '@mui/material'; | ||
| // import { Resizable } from 'react-resizable'; | ||
| import EditorTab from './EditorTab'; | ||
| import PreviewTab from './PreviewTab'; | ||
| import Sidebar from './Sidebar'; | ||
|
|
||
| interface EditorProps { | ||
| DTName: string; | ||
| } | ||
|
|
||
| function Editor({ DTName }: EditorProps) { | ||
| const [activeTab, setActiveTab] = useState(0); | ||
| const [fileName, setFileName] = useState(''); | ||
| const [fileContent, setFileContent] = useState(''); | ||
| const [fileType, setFileType] = useState(''); | ||
|
|
||
| const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { | ||
| setActiveTab(newValue); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box sx={{ display: 'flex', height: '100%', width: '100%' }}> | ||
| <Sidebar | ||
| name={DTName} | ||
| setFileName={setFileName} | ||
| setFileContent={setFileContent} | ||
| setFileType={setFileType} | ||
| /> | ||
|
|
||
| <Grid container direction="column" sx={{ flexGrow: 1, padding: 2 }}> | ||
| <Tabs | ||
| value={activeTab} | ||
| onChange={handleTabChange} | ||
| aria-label="editor preview tabs" | ||
| > | ||
| <Tab label="Editor" /> | ||
| <Tab label="Preview" /> | ||
| </Tabs> | ||
|
|
||
| <Box | ||
| sx={{ | ||
| flexGrow: 1, | ||
| padding: 2, | ||
| border: '1px solid lightgray', | ||
| marginTop: 2, | ||
| }} | ||
| > | ||
| {activeTab === 0 && ( | ||
| <EditorTab | ||
| fileName={fileName} | ||
| fileContent={fileContent} | ||
| setFileContent={setFileContent} | ||
| /> | ||
| )} | ||
| {activeTab === 1 && ( | ||
| <PreviewTab fileContent={fileContent} fileType={fileType} /> | ||
| )} | ||
| </Box> | ||
| </Grid> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| export default Editor; |
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are also "details" and "reconfigure" buttons. Why are they treated differently from delete button?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The
onDeletefunction is passed exclusively toAssetCardManage, which includes the Delete button. This is because it is the only button that, in addition to having an API call viagitlabDigitalTwin, must also modify the store via dispatch with thedeleteAssetfunction.