Merge branch 'revert-3899-revert-3896-misc/final-changes-for-self-serve-en' into revert-3901-revert-3875-ENG-3009-test

docs/self-hosting/configuration/envars.mdx

@@ -794,3 +794,9 @@ If export type is set to `otlp`, you will have to configure a value for `OTEL_EX
   The TLS header used to propagate the client certificate from the load balancer
   to the server.
 </ParamField>
+
+## Environment Variable Overrides
+
+If you can't directly access and modify environment variables, you can easily update them using the server admin console.
+
+![Environment Variables Overrides Page](../../images/self-hosting/configuration/overrides/page.png)

frontend/src/layouts/AdminLayout/Sidebar.tsx

@@ -31,7 +31,7 @@ const generalTabs = [
     link: "/admin/caching"
   },
   {
-    label: "Environment",
+    label: "Environment Variables",
     icon: "unlock",
     link: "/admin/environment"
   }

frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx

@@ -16,8 +16,8 @@ export const EnvironmentPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
-            title="Environment"
+            title="Environment Variables"
-            description="Manage the environment for your Infisical instance."
+            description="Manage the environment variables for your Infisical instance."
           />
           <EnvironmentPageForm />
         </div>

frontend/src/pages/admin/EnvironmentPage/components/EnvironmentPageForm.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Control, Controller, useForm, useWatch } from "react-hook-form";
 import {
+  faArrowUpRightFromSquare,
+  faBookOpen,
   faChevronRight,
   faExclamationTriangle,
   faMagnifyingGlass
@@ -213,8 +215,25 @@ export const EnvironmentPageForm = () => {
         <div>
           <div className="flex items-start gap-1">
             <p className="text-xl font-semibold text-mineshaft-100">Overrides</p>
+            <a
+              href="https://infisical.com/docs/self-hosting/configuration/envars#environment-variable-overrides"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className="ml-1 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
+                <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
+                <span>Docs</span>
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.07rem] ml-1.5 text-[10px]"
+                />
+              </div>
+            </a>
           </div>
-          <p className="text-sm text-bunker-300">Override specific environment variables.</p>
+          <p className="text-sm text-bunker-300">
+            Override specific environment variables. After saving, it may take up to 5 minutes for
+            variables to propagate throughout every container.
+          </p>
         </div>
 
         <div className="flex flex-row gap-2">
@@ -224,7 +243,7 @@ export const EnvironmentPageForm = () => {
             isLoading={isSubmitting}
             isDisabled={isSubmitting || !isDirty}
           >
-            Save Overrides
+            Save
           </Button>
         </div>
       </div>