Merge pull request #119 from kloudlite/refactoring/show-env-details

note added for public and private environmets
kloudlite · Mar 5, 2024 · d8d3284 · d8d3284
2 parents 37680b9 + c687db4
commit d8d3284
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 88 deletions.
diff --git a/src/apps/console/page-components/new-scope.tsx b/src/apps/console/page-components/new-scope.tsx
@@ -9,7 +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 Banner from '~/components/molecule/banner';
 import { IDialog } from '../components/types.d';
 import { useConsoleApi } from '../server/gql/api-provider';
 import { DIALOG_TYPE } from '../utils/commons';
@@ -149,35 +149,23 @@ const HandleScope = ({ show, setShow }: IDialog<IEnvironment | null>) => {
               nameErrorLabel="isNameError"
               isUpdate={show?.type !== DIALOG_TYPE.ADD}
             />
-            <div className="flex flex-row items-center gap-lg">
-              <Checkbox
-                label="Public"
-                checked={values.environmentRoutingMode}
-                onChange={(val) => {
-                  handleChange('environmentRoutingMode')(dummyEvent(val));
-                }}
-              />
-              <InfoLabel
-                info={
-                  <div className="flex flex-col gap-2xl">
-                    <div>
-                      <div className="bodyMd-medium">Public</div>
-                      <p>
-                        Public environments will expose services to the public
-                        internet.
-                      </p>
-                    </div>
-                    <div>
-                      <div className="bodyMd-medium">Private</div>
-                      <p>
-                        Private environments will be accessible when Kloudlite
-                        VPN is active.
-                      </p>
-                    </div>
-                  </div>
-                }
-              />
-            </div>
+            <Checkbox
+              label="Public"
+              checked={values.environmentRoutingMode}
+              onChange={(val) => {
+                handleChange('environmentRoutingMode')(dummyEvent(val));
+              }}
+            />
+            <Banner
+              type="info"
+              body={
+                <span>
+                  Public environments will expose services to the public
+                  internet. Private environments will be accessible when
+                  Kloudlite VPN is active.
+                </span>
+              }
+            />
           </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
@@ -21,6 +21,7 @@ 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 Banner from '~/components/molecule/banner';
 import { IEnvironmentContext } from '../../_layout';
 
 const EnvironmentSettingsGeneral = () => {
@@ -129,35 +130,23 @@ const EnvironmentSettingsGeneral = () => {
             value={values.displayName}
             onChange={handleChange('displayName')}
           />
-          <div className="flex flex-row items-center gap-lg">
-            <Checkbox
-              label="Public"
-              checked={values.environmentRoutingMode}
-              onChange={(checked) => {
-                handleChange('environmentRoutingMode')(dummyEvent(checked));
-              }}
-            />
-            <InfoLabel
-              info={
-                <div className="flex flex-col gap-2xl">
-                  <div>
-                    <div className="bodyMd-medium">Public</div>
-                    <p>
-                      Public environments will expose services to the public
-                      internet.
-                    </p>
-                  </div>
-                  <div>
-                    <div className="bodyMd-medium">Private</div>
-                    <p>
-                      Private environments will be accessible when Kloudlite VPN
-                      is active.
-                    </p>
-                  </div>
-                </div>
-              }
-            />
-          </div>
+          <Checkbox
+            label="Public"
+            checked={values.environmentRoutingMode}
+            onChange={(checked) => {
+              handleChange('environmentRoutingMode')(dummyEvent(checked));
+            }}
+          />
+          <Banner
+            type="info"
+            body={
+              <span>
+                Public environments will expose services to the public internet.
+                Private environments will be accessible when Kloudlite VPN is
+                active.
+              </span>
+            }
+          />
           <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
@@ -15,6 +15,7 @@ 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';
+import Banner from '~/components/molecule/banner';
 
 type IDialog = IDialogBase<ExtractNodeType<IEnvironments>>;
 
@@ -87,35 +88,23 @@ const Root = (props: IDialog) => {
             handleChange={handleChange}
             nameErrorLabel="isNameError"
           />
-          <div className="flex flex-row items-center gap-lg">
-            <Checkbox
-              label="Public"
-              checked={values.environmentRoutingMode}
-              onChange={(val) => {
-                handleChange('environmentRoutingMode')(dummyEvent(val));
-              }}
-            />
-            <InfoLabel
-              info={
-                <div className="flex flex-col gap-2xl">
-                  <div>
-                    <div className="bodyMd-medium">Public</div>
-                    <p>
-                      Public environments will expose services to the public
-                      internet.
-                    </p>
-                  </div>
-                  <div>
-                    <div className="bodyMd-medium">Private</div>
-                    <p>
-                      Private environments will be accessible when Kloudlite VPN
-                      is active.
-                    </p>
-                  </div>
-                </div>
-              }
-            />
-          </div>
+          <Checkbox
+            label="Public"
+            checked={values.environmentRoutingMode}
+            onChange={(val) => {
+              handleChange('environmentRoutingMode')(dummyEvent(val));
+            }}
+          />
+          <Banner
+            type="info"
+            body={
+              <span>
+                Public environments will expose services to the public internet.
+                Private environments will be accessible when Kloudlite VPN is
+                active.
+              </span>
+            }
+          />
         </div>
       </Popup.Content>
       <Popup.Footer>