Skip to content

Commit 95b33e8

Browse files
geroplgeropl
committed
[dashboard] Add "Docker registry authentication" toggle under projects/env vars
Tool: gitpod/catfood.gitpod.cloud
1 parent e67be3f commit 95b33e8

File tree

2 files changed

+133
-46
lines changed

2 files changed

+133
-46
lines changed

‎components/dashboard/src/repositories/detail/variables/ConfigurationVariableList.tsx

+50-46
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Table, TableBody, TableHead, TableHeader, TableRow } from "@podkit/tabl
1414
import { useListConfigurationVariables } from "../../../data/configurations/configuration-queries";
1515
import { LoadingState } from "@podkit/loading/LoadingState";
1616
import { ConfigurationVariableItem } from "./ConfigurationVariableItem";
17+
import { EnableDockerdAuthentication } from "./EnableDockerdAuthentication";
1718

1819
type Props = {
1920
configuration: Configuration;
@@ -27,52 +28,55 @@ export const ConfigurationVariableList = ({ configuration }: Props) => {
2728
}
2829

2930
return (
30-
<ConfigurationSettingsField>
31-
{showAddVariableModal && (
32-
<AddVariableModal
33-
configurationId={configuration.id}
34-
onClose={() => {
35-
setShowAddVariableModal(false);
36-
}}
37-
/>
38-
)}
39-
<div className="mb-2 flex">
40-
<div className="flex-grow">
41-
<Heading3>Environment variables</Heading3>
42-
<Subheading>Manage repository-specific environment variables.</Subheading>
31+
<>
32+
<ConfigurationSettingsField>
33+
{showAddVariableModal && (
34+
<AddVariableModal
35+
configurationId={configuration.id}
36+
onClose={() => {
37+
setShowAddVariableModal(false);
38+
}}
39+
/>
40+
)}
41+
<div className="mb-2 flex">
42+
<div className="flex-grow">
43+
<Heading3>Environment variables</Heading3>
44+
<Subheading>Manage repository-specific environment variables.</Subheading>
45+
</div>
4346
</div>
44-
</div>
45-
{data.length === 0 ? (
46-
<div className="bg-pk-surface-secondary rounded-xl w-full p-6 flex flex-col justify-center space-y-3">
47-
<span className="font-semi-bold text-base">No environment variables are set</span>
48-
<span className="text-sm text-pk-content-secondary">
49-
All repository-specific environment variables will be visible in prebuilds and optionally in
50-
workspaces for this repository.
51-
</span>
52-
</div>
53-
) : (
54-
<Table>
55-
<TableHeader>
56-
<TableRow>
57-
<TableHead>Name</TableHead>
58-
<TableHead className="w-48">Visibility</TableHead>
59-
<TableHead className="w-16"></TableHead>
60-
</TableRow>
61-
</TableHeader>
62-
<TableBody>
63-
{data.map((variable) => (
64-
<ConfigurationVariableItem
65-
key={variable.id}
66-
configurationId={configuration.id}
67-
variable={variable}
68-
/>
69-
))}
70-
</TableBody>
71-
</Table>
72-
)}
73-
<Button className="mt-4" onClick={() => setShowAddVariableModal(true)}>
74-
Add Variable
75-
</Button>
76-
</ConfigurationSettingsField>
47+
{data.length === 0 ? (
48+
<div className="bg-pk-surface-secondary rounded-xl w-full p-6 flex flex-col justify-center space-y-3">
49+
<span className="font-semi-bold text-base">No environment variables are set</span>
50+
<span className="text-sm text-pk-content-secondary">
51+
All repository-specific environment variables will be visible in prebuilds and optionally in
52+
workspaces for this repository.
53+
</span>
54+
</div>
55+
) : (
56+
<Table>
57+
<TableHeader>
58+
<TableRow>
59+
<TableHead>Name</TableHead>
60+
<TableHead className="w-48">Visibility</TableHead>
61+
<TableHead className="w-16"></TableHead>
62+
</TableRow>
63+
</TableHeader>
64+
<TableBody>
65+
{data.map((variable) => (
66+
<ConfigurationVariableItem
67+
key={variable.id}
68+
configurationId={configuration.id}
69+
variable={variable}
70+
/>
71+
))}
72+
</TableBody>
73+
</Table>
74+
)}
75+
<Button className="mt-4" onClick={() => setShowAddVariableModal(true)}>
76+
Add Variable
77+
</Button>
78+
</ConfigurationSettingsField>
79+
<EnableDockerdAuthentication configuration={configuration} />
80+
</>
7781
);
7882
};

‎components/dashboard/src/repositories/detail/variables/EnableDockerdAuthentication.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/**
2+
* Copyright (c) 2025 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License.AGPL.txt in the project root for license information.
5+
*/
6+
7+
import { SwitchInputField } from "@podkit/switch/Switch";
8+
import { Heading3, Subheading } from "@podkit/typography/Headings";
9+
import { FC, useCallback } from "react";
10+
import { InputField } from "../../../components/forms/InputField";
11+
import { useToast } from "../../../components/toasts/Toasts";
12+
import { useId } from "../../../hooks/useId";
13+
import { ConfigurationSettingsField } from "../ConfigurationSettingsField";
14+
import { Configuration } from "@gitpod/public-api/lib/gitpod/v1/configuration_pb";
15+
import { SquareArrowOutUpRight } from "lucide-react";
16+
import { useConfiguration, useConfigurationMutation } from "../../../data/configurations/configuration-queries";
17+
import Alert from "../../../components/Alert";
18+
19+
type Props = {
20+
configuration: Configuration;
21+
};
22+
export const EnableDockerdAuthentication: FC<Props> = ({ configuration }) => {
23+
const { data } = useConfiguration(configuration.id);
24+
const configurationMutation = useConfigurationMutation();
25+
const { toast } = useToast();
26+
27+
const updateEnableDockerdAuthentication = useCallback(
28+
async (enable: boolean) => {
29+
await configurationMutation.mutateAsync(
30+
{
31+
configurationId: configuration.id,
32+
workspaceSettings: {
33+
enableDockerdAuthentication: enable,
34+
},
35+
},
36+
{
37+
onError: (error) => {
38+
toast(`Failed to update dockerd authentication: ${error.message}`);
39+
},
40+
},
41+
);
42+
},
43+
[configurationMutation, configuration.id, toast],
44+
);
45+
46+
const inputId = useId({ prefix: "enable-dockerd-authentication" });
47+
const isEnabled = data?.workspaceSettings?.enableDockerdAuthentication;
48+
49+
return (
50+
<ConfigurationSettingsField>
51+
<Heading3 className="flex flex-row items-center gap-2">Docker registry authentication</Heading3>
52+
<Subheading className="max-w-lg flex flex-col gap-2">
53+
<span className="flex-1 text-left">
54+
Enable authentication with Docker registries inside of workspaces based on the{" "}
55+
<code>GITPOD_IMAGE_AUTH</code> environment variable.
56+
</span>
57+
58+
<Alert type={"warning"} closable={false} showIcon={true} className="flex rounded p-2 w-2/3 mb-2 w-full">
59+
By enabling this, credentials specified in <code>GITPOD_IMAGE_AUTH</code> will be visible inside all
60+
workspaces on this project.
61+
</Alert>
62+
<a
63+
className="gp-link flex flex-row items-center gap-1"
64+
href="https://www.gitpod.io/docs/configure/repositories/environment-variables#docker-registry-authentication"
65+
target="_blank"
66+
rel="noreferrer"
67+
>
68+
Learn about using private Docker images with Gitpod
69+
<SquareArrowOutUpRight size={12} />
70+
</a>
71+
</Subheading>
72+
<InputField id={inputId}>
73+
<SwitchInputField
74+
id={inputId}
75+
checked={isEnabled}
76+
disabled={configurationMutation.isLoading}
77+
onCheckedChange={updateEnableDockerdAuthentication}
78+
label={isEnabled ? "Auto-login enabled" : "Auto-login disabled"}
79+
/>
80+
</InputField>
81+
</ConfigurationSettingsField>
82+
);
83+
};

0 commit comments

Comments
 (0)