integrate frontend with backend for auto capitalization setting

frontend/public/locales/en/settings-project.json

@@ -9,5 +9,7 @@
   "project-id-description": "To integrate Infisical into your code base and get automatic injection of environmental variables, you should use the following Project ID.",
   "project-id-description2": "For more guidance, including code snipets for various languages and frameworks, see ",
   "auto-generated": "This is your project's auto-generated unique identifier. It can't be changed.",
-  "docs": "Infisical Docs"
+  "docs": "Infisical Docs",
+  "auto-capitalization": "Auto Capitalization",
+  "auto-capitalization-description": "According to standards, Infisical will automatically capitalize your keys. If you want to disable this feature, you can do so here."
 }

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -14,6 +14,7 @@ interface DashboardInputFieldProps {
   blurred?: boolean;
   isDuplicate?: boolean;
   override?: boolean;
+  isCapitalized?: boolean;
 }
 
 /**
@@ -36,7 +37,8 @@ const DashboardInputField = ({
   value,
   blurred,
   isDuplicate,
-  override
+  override,
+  isCapitalized
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
@@ -58,7 +60,7 @@ const DashboardInputField = ({
           } rounded-md`}
         >
           <input
-            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), position)}
+            onChange={(e) => onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, position)}
             type={type}
             value={value}
             className={`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 ${
@@ -164,7 +166,8 @@ function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInput
     prev.position === next.position &&
     prev.blurred === next.blurred &&
     prev.override === next.override &&
-    prev.isDuplicate === next.isDuplicate
+    prev.isDuplicate === next.isDuplicate && 
+    prev.isCapitalized === next.isCapitalized
   );
 }
 

frontend/src/components/dashboard/KeyPair.tsx

@@ -14,6 +14,7 @@ interface KeyPairProps {
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
   isSnapshot: boolean;
+  isCapitalized: boolean;
 }
 
 /**
@@ -39,7 +40,8 @@ const KeyPair = ({
   isDuplicate,
   toggleSidebar,
   sidebarSecretId,
-  isSnapshot
+  isSnapshot,
+  isCapitalized
 }: KeyPairProps) => (
   <div
     className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && 'pointer-events-none'} ${
@@ -58,6 +60,7 @@ const KeyPair = ({
       <div className="min-w-xl w-96">
         <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
           <DashboardInputField
+            isCapitalized = {isCapitalized}
             onChangeHandler={modifyKey}
             type="varName"
             position={keyPair.pos}

frontend/src/pages/api/workspace/getWorkspaces.ts

@@ -4,6 +4,7 @@ interface Workspace {
   __v: number;
   _id: string;
   name: string;
+  autoCapitalization: boolean;
   organization: string;
   environments: Array<{ name: string; slug: string }>;
 }

frontend/src/pages/api/workspace/toggleAutoCapitalization.ts

@@ -0,0 +1,26 @@
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+/**
+ * This route lets us change the auto capitalization settings in a project.
+ * @param {*} req
+ * @param {*} res
+ * @returns
+ */
+const toggleAutoCapitalization = (workspaceId: string, state: boolean) =>
+  SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/settings`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      autoCapitalization: state
+    })
+  }).then(async (res) => {
+    if (res && res.status === 200) {
+      return res;
+    }
+    console.log('Failed to toggle auto capitalization state');
+    return undefined;
+  });
+
+export default toggleAutoCapitalization;

frontend/src/pages/dashboard/[id].tsx

@@ -123,6 +123,7 @@ export default function Dashboard() {
   const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
   const [numSnapshots, setNumSnapshots] = useState<number>();
   const [saveLoading, setSaveLoading] = useState(false);
+  const [autoCapitalization, setAutoCapitalization] = useState(false);
 
   const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
@@ -213,6 +214,7 @@ export default function Dashboard() {
         if (!workspace) {
           router.push(`/dashboard/${userWorkspaces?.[0]?._id}`);
         }
+        setAutoCapitalization(workspace?.autoCapitalization ?? true);
 
         setWorkspaceEnvs(workspace?.environments || []);
         // set env
@@ -758,6 +760,7 @@ export default function Dashboard() {
                         .filter((row) => !sharedToHide.includes(row.id))
                         .map((keyPair) => (
                           <KeyPair
+                            isCapitalized={autoCapitalization}
                             key={keyPair.id}
                             keyPair={keyPair}
                             modifyValue={listenChangeValue}
@@ -795,6 +798,7 @@ export default function Dashboard() {
                         )
                         .map((keyPair) => (
                           <KeyPair
+                            isCapitalized={autoCapitalization}
                             key={keyPair.id}
                             keyPair={keyPair}
                             modifyValue={listenChangeValue}

frontend/src/pages/settings/project/[id].tsx

@@ -12,6 +12,7 @@ import EnvironmentTable from '@app/components/basic/table/EnvironmentsTable';
 import ServiceTokenTable from '@app/components/basic/table/ServiceTokenTable';
 import NavHeader from '@app/components/navigation/NavHeader';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
+import { Checkbox } from '@app/components/v2';
 import deleteEnvironment from '@app/pages/api/environments/deleteEnvironment';
 import updateEnvironment from '@app/pages/api/environments/updateEnvironment';
 
@@ -20,6 +21,7 @@ import getServiceTokens from '../../api/serviceToken/getServiceTokens';
 import deleteWorkspace from '../../api/workspace/deleteWorkspace';
 import getWorkspaces from '../../api/workspace/getWorkspaces';
 import renameWorkspace from '../../api/workspace/renameWorkspace';
+import toggleAutoCapitalization from '../../api/workspace/toggleAutoCapitalization';
 
 type EnvData = {
   name: string;
@@ -28,8 +30,10 @@ type EnvData = {
 
 export default function SettingsBasic() {
   const [buttonReady, setButtonReady] = useState(false);
+  const [autoCapitalizationButtonReady, setAutoCapitalizationButtonReady] = useState(false);
   const router = useRouter();
   const [workspaceName, setWorkspaceName] = useState('');
+  const [autoCapitalization, setAutoCapitalization] = useState(false);
   const [serviceTokens, setServiceTokens] = useState<any[]>([]);
   const [environments, setEnvironments] = useState<Array<EnvData>>([]);
   const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
@@ -63,6 +67,7 @@ export default function SettingsBasic() {
       userWorkspaces.forEach((userWorkspace) => {
         if (userWorkspace._id === workspaceId) {
           setWorkspaceName(userWorkspace.name);
+          setAutoCapitalization(userWorkspace.autoCapitalization ?? true);
           setEnvironments(userWorkspace.environments);
         }
       });
@@ -80,11 +85,22 @@ export default function SettingsBasic() {
     setWorkspaceName(newName);
   };
 
+  const toggleAutoCapitalizationCheckBox = (state: boolean) => {
+    setAutoCapitalizationButtonReady(true);
+    setAutoCapitalization(state);
+  };
+
   const submitChanges = (newWorkspaceName: string) => {
     renameWorkspace(workspaceId, newWorkspaceName);
     setButtonReady(false);
   };
 
+  const submitAutoCapitalizationChanges = () => {
+    toggleAutoCapitalization(workspaceId, autoCapitalization);
+    setAutoCapitalizationButtonReady(false);
+  };
+  
+
   const closeAddServiceTokenModal = () => {
     setIsAddServiceTokenDialogOpen(false);
   };
@@ -196,6 +212,28 @@ export default function SettingsBasic() {
                     </div>
                   </div>
                 </div>
+                <div className="bg-white/5 rounded-md px-6 pb-4 flex flex-col items-start w-full mb-6 pt-2">
+                  <p className="text-xl font-semibold mb-4 mt-2">{t('settings-project:auto-capitalization')}</p>
+                    <Checkbox
+                      className='data-[state=checked]:bg-primary' 
+                      id='autoCapitalization'
+                      isChecked={autoCapitalization}
+                      onCheckedChange={(state) => toggleAutoCapitalizationCheckBox(state as boolean)}
+                      > {t('settings-project:auto-capitalization-description')}</Checkbox>
+                  <div className="flex justify-start w-full">
+                    <div className="flex justify-start max-w-sm mt-4 mb-2">
+                      <Button
+                        text={t('common:save-changes') as string}
+                        onButtonPressed={() => submitAutoCapitalizationChanges()}
+                        color="mineshaft"
+                        size="md"
+                        active={autoCapitalizationButtonReady}
+                        iconDisabled={faCheck}
+                        textDisabled="Saved"
+                      />
+                    </div>
+                  </div>
+                </div>
                 <div className="bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start w-full mb-6 mt-4">
                   <p className="text-xl font-semibold self-start">{t('common:project-id')}</p>
                   <p className="text-base text-gray-400 font-normal self-start mt-4">