feat: add org env vars to the organizations section

cypress/e2e/general/navigation.cy.ts

@@ -46,7 +46,7 @@ describe('Navigation tests', () => {
 
       navigation.getLinkElement('account').click();
 
-      const redirect = `${Cypress.env('keycloak')}/realms/lagoon/account/`;
+      const redirect = `${Cypress.env('keycloak')}/realms/lagoon/account`;
       cy.origin(redirect, { args: { redirect } }, ({ redirect }) => {
         cy.location().should(loc => {
           expect(loc.toString()).to.eq(redirect);

server.js

@@ -173,6 +173,12 @@ app
       });
     });
 
+    server.get('/organizations/:organizationSlug/variables', (req, res) => {
+      app.render(req, res, '/organizations/variables', {
+        organizationSlug: req.params.organizationSlug,
+      });
+    });
+
     server.get('/organizations/:organizationSlug/notifications', (req, res) => {
       app.render(req, res, '/organizations/notifications', {
         organizationSlug: req.params.organizationSlug,

src/components/AddVariable/index.js

@@ -28,6 +28,7 @@ const scopeOptions = [
 ];
 
 export const AddVariable = ({
+  varOrganization,
   varProject,
   varEnvironment,
   varValues,
@@ -49,8 +50,10 @@ export const AddVariable = ({
   setClear,
   setEnvironmentErrorAlert,
   setProjectErrorAlert,
+  setOrganizationErrorAlert,
   action,
   loading,
+  orgEnvValues,
   prjEnvValues,
   envValues,
 }) => {
@@ -73,14 +76,20 @@ export const AddVariable = ({
     setUpdateScope(varScope);
   }, [varName, varValue]);
   const handleError = () => {
-    setProjectErrorAlert ? setProjectErrorAlert(true) : setEnvironmentErrorAlert(true);
+    if (setOrganizationErrorAlert) {
+      setOrganizationErrorAlert(true);
+    } else if (setProjectErrorAlert) {
+      setProjectErrorAlert(true);
+    } else {
+      setEnvironmentErrorAlert(true);
+    }
   };
 
   const handlePermissionCheck = () => {
     let waitForGQL = setTimeout(() => {
       openModal();
     }, [1000]);
-    if (prjEnvValues || envValues) {
+    if (orgEnvValues || prjEnvValues || envValues) {
       clearTimeout(waitForGQL);
       openModal();
     }
@@ -193,6 +202,7 @@ export const AddVariable = ({
                         name: updateName ? updateName : inputName,
                         value: updateValue ? updateValue : inputValue,
                         scope: updateScope ? updateScope.toUpperCase() : inputScope,
+                        organization: varOrganization,
                         project: varProject,
                         environment: varEnvironment,
                       },
@@ -224,13 +234,9 @@ export const AddVariable = ({
                         }
                         onClick={showPopconfirm}
                       >
-                        {varTarget === 'Environment'
-                          ? updateVar || varName
-                            ? 'Update environment variable'
-                            : 'Add environment variable'
-                          : updateVar || varName
-                            ? 'Update project variable'
-                            : 'Add project variable'}
+                        {updateVar || varName
+                          ? `Update ${varTarget.toLowerCase()} variable`
+                          : `Add ${varTarget.toLowerCase()} variable`}
                       </ButtonBootstrap>
                     </Popconfirm>
                   );
@@ -242,13 +248,9 @@ export const AddVariable = ({
                       }
                       onClick={addOrUpdateEnvVariableHandler}
                     >
-                      {varTarget === 'Environment'
-                        ? updateVar || varName
-                          ? 'Update environment variable'
-                          : 'Add environment variable'
-                        : updateVar || varName
-                          ? 'Update project variable'
-                          : 'Add project variable'}
+                      {updateVar || varName
+                        ? `Update ${varTarget.toLowerCase()} variable`
+                        : `Add ${varTarget.toLowerCase()} variable`}
                     </ButtonBootstrap>
                   );
                 }

src/components/DeleteVariable/index.js

@@ -24,19 +24,21 @@ export const DeleteVariable = ({
   setClear,
   varEnvironment,
   varProject,
+  varOrganization,
   open,
   openModal,
   closeModal,
   envValues,
   prjEnvValues,
+  orgEnvValues,
   loading,
   valueState,
 }) => {
   const handlePermissionCheck = () => {
     let waitForGQL = setTimeout(() => {
       openModal();
     }, [1000]);
-    if (prjEnvValues || envValues) {
+    if (orgEnvValues || prjEnvValues || envValues) {
       clearTimeout(waitForGQL);
       openModal();
     }
@@ -81,6 +83,7 @@ export const DeleteVariable = ({
                     variables: {
                       input: {
                         name: deleteName,
+                        organization: varOrganization,
                         project: varProject,
                         environment: varEnvironment,
                       },

src/components/NavTabs/NavTabsSkeleton.tsx

@@ -1,6 +1,8 @@
 import React, { FC } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
+import getConfig from 'next/config';
+
 import {
   CheckSquareOutlined,
   ReadOutlined,
@@ -16,6 +18,12 @@ import TasksLink from 'components/link/Tasks';
 
 import { StyledNavigation } from './StylednavTabs';
 
+/* eslint-disable-next-line
+  @typescript-eslint/no-unsafe-assignment,
+  @typescript-eslint/no-unsafe-call
+*/
+const { publicRuntimeConfig } = getConfig();
+
 interface NavSkeletonProps {
   activeTab: string;
   projectName: string;
@@ -48,12 +56,21 @@ const NavTabsSkeleton: FC<NavSkeletonProps> = ({ activeTab, projectName, openshi
         <span className="destination"> Tasks</span>
       </TasksLink>
     </li>
-    <li className={`tasks ${activeTab == 'environmentVariables' ? 'active' : ''} ${'linkContainer'}`}>
-      <EnvironmentVariablesLink environmentSlug={openshiftProjectName} projectSlug={projectName} className="navLink">
-        <UnorderedListOutlined className="icon" />
-        <span className="destination"> Variables</span>
-      </EnvironmentVariablesLink>
-    </li>
+    {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
+        <li className={`variables ${activeTab == 'variables' ? 'active' : ''} linkContainer`}>
+          <EnvironmentVariablesLink
+            environmentSlug={openshiftProjectName}
+            projectSlug={projectName}
+            className="navLink"
+          >
+            <UnorderedListOutlined className="icon" />
+            <span className="destination"> Variables</span>
+          </EnvironmentVariablesLink>
+        </li>
+      )
+    }
     <Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
     <Skeleton style={{ height: '50px', lineHeight: '0.5' }} />
     <Skeleton style={{ height: '50px', lineHeight: '0.5' }} />

src/components/Organizations/NavTabs/OrgNavTabsSkeleton.tsx

@@ -1,16 +1,25 @@
 import React, { FC } from 'react';
 
+import getConfig from 'next/config';
+
 import {
   BellOutlined,
   GlobalOutlined,
   GroupOutlined,
   ReadOutlined,
   SettingOutlined,
   TeamOutlined,
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 
 import { StyledNavigation } from './StyledNavTabs';
 
+/* eslint-disable-next-line
+  @typescript-eslint/no-unsafe-assignment,
+  @typescript-eslint/no-unsafe-call
+*/
+const { publicRuntimeConfig } = getConfig();
+
 interface NavSkeletonProps {
   activeTab: string;
 }
@@ -42,6 +51,17 @@ const OrgNavTabsSkeleton: FC<NavSkeletonProps> = ({ activeTab }) => (
         <span className="destination">Projects</span>
       </a>
     </li>
+    {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
+        <li className={`variables ${activeTab == 'variables' ? 'active' : ''} linkContainer`}>
+          <a className="navLink">
+            <UnorderedListOutlined className="icon" />
+            <span className="destination">Variables</span>
+          </a>
+        </li>
+      )
+    }
     <li className={`notifications ${activeTab == 'notifications' ? 'active' : ''} linkContainer`}>
       <a className="navLink">
         <BellOutlined className="icon" />

src/components/Organizations/NavTabs/index.js

@@ -1,22 +1,28 @@
 import React from 'react';
 
+import getConfig from 'next/config';
+
 import {
   BellOutlined,
   GlobalOutlined,
   GroupOutlined,
   ReadOutlined,
   SettingOutlined,
   TeamOutlined,
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 import OrgGroupsLink from 'components/link/Organizations/Groups';
 import OrgManageLink from 'components/link/Organizations/Manage';
 import OrgNotificationsLink from 'components/link/Organizations/Notifications';
 import OrganizationLink from 'components/link/Organizations/Organization';
 import OrgProjectsLink from 'components/link/Organizations/Projects';
 import OrgUsersLink from 'components/link/Organizations/Users';
+import OrgVariablesLink from 'components/link/Organizations/Variables';
 
 import { StyledNavigation } from './StyledNavTabs';
 
+const { publicRuntimeConfig } = getConfig();
+
 const OrgNavTabs = ({ activeTab, organization }) => {
   return (
     <StyledNavigation>
@@ -64,6 +70,14 @@ const OrgNavTabs = ({ activeTab, organization }) => {
           <span className="destination">Projects</span>
         </OrgProjectsLink>
       </li>
+      {publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
+        <li className={`variables ${activeTab == 'variables' ? 'active' : ''} linkContainer`} data-cy="envvars-tab">
+          <OrgVariablesLink organizationSlug={organization.name} className="navLink">
+            <UnorderedListOutlined className="icon" />
+            <span className="destination"> Variables</span>
+          </OrgVariablesLink>
+        </li>
+      )}
       <li className={`notifications ${activeTab == 'notifications' ? 'active' : ''} linkContainer`}>
         <OrgNotificationsLink
           orgFriendlyName={organization.friendlyName}