info about public environment shown while creating environment

kloudlite · Mar 4, 2024 · da3ca70 · da3ca70
1 parent ff35e04
commit da3ca70
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 23 deletions.
diff --git a/src/apps/console/components/commons.tsx b/src/apps/console/components/commons.tsx
@@ -51,14 +51,14 @@ export const DetailItem = ({
 
 interface InfoLabelProps {
   info: ReactNode;
-  label: ReactNode;
+  label?: ReactNode;
   title?: ReactNode;
 }
 
 export const InfoLabel = ({ info, title, label }: InfoLabelProps) => {
   return (
     <span className="flex items-center gap-lg">
-      {label}{' '}
+      {label}
       <Tooltip.Root
         content={
           <div className="p-md text-xs flex flex-col gap-md">

diff --git a/src/apps/console/page-components/new-scope.tsx b/src/apps/console/page-components/new-scope.tsx
@@ -9,6 +9,7 @@ import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
 import { Switch } from '~/components/atoms/switch';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { InfoLabel } from '~/console/components/commons';
 import { IDialog } from '../components/types.d';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { DIALOG_TYPE } from '../utils/commons';
@@ -148,13 +149,16 @@ const HandleScope = ({ show, setShow }: IDialog<IEnvironment | null>) => {
               nameErrorLabel="isNameError"
               isUpdate={show?.type !== DIALOG_TYPE.ADD}
             />
-            <Checkbox
-              label="Public"
-              checked={values.environmentRoutingMode}
-              onChange={(val) => {
-                handleChange('environmentRoutingMode')(dummyEvent(val));
-              }}
-            />
+            <div className="flex flex-row items-center gap-lg">
+              <Checkbox
+                label="Public"
+                checked={values.environmentRoutingMode}
+                onChange={(val) => {
+                  handleChange('environmentRoutingMode')(dummyEvent(val));
+                }}
+              />
+              <InfoLabel info="Routers inside public environments will expose services to public internet. Private environments routers will only work when Kloudlite VPN is active." />
+            </div>
           </div>
         </Popup.Content>
         <Popup.Footer>

diff --git a/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/general/route.tsx b/src/apps/console/routes/_main+/$account+/$project+/$environment+/settings+/general/route.tsx
@@ -20,6 +20,7 @@ import DeleteDialog from '~/console/components/delete-dialog';
 import { useReload } from '~/root/lib/client/helpers/reloader';
 import Wrapper from '~/console/components/wrapper';
 import { Checkbox } from '~/components/atoms/checkbox';
+import { InfoLabel } from '~/console/components/commons';
 import { IEnvironmentContext } from '../../_layout';
 
 const EnvironmentSettingsGeneral = () => {
@@ -128,13 +129,16 @@ const EnvironmentSettingsGeneral = () => {
             value={values.displayName}
             onChange={handleChange('displayName')}
           />
-          <Checkbox
-            label="Public"
-            checked={values.environmentRoutingMode}
-            onChange={(checked) => {
-              handleChange('environmentRoutingMode')(dummyEvent(checked));
-            }}
-          />
+          <div className="flex flex-row items-center gap-lg">
+            <Checkbox
+              label="Public"
+              checked={values.environmentRoutingMode}
+              onChange={(checked) => {
+                handleChange('environmentRoutingMode')(dummyEvent(checked));
+              }}
+            />
+            <InfoLabel info="Routers inside public environments will expose services to public internet. Private environments routers will only work when Kloudlite VPN is active." />
+          </div>
           <div className="flex flex-row items-center gap-3xl">
             <div className="flex-1">
               <TextInput

diff --git a/src/apps/console/routes/_main+/$account+/$project+/environments/clone-environment.tsx b/src/apps/console/routes/_main+/$account+/$project+/environments/clone-environment.tsx
@@ -14,6 +14,7 @@ import { useReload } from '~/root/lib/client/helpers/reloader';
 import useForm, { dummyEvent } from '~/root/lib/client/hooks/use-form';
 import Yup from '~/root/lib/server/helpers/yup';
 import { handleError } from '~/root/lib/utils/common';
+import { InfoLabel } from '~/console/components/commons';
 
 type IDialog = IDialogBase<ExtractNodeType<IEnvironments>>;
 
@@ -86,13 +87,16 @@ const Root = (props: IDialog) => {
             handleChange={handleChange}
             nameErrorLabel="isNameError"
           />
-          <Checkbox
-            label="Public"
-            checked={values.environmentRoutingMode}
-            onChange={(val) => {
-              handleChange('environmentRoutingMode')(dummyEvent(val));
-            }}
-          />
+          <div className="flex flex-row items-center gap-lg">
+            <Checkbox
+              label="Public"
+              checked={values.environmentRoutingMode}
+              onChange={(val) => {
+                handleChange('environmentRoutingMode')(dummyEvent(val));
+              }}
+            />
+            <InfoLabel info="Routers inside public environments will expose services to public internet. Private environments routers will only work when Kloudlite VPN is active." />
+          </div>
         </div>
       </Popup.Content>
       <Popup.Footer>