- Notifications
You must be signed in to change notification settings - Fork1k
feat(site): show version files diff based on active version#11686
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Uh oh!
There was an error while loading.Please reload this page.
Changes fromall commits
File filter
Filter by extension
Conversations
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -15,6 +15,7 @@ import { | ||
| type QueryOptions, | ||
| } from "react-query"; | ||
| import { delay } from "utils/delay"; | ||
| import { getTemplateVersionFiles } from "utils/templateVersion"; | ||
| export const templateByNameKey = (orgId: string, name: string) => [ | ||
| orgId, | ||
| @@ -236,6 +237,38 @@ export const resources = (versionId: string) => { | ||
| }; | ||
| }; | ||
| export const templateFiles = (fileId: string) => { | ||
| return { | ||
| queryKey: ["templateFiles", fileId], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Do you think it makes sense to update the query keys for There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. If we had the template ID or name I would say yes, but since they are "isolated" I'm ok to keep the current names until we see value in changing them. | ||
| queryFn: async () => { | ||
| const tarFile = await API.getFile(fileId); | ||
| return getTemplateVersionFiles(tarFile); | ||
| }, | ||
| }; | ||
| }; | ||
| export const previousTemplateVersion = ( | ||
| organizationId: string, | ||
| templateName: string, | ||
| versionName: string, | ||
| ) => { | ||
| return { | ||
| queryKey: [ | ||
| "templateVersion", | ||
| organizationId, | ||
| templateName, | ||
| versionName, | ||
| "previous", | ||
| ], | ||
| queryFn: () => | ||
| API.getPreviousTemplateVersionByName( | ||
| organizationId, | ||
| templateName, | ||
| versionName, | ||
| ), | ||
| }; | ||
| }; | ||
| const waitBuildToBeFinished = async (version: TemplateVersion) => { | ||
| let data: TemplateVersion; | ||
| let jobStatus: ProvisionerJobStatus; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| import { type Interpolation, type Theme } from "@emotion/react"; | ||
| import {useEffect,type FC } from "react"; | ||
| import { DockerIcon } from "components/Icons/DockerIcon"; | ||
| import { MarkdownIcon } from "components/Icons/MarkdownIcon"; | ||
| import { TerraformIcon } from "components/Icons/TerraformIcon"; | ||
| import { SyntaxHighlighter } from "components/SyntaxHighlighter/SyntaxHighlighter"; | ||
| import { UseTabResult, useTab } from "hooks/useTab"; | ||
| import { AllowedExtension, TemplateVersionFiles } from "utils/templateVersion"; | ||
| import InsertDriveFileOutlined from "@mui/icons-material/InsertDriveFileOutlined"; | ||
| @@ -39,19 +39,22 @@ const languageByExtension: Record<AllowedExtension, string> = { | ||
| interface TemplateFilesProps { | ||
| currentFiles: TemplateVersionFiles; | ||
| /** | ||
| * Files used to compare with current files | ||
| */ | ||
| baseFiles?: TemplateVersionFiles; | ||
| tab: UseTabResult; | ||
| } | ||
| export const TemplateFiles: FC<TemplateFilesProps> = ({ | ||
| currentFiles, | ||
| baseFiles, | ||
| tab, | ||
| }) => { | ||
| const filenames = Object.keys(currentFiles); | ||
| const selectedFilename = filenames[Number(tab.value)]; | ||
| const currentFile = currentFiles[selectedFilename]; | ||
| const previousFile =baseFiles &&baseFiles[selectedFilename]; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Not a call out to your code, but there's some weird behavior here (based around Here's aTypeScript snippet with the compiler tightened up. I'm going to be bringing this up at the Frontend Variety later today There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others.Learn more. Yes, I think we should set this rule as true:https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html#checked-indexed-accesses---nouncheckedindexedaccess | ||
| return ( | ||
| <div css={styles.files}> | ||
| @@ -61,9 +64,9 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({ | ||
| const extension = getExtension(filename) as AllowedExtension; | ||
| const icon = iconByExtension[extension]; | ||
| const hasDiff = | ||
| baseFiles && | ||
| baseFiles[filename] && | ||
| currentFiles[filename] !==baseFiles[filename]; | ||
| return ( | ||
| <button | ||
| @@ -93,6 +96,27 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({ | ||
| </div> | ||
| ); | ||
| }; | ||
| export const useFileTab = (templateFiles: TemplateVersionFiles | undefined) => { | ||
| // Tabs The default tab is the tab that has main.tf but until we loads the | ||
| // files and check if main.tf exists we don't know which tab is the default | ||
| // one so we just use empty string | ||
| const tab = useTab("file", ""); | ||
| const isLoaded = tab.value !== ""; | ||
| useEffect(() => { | ||
| if (templateFiles && !isLoaded) { | ||
| const terraformFileIndex = Object.keys(templateFiles).indexOf("main.tf"); | ||
| // If main.tf exists use the index if not just use the first tab | ||
| tab.set(terraformFileIndex !== -1 ? terraformFileIndex.toString() : "0"); | ||
| } | ||
| }, [isLoaded, tab, templateFiles]); | ||
| return { | ||
| ...tab, | ||
| isLoaded, | ||
| }; | ||
| }; | ||
| const styles = { | ||
| tabs: (theme) => ({ | ||
| display: "flex", | ||
This file was deleted.
Uh oh!
There was an error while loading.Please reload this page.