Address code review feedback

Co-authored-by: George Tsiolis <[email protected]>

Author: jankeromnes

components/dashboard/src/projects/ProjectVariables.tsx

@@ -44,29 +44,27 @@ export default function () {
         <div className="mb-2 flex">
             <div className="flex-grow">
                 <h3>Environment Variables</h3>
-                <h2 className="text-gray-500">Manage environment variables for your project.</h2>
+                <h2 className="text-gray-500">Manage project-specific environment variables.</h2>
             </div>
-            {envVars.length > 0 && <button onClick={() => setShowAddVariableModal(true)}>Add Variable</button>}
+            {envVars.length > 0 && <button onClick={() => setShowAddVariableModal(true)}>New Variable</button>}
         </div>
         {envVars.length === 0
             ? <div className="bg-gray-100 dark:bg-gray-800 rounded-xl w-full py-28 flex flex-col items-center">
                 <h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Environment Variables</h3>
-                <p className="text-center pb-6 text-gray-500 text-base w-96">Here you can set <strong>project-specific environment variables</strong> that will be visible during prebuilds and (optionally) in workspaces for this project.</p>
+                <p className="text-center pb-6 text-gray-500 text-base w-96">All <strong>project-specific environment variables</strong> will be visible in prebuilds and optionally in workspaces for this project.</p>
                 <button onClick={() => setShowAddVariableModal(true)}>New Variable</button>
             </div>
             : <>
                 <ItemsList>
-                    <Item header={true} className="grid grid-cols-4 items-center">
+                    <Item header={true} className="grid grid-cols-3 items-center">
                         <ItemField>Name</ItemField>
-                        <ItemField>Value</ItemField>
-                        <ItemField>Visible in Workspaces?</ItemField>
+                        <ItemField>Hidden in Workspaces</ItemField>
                         <ItemField></ItemField>
                     </Item>
                     {envVars.map(variable => {
-                        return <Item className="grid grid-cols-4 items-center">
+                        return <Item className="grid grid-cols-3 items-center">
                             <ItemField>{variable.name}</ItemField>
-                            <ItemField>****</ItemField>
-                            <ItemField>{variable.censored ? 'Hidden' : 'Visible'}</ItemField>
+                            <ItemField>{variable.censored ? 'Yes' : 'No'}</ItemField>
                             <ItemField className="flex justify-end">
                                 <ItemFieldContextMenu menuEntries={[
                                     {
@@ -103,9 +101,9 @@ function AddVariableModal(props: { project?: Project, onClose: () => void }) {
     }
 
     return <Modal visible={true} onClose={props.onClose} onEnter={() => { addVariable(); return false; }}>
-        <h3 className="mb-4">Add Variable</h3>
+        <h3 className="mb-4">New Variable</h3>
         <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">
-            <AlertBox><strong>Project variables might be accessible by anyone with read access to your repository.</strong><br/>Secret values can be exposed if they are printed in the logs, persisted to the file system, or made visible in workspaces.</AlertBox>
+            <AlertBox><strong>Project-specific environment variables might be accessible by anyone with read access to your repository.</strong><br/>Secret values can be exposed if they are printed in the logs, persisted to the file system, or made visible in workspaces.</AlertBox>
             {error && <div className="bg-gitpod-kumquat-light rounded-md p-3 text-gitpod-red text-sm mb-2">
                 {error}
             </div>}
@@ -118,7 +116,7 @@ function AddVariableModal(props: { project?: Project, onClose: () => void }) {
                 <input className="w-full" type="text" name="value" value={value} onChange={e => setValue(e.target.value)} />
             </div>
             <div className="mt-4">
-                <CheckBox title="Hide in Workspaces" desc="Project variables are visible during prebuilds. Choose whether this variable should be visible in workspaces as well." checked={censored} onChange={() => setCensored(!censored)} />
+                <CheckBox title="Hide in Workspaces" desc="Project-specific environment variables are visible in prebuilds. Choose whether this variable should be visible in workspaces as well." checked={censored} onChange={() => setCensored(!censored)} />
             </div>
             {!censored && <div className="mt-4">
                 <InfoBox>This value will be directly visible to anyone who can open your repository in Gitpod.</InfoBox>

components/gitpod-db/src/typeorm/project-db-impl.ts

@@ -108,7 +108,13 @@ export class ProjectDBImpl implements ProjectDB {
         }
     }
 
-    public async setProjectEnvironmentVariable(projectId: string, name: string, value: string, censored: boolean): Promise<void>{
+    public async setProjectEnvironmentVariable(projectId: string, name: string, value: string, censored: boolean): Promise<void> {
+        if (!name) {
+            throw new Error('Variable name cannot be empty');
+        }
+        if (!/[a-zA-Z_][a-zA-Z0-9_]*/.test(name)) {
+            throw new Error('Please choose a variable name containing only letters, numbers, or _, and doesn\'t start with numbers');
+        }
         const envVarRepo = await this.getProjectEnvVarRepo();
         const envVarWithValue = await envVarRepo.findOne({ projectId, name, deleted: false });
         if (envVarWithValue) {