Merge pull request #3783 from bcgov/feat/3364

Feat/3364

Author: golebu2020

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+.vscode/settings.json
 /node_modules
 /.pnp
 .pnp.js

app/components/form/Quotas.tsx

@@ -1,7 +1,10 @@
-import { PrivateCloudProject } from '@prisma/client';
+import { PrivateCloudProject, Quota } from '@prisma/client';
+import classNames from 'classnames';
+import _startCase from 'lodash-es/startCase';
+import { useFormContext } from 'react-hook-form';
 import QuotasChangeInfo from '@/components/form/QuotasChangeInfo';
 import ExternalLink from '@/components/generic/button/ExternalLink';
-import { defaultCpuOptionsLookup, defaultMemoryOptionsLookup, defaultStorageOptionsLookup } from '../../constants';
+import { defaultCpuOptionsLookup, defaultMemoryOptionsLookup, defaultStorageOptionsLookup } from '@/constants';
 import QuotaInput from './QuotaInput';
 
 const quotaOptionsLookup = {
@@ -10,6 +13,17 @@ const quotaOptionsLookup = {
   storage: defaultStorageOptionsLookup,
 };
 
+const namespaceSuffixes = {
+  production: '-prod',
+  tools: '-tools',
+  test: '-test',
+  development: '-dev',
+};
+
+type namespaceKeyType = keyof typeof namespaceSuffixes;
+
+const namespaceKeys = Object.keys(namespaceSuffixes) as namespaceKeyType[];
+
 export default function Quotas({
   licencePlate,
   disabled,
@@ -19,50 +33,64 @@ export default function Quotas({
   disabled: boolean;
   currentProject?: PrivateCloudProject | null | undefined;
 }) {
-  const namespaceSuffixes = {
-    production: '-prod',
-    tools: '-tools',
-    test: '-test',
-    development: '-dev',
-  };
+  const formData = useFormContext();
+  const newValues = formData.getValues();
+
+  if (!currentProject) return null;
+
   return (
     <>
       <p className="text-base leading-6 mt-5">
-        All quota increase requests require <b> Platform Services Team’s </b>
-        approval, and must have supporting information as per the{' '}
+        All quota increase requests require <span className="font-bold">Platform Services Team&rsquo;s</span>
+        &nbsp;approval, and must have supporting information as per the&nbsp;
         <ExternalLink href="https://docs.developer.gov.bc.ca/request-quota-increase-for-openshift-project-set/">
           Quota Increase Request Process
         </ExternalLink>
-        . Any Quota Requests without supporting information
-        <b> will not </b> be processed.
+        . Any Quota Requests without supporting information&nbsp;
+        <span className="font-bold text-red-600 uppercase">will not</span> be processed.
       </p>
-      <div className="mt-10 grid grid-cols-1 gap-x-8 xl:gap-x-16 gap-y-8 sm:grid-cols-8 ">
-        {(['production', 'test', 'tools', 'development'] as const).map((nameSpace) => (
-          <div className="sm:col-span-2" key={nameSpace}>
-            <h3 className="text-base 2xl:text-lg font-semibold leading-7 text-gray-900">
-              {nameSpace.charAt(0).toUpperCase() + nameSpace.slice(1)} Namespace
-            </h3>
-            <ExternalLink
-              href={`https://console.apps.${currentProject?.cluster}.devops.gov.bc.ca/k8s/cluster/projects/${licencePlate}${namespaceSuffixes[nameSpace]}`}
+      <div className="mt-10 mb-5 grid grid-cols-1 gap-x-4 xl:gap-x-4 gap-y-8 sm:grid-cols-8 ">
+        {namespaceKeys.map((namespace) => {
+          const quotaField = (namespace + 'Quota') as keyof PrivateCloudProject;
+          const originalEnvQuota = currentProject[quotaField] as Quota;
+          const newEnvQuota = newValues[quotaField];
+          const hasResourceChange =
+            newEnvQuota?.cpu !== originalEnvQuota?.cpu ||
+            newEnvQuota?.memory !== originalEnvQuota?.memory ||
+            newEnvQuota?.storage !== originalEnvQuota?.storage;
+
+          return (
+            <div
+              key={namespace}
+              className={classNames('sm:col-span-2 py-3 px-5 rounded-lg border-2', {
+                'border-purple-800 shadow-[0_0_15px_2px_rgba(59,130,246,0.2)]': hasResourceChange,
+                'border-transparent': !hasResourceChange,
+              })}
             >
-              {licencePlate}
-              {namespaceSuffixes[nameSpace] || ''}
-            </ExternalLink>
-            {(['cpu', 'memory', 'storage'] as const).map((quotaName) => (
-              <QuotaInput
-                key={quotaName}
-                quotaName={quotaName}
-                selectOptions={quotaOptionsLookup[quotaName]}
-                licencePlate={licencePlate}
-                nameSpace={nameSpace}
-                disabled={disabled}
-                quota={(currentProject as { [key: string]: any })?.[nameSpace + 'Quota'][quotaName]}
-              />
-            ))}
-          </div>
-        ))}
+              <h3 className="text-base 2xl:text-lg font-semibold leading-7 text-gray-900">
+                {_startCase(namespace)} Namespace
+              </h3>
+              <ExternalLink
+                href={`https://console.apps.${currentProject.cluster}.devops.gov.bc.ca/k8s/cluster/projects/${licencePlate}${namespaceSuffixes[namespace]}`}
+              >
+                {licencePlate}
+                {namespaceSuffixes[namespace] || ''}
+              </ExternalLink>
+              {(['cpu', 'memory', 'storage'] as const).map((quotaName) => (
+                <QuotaInput
+                  key={quotaName}
+                  quotaName={quotaName}
+                  selectOptions={quotaOptionsLookup[quotaName]}
+                  licencePlate={licencePlate}
+                  nameSpace={namespace}
+                  disabled={disabled}
+                  quota={(currentProject as { [key: string]: any })?.[namespace + 'Quota'][quotaName]}
+                />
+              ))}
+            </div>
+          );
+        })}
       </div>
-
       <QuotasChangeInfo disabled={disabled} />
     </>
   );