diff --git a/frontend/components/dashboard/DashboardInputField.js b/frontend/components/dashboard/DashboardInputField.js
index 53733c38b..c8e42233a 100644
--- a/frontend/components/dashboard/DashboardInputField.js
+++ b/frontend/components/dashboard/DashboardInputField.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
import { faCircle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -31,6 +31,7 @@ const findReferences = (text) => {
* @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
* @param {string} obj.value - value of the InputField
* @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
+ * @param {string[]} obj.duplicates - list of all the suplicated key names on the dashboard
* @returns
*/
const DashboardInputField = ({
@@ -39,21 +40,36 @@ const DashboardInputField = ({
type,
value,
blurred,
+ duplicates
}) => {
if (type === "varName") {
+ const startsWithNumber = !isNaN(value.charAt(0)) && value != "";
+ const hasDuplicates = duplicates?.includes(value);
+ const error = startsWithNumber || hasDuplicates;
+
return (
onChangeHandler(e.target.value, index)}
+ onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), index)}
type={type}
value={value}
- className="asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200"
+ className={`asolute z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${error ? "focus:ring-red/50" : "focus:ring-primary/50"} duration-200`}
spellCheck="false"
/>
+ {startsWithNumber &&
+
+ Can't start with a number
+
+ }
+ {hasDuplicates && !startsWithNumber &&
+
+ Secret names should be unique
+
+ }
);
} else if (type === "value") {
@@ -70,7 +86,7 @@ const DashboardInputField = ({
blurred
? "text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent"
: ""
- } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-4 focus:ring-primary/50 duration-200`}
+ } asolute z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200`}
spellCheck="false"
/>
{findReferences(value).map((texts, id) => {
if (id % 2 == 0 || texts.length <= 2) {
diff --git a/frontend/pages/dashboard/[id].js b/frontend/pages/dashboard/[id].js
index 23fa4921a..18339ac01 100644
--- a/frontend/pages/dashboard/[id].js
+++ b/frontend/pages/dashboard/[id].js
@@ -56,6 +56,7 @@ const envMapping = {
* @param {function} obj.modifyValue - modify the value of a certain environment variable
* @param {function} obj.modifyVisibility - switch between public/private visibility
* @param {boolean} obj.isBlurred - if the blurring setting is turned on
+ * @param {string[]} obj.duplicates - list of all the duplicates secret names on the dashboard
* @returns
*/
const KeyPair = ({
@@ -65,19 +66,21 @@ const KeyPair = ({
modifyValue,
modifyVisibility,
isBlurred,
+ duplicates
}) => {
const [randomStringLength, setRandomStringLength] = useState(32);
return (
-
+
-
@@ -112,7 +115,7 @@ const KeyPair = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
-
+
modifyVisibility(
@@ -372,37 +375,47 @@ export default function Dashboard() {
...data.map((row) => ({ [row[2]]: [row[3], row[4]] }))
);
- // Once "Save changed is clicked", disable that button
- setButtonReady(false);
- pushKeys(obj, router.query.id, env);
+ // Checking if any of the secret keys start with a number - if so, don't do anything
+ const nameErrors = !Object.keys(obj).map(key => !isNaN(key.charAt(0))).every(v => v === false);
+ const duplicatesExist = data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item)).length > 0;
- /**
- * Check which integrations are active for this project and environment
- * If there are any, update environment variables for those integrations
- */
- let integrations = await getWorkspaceIntegrations({
- workspaceId: router.query.id,
- });
- integrations.map(async (integration) => {
- if (
- envMapping[env] == integration.environment &&
- integration.isActive == true
- ) {
- let objIntegration = Object.assign(
- {},
- ...data.map((row) => ({ [row[2]]: row[3] }))
- );
- await pushKeysIntegration({
- obj: objIntegration,
- integrationId: integration._id,
- });
+ if (nameErrors) {
+ console.log("Solve all name errors first!");
+ } else if (duplicatesExist) {
+ console.log("Remove the duplicated entries first!");
+ } else {
+ // Once "Save changed is clicked", disable that button
+ setButtonReady(false);
+ pushKeys(obj, router.query.id, env);
+
+ /**
+ * Check which integrations are active for this project and environment
+ * If there are any, update environment variables for those integrations
+ */
+ let integrations = await getWorkspaceIntegrations({
+ workspaceId: router.query.id,
+ });
+ integrations.map(async (integration) => {
+ if (
+ envMapping[env] == integration.environment &&
+ integration.isActive == true
+ ) {
+ let objIntegration = Object.assign(
+ {},
+ ...data.map((row) => ({ [row[2]]: row[3] }))
+ );
+ await pushKeysIntegration({
+ obj: objIntegration,
+ integrationId: integration._id,
+ });
+ }
+ });
+
+ // If this user has never saved environment variables before, show them a prompt to read docs
+ if (!hasUserEverPushed) {
+ setCheckDocsPopUpVisible(true);
+ await registerUserAction({ action: "first_time_secrets_pushed" });
}
- });
-
- // If this user has never saved environment variables before, show them a prompt to read docs
- if (!hasUserEverPushed) {
- setCheckDocsPopUpVisible(true);
- await registerUserAction({ action: "first_time_secrets_pushed" });
}
};
@@ -642,6 +655,7 @@ export default function Dashboard() {
modifyKey={listenChangeKey}
modifyVisibility={listenChangeVisibility}
isBlurred={blurred}
+ duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))}
/>
))}
@@ -689,6 +703,7 @@ export default function Dashboard() {
modifyKey={listenChangeKey}
modifyVisibility={listenChangeVisibility}
isBlurred={blurred}
+ duplicates={data?.map(item => item[2]).filter((item, index) => index !== data?.map(item => item[2]).indexOf(item))}
/>
))}