Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat: Add diff and Dockerfile support for template version page #5339

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Dec 8, 2022
Merged

feat: Add diff and Dockerfile support for template version page #5339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
7bf286f
Load diff files
BrunoQuaresma Dec 6, 2022
fc414bc
Show diff files with monaco
BrunoQuaresma Dec 6, 2022
b0a0ec0
Update wrapper
BrunoQuaresma Dec 6, 2022
43e256d
Add reference
BrunoQuaresma Dec 6, 2022
294bab5
Add Docker icon
BrunoQuaresma Dec 6, 2022
8503418
Show diff badge
BrunoQuaresma Dec 6, 2022
1c05356
Do safe request
BrunoQuaresma Dec 6, 2022
7585ab1
Improve extension language
BrunoQuaresma Dec 7, 2022
c716995
Merge branch 'main' of github.com:coder/coder into bq/add-diff
BrunoQuaresma Dec 7, 2022
e1bcc93
Add a few fixes
BrunoQuaresma Dec 7, 2022
ed9559f
Add more tests for t previous query
BrunoQuaresma Dec 7, 2022
1db00e3
Update deps
BrunoQuaresma Dec 7, 2022
f86e024
Remove test
BrunoQuaresma Dec 7, 2022
f37dabe
Remove unecessary import
BrunoQuaresma Dec 7, 2022
5c141ba
Fix databse fake
BrunoQuaresma Dec 7, 2022
1ca4d0a
Update coderd/database/queries/templateversions.sql
BrunoQuaresma Dec 8, 2022
9f6dbef
Apply PR suggestions
BrunoQuaresma Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions coderd/database/databasefake/databasefake.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1743,6 +1743,13 @@ func (q *fakeQuerier) GetPreviousTemplateVersion(_ context.Context, arg database
if templateVersion.ID == currentTemplateVersion.ID {
continue
}
if templateVersion.OrganizationID != arg.OrganizationID {
continue
}
if templateVersion.TemplateID != currentTemplateVersion.TemplateID {
continue
}

if templateVersion.CreatedAt.Before(currentTemplateVersion.CreatedAt) {
previousTemplateVersions = append(previousTemplateVersions, templateVersion)
}
Expand Down
2 changes: 2 additions & 0 deletions coderd/database/queries.sql.go
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions coderd/database/queries/templateversions.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,5 +122,7 @@ WHERE
FROM template_versions AS tv
WHERE tv.organization_id = $1 AND tv.name = $2 AND tv.template_id = $3
)
AND organization_id = $1
AND template_id = $3
ORDER BY created_at DESC
LIMIT 1;
39 changes: 29 additions & 10 deletions coderd/templateversions_test.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -970,13 +970,24 @@ func TestPreviousTemplateVersion(t *testing.T) {
t.Parallel()
client := coderdtest.New(t, &coderdtest.Options{IncludeProvisionerDaemon: true})
user := coderdtest.CreateFirstUser(t, client)
version := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
coderdtest.AwaitTemplateVersionJob(t, client, version.ID)

// Create two templates to be sure it is not returning a previous version
// from another template
templateAVersion1 := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
coderdtest.CreateTemplate(t, client, user.OrganizationID, templateAVersion1.ID)
coderdtest.AwaitTemplateVersionJob(t, client, templateAVersion1.ID)
// Create two versions for the template B to be sure if we try to get the
// previous version of the first version it will returns a 404
templateBVersion1 := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
templateB := coderdtest.CreateTemplate(t, client, user.OrganizationID, templateBVersion1.ID)
coderdtest.AwaitTemplateVersionJob(t, client, templateBVersion1.ID)
templateBVersion2 := coderdtest.UpdateTemplateVersion(t, client, user.OrganizationID, nil, templateB.ID)
coderdtest.AwaitTemplateVersionJob(t, client, templateBVersion2.ID)

ctx, cancel := context.WithTimeout(context.Background(), testutil.WaitLong)
defer cancel()

_, err := client.PreviousTemplateVersion(ctx, user.OrganizationID, version.Name)
_, err := client.PreviousTemplateVersion(ctx, user.OrganizationID, templateBVersion1.Name)
var apiErr *codersdk.Error
require.ErrorAs(t, err, &apiErr)
require.Equal(t, http.StatusNotFound, apiErr.StatusCode())
Expand All @@ -986,17 +997,25 @@ func TestPreviousTemplateVersion(t *testing.T) {
t.Parallel()
client := coderdtest.New(t, &coderdtest.Options{IncludeProvisionerDaemon: true})
user := coderdtest.CreateFirstUser(t, client)
previousVersion := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
coderdtest.AwaitTemplateVersionJob(t, client, previousVersion.ID)
template := coderdtest.CreateTemplate(t, client, user.OrganizationID, previousVersion.ID)
latestVersion := coderdtest.UpdateTemplateVersion(t, client, user.OrganizationID, nil, template.ID)
coderdtest.AwaitTemplateVersionJob(t, client, latestVersion.ID)

// Create two templates to be sure it is not returning a previous version
// from another template
templateAVersion1 := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
coderdtest.CreateTemplate(t, client, user.OrganizationID, templateAVersion1.ID)
coderdtest.AwaitTemplateVersionJob(t, client, templateAVersion1.ID)
// Create two versions for the template B so we can try to get the previous
// version of version 2
templateBVersion1 := coderdtest.CreateTemplateVersion(t, client, user.OrganizationID, nil)
templateB := coderdtest.CreateTemplate(t, client, user.OrganizationID, templateBVersion1.ID)
coderdtest.AwaitTemplateVersionJob(t, client, templateBVersion1.ID)
templateBVersion2 := coderdtest.UpdateTemplateVersion(t, client, user.OrganizationID, nil, templateB.ID)
coderdtest.AwaitTemplateVersionJob(t, client, templateBVersion2.ID)

ctx, cancel := context.WithTimeout(context.Background(), testutil.WaitLong)
defer cancel()

result, err := client.PreviousTemplateVersion(ctx, user.OrganizationID, latestVersion.Name)
result, err := client.PreviousTemplateVersion(ctx, user.OrganizationID, templateBVersion2.Name)
require.NoError(t, err)
require.Equal(t, previousVersion.ID, result.ID)
require.Equal(t, templateBVersion1.ID, result.ID)
})
}
10 changes: 5 additions & 5 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,18 @@
"@material-ui/core": "4.12.1",
"@material-ui/icons": "4.5.1",
"@material-ui/lab": "4.0.0-alpha.42",
"@monaco-editor/react": "4.4.6",
"@testing-library/react-hooks": "8.0.1",
"@types/color-convert": "^2.0.0",
"@types/react-color": "^3.0.6",
"@types/color-convert": "2.0.0",
"@types/react-color": "3.0.6",
"@vitejs/plugin-react": "2.1.0",
"@xstate/inspect": "0.6.5",
"@xstate/react": "3.0.1",
"axios": "0.26.1",
"can-ndjson-stream": "1.0.2",
"chart.js": "3.9.1",
"chartjs-adapter-date-fns": "2.0.0",
"color-convert": "^2.0.1",
"color-convert": "2.0.1",
"cron-parser": "4.7.0",
"cronstrue": "2.14.0",
"date-fns": "2.29.3",
Expand All @@ -57,13 +58,12 @@
"just-debounce-it": "3.1.1",
"react": "18.2.0",
"react-chartjs-2": "4.3.1",
"react-color": "^2.19.3",
"react-color": "2.19.3",
"react-dom": "18.2.0",
"react-helmet-async": "1.3.0",
"react-i18next": "12.0.0",
"react-markdown": "8.0.3",
"react-router-dom": "6.4.1",
"react-syntax-highlighter": "15.5.0",
"remark-gfm": "3.0.1",
"sourcemapped-stacktrace": "1.1.11",
"tzdata": "1.0.30",
Expand Down
28 changes: 28 additions & 0 deletions site/src/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,34 @@ export const getTemplateVersionByName = async (
return response.data
}

export type GetPreviousTemplateVersionByNameResponse =
| TypesGen.TemplateVersion
| undefined
Copy link
Member

@Kira-Pilot Kira-Pilot Dec 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make a type for this on the BE? Maybe in codersdk/templateversions.go? Nvmd, I see what's happening

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great!


export const getPreviousTemplateVersionByName = async (
organizationId: string,
versionName: string,
): Promise<GetPreviousTemplateVersionByNameResponse> => {
try {
const response = await axios.get<TypesGen.TemplateVersion>(
`/api/v2/organizations/${organizationId}/templateversions/${versionName}/previous`,
)
return response.data
} catch (error) {
// When there is no previous version, like the first version of a template,
// the API returns 404 so in this case we can safely return undefined
if (
axios.isAxiosError(error) &&
error.response &&
error.response.status === 404
) {
return undefined
}

throw error
}
}

export const updateTemplateMeta = async (
templateId: string,
data: TypesGen.UpdateTemplateMeta,
Expand Down
22 changes: 22 additions & 0 deletions site/src/components/Icons/DockerIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"

export const DockerIcon = (props: SvgIconProps): JSX.Element => (
<SvgIcon {...props} viewBox="0 0 32 32">
<path
d="M16.54,12.663H19.4v2.924h1.446a6.272,6.272,0,0,0,1.988-.333,5.091,5.091,0,0,0,.966-.436,3.584,3.584,0,0,1-.67-1.849,3.907,3.907,0,0,1,.7-2.753l.3-.348.358.288a4.558,4.558,0,0,1,1.795,2.892,4.375,4.375,0,0,1,3.319.309l.393.226-.207.4a4.141,4.141,0,0,1-4.157,1.983c-2.48,6.168-7.871,9.088-14.409,9.088-3.378,0-6.476-1.263-8.241-4.259l-.029-.049L2.7,20.227a8.316,8.316,0,0,1-.659-4.208l.04-.433H4.526V12.663H7.387V9.8h5.721V6.942H16.54v5.721Z"
style={{ fill: "#0096e6" }}
/>
<path
d="M12.006,24.567a6.022,6.022,0,0,1-3.14-3.089,10.329,10.329,0,0,1-2.264.343q-.5.028-1.045.028-.632,0-1.331-.037a9.051,9.051,0,0,0,7,2.769Q11.618,24.581,12.006,24.567Z"
style={{ fill: "#fff" }}
/>
<path
d="M7.08,13.346h.2v2.067h-.2Zm-.376,0h.2v2.067H6.7V13.346Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.368,0h.2v2.067h-.2V13.346ZM5,13.14H7.482v2.479H5Zm2.859-2.861h2.48v2.479H7.863Zm2.077.207h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2V10.486Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.368,0h.2v2.066h-.2Zm-.207,2.653h2.48v2.48H7.863V13.14Zm2.077.207h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2V13.346Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.368,0h.2v2.067h-.2Zm2.654-.207H13.2v2.48h-2.48V13.14Zm2.076.207H13v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.368,0h.2v2.067h-.2Zm-.206-3.067H13.2v2.479h-2.48V10.279Zm2.076.207H13v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.368,0h.2v2.066h-.2Zm2.654,2.653h2.479v2.48h-2.48V13.14Zm2.076.207h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.368,0h.192v2.067h-.2V13.346Zm-.206-3.067h2.479v2.479h-2.48V10.279Zm2.076.207h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.376,0h.2v2.066h-.2Zm-.368,0h.192v2.066h-.2V10.486Zm-.206-3.067h2.479V9.9h-2.48V7.419Zm2.076.206h.2V9.691h-.2Zm-.376,0h.2V9.691h-.2Zm-.376,0h.2V9.691h-.2Zm-.376,0h.2V9.691h-.2Zm-.376,0h.2V9.691h-.2Zm-.368,0h.192V9.691h-.2V7.625Zm2.654,5.514h2.479v2.48h-2.48V13.14Zm2.076.207h.195v2.067h-.2V13.346Zm-.376,0h.206v2.067h-.206Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.2Zm-.376,0h.2v2.067h-.205V13.346Zm-.368,0h.2v2.067h-.194V13.346Z"
style={{ fill: "#fff" }}
/>
<path
d="M10.188,19.638a.684.684,0,1,1-.684.684A.684.684,0,0,1,10.188,19.638Zm0,.194a.489.489,0,0,1,.177.033.2.2,0,1,0,.275.269.49.49,0,1,1-.453-.3Z"
style={{ fill: "#fff" }}
/>
</SvgIcon>
)
83 changes: 36 additions & 47 deletions site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,47 @@
import { FC } from "react"
import Editor, { DiffEditor } from "@monaco-editor/react"
import { useCoderTheme } from "./coderTheme"
import { makeStyles } from "@material-ui/core/styles"
import { ComponentProps, FC } from "react"
import { Prism } from "react-syntax-highlighter"
import { colors } from "theme/colors"
import darcula from "react-syntax-highlighter/dist/cjs/styles/prism/darcula"
import { combineClasses } from "util/combineClasses"

export const SyntaxHighlighter: FC<ComponentProps<typeof Prism>> = ({
className,
...props
}) => {
export const SyntaxHighlighter: FC<{
value: string
language: string
compareWith?: string
}> = ({ value, compareWith, language }) => {
const styles = useStyles()
const hasDiff = compareWith && value !== compareWith
const coderTheme = useCoderTheme()
const commonProps = {
language,
theme: coderTheme.name,
height: 560,
options: {
minimap: {
enabled: false,
},
renderSideBySide: true,
readOnly: true,
},
}

if (coderTheme.isLoading) {
return null
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need a loading state?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, it is VERY fast. It is only a few milliseconds to monaco be loaded. From what I was able to inspect there is no networking involved so the "loading time" is "static"


return (
<Prism
style={darcula}
useInlineStyles={false}
// Use inline styles does not work correctly
// https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/329
codeTagProps={{ style: {} }}
className={combineClasses([styles.prism, className])}
{...props}
/>
<div className={styles.wrapper}>
{hasDiff ? (
<DiffEditor original={compareWith} modified={value} {...commonProps} />
) : (
<Editor value={value} {...commonProps} />
)}
</div>
)
}

const useStyles = makeStyles((theme) => ({
prism: {
margin: 0,
background: theme.palette.background.paperLight,
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(2, 3),
// Line breaks are broken when used with line numbers on react-syntax-highlighter
// https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/483
overflowX: "auto",

"& code": {
color: theme.palette.text.secondary,
},

"& .key, & .property, & .code-snippet, & .keyword": {
color: colors.turquoise[7],
},

"& .url": {
color: colors.blue[6],
},

"& .comment": {
color: theme.palette.text.disabled,
},

"& .title": {
color: theme.palette.text.primary,
fontWeight: 600,
},
wrapper: {
padding: theme.spacing(1, 0),
background: theme.palette.background.paper,
},
}))
Loading