uselagoon · tobybellwood · Mar 25, 2024 · Mar 25, 2024
diff --git a/server.js b/server.js
@@ -125,7 +125,7 @@ app
 
     // organizations start
     server.get('/organizations', (req, res) => {
-      app.render(req, res, '/organizations/organizations');
+      app.render(req, res, '/organizations');
     });
 
     server.get('/organizations/:organizationSlug', (req, res) => {

diff --git a/src/components/Backups/BackupsSkeleton.tsx b/src/components/Backups/BackupsSkeleton.tsx
@@ -6,8 +6,8 @@ import { BackupsHeader, DataTable } from './StyledBackups';
 const Backups = () => {
   const numberOfBackupFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
-  const backupFieldSkeleton = (
-    <div className="data-row">
+  const backupFieldSkeleton = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="source">
         <Skeleton />
       </div>
@@ -32,7 +32,7 @@ const Backups = () => {
         <label className="backupid">Backup id</label>
       </BackupsHeader>
 
-      <DataTable>{[...Array<undefined>(numberOfBackupFields)].map(() => backupFieldSkeleton)}</DataTable>
+      <DataTable>{[...Array<undefined>(numberOfBackupFields)].map((_, idx) => backupFieldSkeleton(idx))}</DataTable>
     </div>
   );
 };

diff --git a/src/components/Box/StyledBox.tsx b/src/components/Box/StyledBox.tsx
@@ -1,7 +1,7 @@
 import { color } from 'lib/variables';
 import styled, { css } from 'styled-components';
 
-export const StyledBox = styled.div<{ activeBgs?: string[] }>`
+export const StyledBox = styled.div<{ $activeBgs?: string[] }>`
   border: 2px solid ${props => props.theme.borders.box};
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
   transition: all 0.3s ease;
@@ -38,13 +38,13 @@ export const StyledBox = styled.div<{ activeBgs?: string[] }>`
     z-index: 10;
   }
   ${props =>
-    props.activeBgs &&
+    props.$activeBgs &&
     css`
       .content {
-        background-image: ${props.activeBgs[0]};
+        background-image: ${props.$activeBgs[0]};
 
         &:hover {
-          background-image: ${props.activeBgs[1]};
+          background-image: ${props.$activeBgs[1]};
         }
       }
     `}

diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
@@ -12,7 +12,7 @@ interface BoxProps {
   activeBgs?: string[]; // if present, they act as hover backgrounds
 }
 const Box: FC<BoxProps> = ({ className = '', activeBgs, children }) => (
-  <StyledBox className={className} activeBgs={activeBgs}>
+  <StyledBox className={className} $activeBgs={activeBgs}>
     <div className="content">{children}</div>
   </StyledBox>
 );

diff --git a/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx b/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx
@@ -5,8 +5,8 @@ import { BulkDeploymentsDataTable, BulkDeploymentsHeader } from './StyledBulkDep
 
 const BulkDeploymentsSkeleton = () => {
   const numberOfItems = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
-  const rowItem = (
-    <div className="data-row">
+  const rowItem = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="project">
         <Skeleton width={'100%'} />
       </div>
@@ -46,7 +46,9 @@ const BulkDeploymentsSkeleton = () => {
         <label className="duration">Duration</label>
         <label></label>
       </BulkDeploymentsHeader>
-      <BulkDeploymentsDataTable>{[...Array<undefined>(numberOfItems)].map(() => rowItem)}</BulkDeploymentsDataTable>
+      <BulkDeploymentsDataTable>
+        {[...Array<undefined>(numberOfItems)].map((_, idx) => rowItem(idx))}
+      </BulkDeploymentsDataTable>
     </div>
   );
 };

diff --git a/src/components/Deployments/DeploymentsSkeleton.tsx b/src/components/Deployments/DeploymentsSkeleton.tsx
@@ -6,8 +6,8 @@ import { StyledDeployments } from './StyledDeployments';
 const DeploymentsSkeleton = () => {
   const numberOfDeploymentFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
 
-  const skeletonItem = (
-    <div className="deploymentRow">
+  const skeletonItem = (idx: number) => (
+    <div className="deploymentRow" key={idx}>
       <div className="data-row">
         <div className="name">
           <Skeleton />
@@ -36,7 +36,9 @@ const DeploymentsSkeleton = () => {
         <label>Status</label>
         <label>Duration</label>
       </div>
-      <div className="data-table">{[...Array<undefined>(numberOfDeploymentFields)].map(() => skeletonItem)}</div>
+      <div className="data-table">
+        {[...Array<undefined>(numberOfDeploymentFields)].map((_, idx) => skeletonItem(idx))}
+      </div>
     </StyledDeployments>
   );
 };

diff --git a/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx b/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx
@@ -4,8 +4,8 @@ import Skeleton from 'react-loading-skeleton';
 import { Deployments, DeploymentsDataTable, DeploymentsHeader } from './StyledDeploymentsByFilter';
 
 const DeploymentsByFilterSkeleton = () => {
-  const SkeletonRow = (
-    <div className="data-row row-heading skeleton">
+  const SkeletonRow = (idx: number) => (
+    <div className="data-row row-heading skeleton" key={idx}>
       <div className="project">
         <Skeleton />
       </div>
@@ -67,7 +67,9 @@ const DeploymentsByFilterSkeleton = () => {
           <label>Duration</label>
           <label></label>
         </DeploymentsHeader>
-        <DeploymentsDataTable>{[...Array<undefined>(numberOfItems)].map(() => SkeletonRow)}</DeploymentsDataTable>
+        <DeploymentsDataTable>
+          {[...Array<undefined>(numberOfItems)].map((_, idx) => SkeletonRow(idx))}
+        </DeploymentsDataTable>
       </>
     </Deployments>
   );

diff --git a/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx b/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
@@ -7,8 +7,8 @@ import { StyledEnvironmentVariableDetails, StyledProjectVariableTable } from './
 const EnvironmentVariablesSkeleton = () => {
   const numberOfVariableFields = 3;
 
-  const skeletonItem = (
-    <div className="data-row">
+  const skeletonItem = (idx: number) => (
+    <div className="data-row" key={idx}>
       <div className="varName">
         <Skeleton width={'90%'} />
       </div>
@@ -18,8 +18,8 @@ const EnvironmentVariablesSkeleton = () => {
     </div>
   );
 
-  const projectSkeletonItem = (
-    <div className="data-row">
+  const projectSkeletonItem = (idx: number) => (
+    <div className="data-row" key={`project-${idx}`}>
       <div className="varName">
         <Skeleton width={'90%'} />
       </div>
@@ -47,7 +47,9 @@ const EnvironmentVariablesSkeleton = () => {
             <label>Scope</label>
           </div>
         </div>
-        <div className="data-table">{[...Array<undefined>(numberOfVariableFields)].map(() => skeletonItem)}</div>
+        <div className="data-table">
+          {[...Array<undefined>(numberOfVariableFields)].map((_, idx) => skeletonItem(idx))}
+        </div>
       </StyledProjectVariableTable>
       <hr style={{ margin: '30px 0' }} />
       <div className="header">
@@ -66,7 +68,9 @@ const EnvironmentVariablesSkeleton = () => {
             <label>Scope</label>
           </div>
         </div>
-        <div className="data-table">{[...Array<undefined>(numberOfVariableFields)].map(() => projectSkeletonItem)}</div>
+        <div className="data-table">
+          {[...Array<undefined>(numberOfVariableFields)].map((_, idx) => projectSkeletonItem(idx))}
+        </div>
       </StyledProjectVariableTable>
     </StyledEnvironmentVariableDetails>
   );

diff --git a/src/components/Header/StyledHeader.tsx b/src/components/Header/StyledHeader.tsx
@@ -1,11 +1,11 @@
 import { color } from 'lib/variables';
 import styled from 'styled-components';
 
-export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
+export const StyledHeader = styled.header<{ $isOrganizationsPath: boolean }>`
   background: ${color.brightBlue} ${color.lightBlue};
   background: ${color.lightBlue};
   background: ${props =>
-    props.isOrganizationsPath
+    props.$isOrganizationsPath
       ? props.theme.gradients.organizationsHeaderGradient
       : props.theme.gradients.headerFooterGradient};
 
@@ -42,7 +42,7 @@ export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
     }
     &.navitem {
       align-items: center;
-      border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
+      border-left: 1px solid ${props => (props.$isOrganizationsPath ? 'transparent' : color.blue)};
       cursor: pointer;
       display: flex;
       &::before {

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -23,8 +23,8 @@ const Header = ({ logo }) => {
   const isOrganizationsPath = asPath.includes('/organizations');
 
   return (
-    <StyledHeader isOrganizationsPath={isOrganizationsPath}>
-      <Link href="/">
+    <StyledHeader $isOrganizationsPath={isOrganizationsPath}>
+      <Link href="/projects">
         <a className="home">
           <img
             alt="Home"

diff --git a/src/components/HeaderMenu/StyledHeaderMenu.tsx b/src/components/HeaderMenu/StyledHeaderMenu.tsx
@@ -25,8 +25,8 @@ export const DropdownButton = styled.a`
   }
 `;
 
-export const StyledDropdown = styled.div<{ isOrganizationsPath: boolean }>`
-  border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
+export const StyledDropdown = styled.div<{ $isOrganizationsPath: boolean }>`
+  border-left: 1px solid ${props => (props.$isOrganizationsPath ? 'transparent' : color.blue)};
   cursor: pointer;
   padding: 10px 20px;
   hr {

diff --git a/src/components/HeaderMenu/index.js b/src/components/HeaderMenu/index.js
@@ -42,16 +42,6 @@ const HeaderMenu = ({ auth, isOrganizationsPath }) => {
     setOpen(!open);
   };
 
-  const handleMenuOne = () => {
-    // do something
-    setOpen(false);
-  };
-
-  const handleMenuTwo = () => {
-    // do something
-    setOpen(false);
-  };
-
   return (
     <>
       <Dropdown
@@ -100,7 +90,7 @@ const HeaderMenu = ({ auth, isOrganizationsPath }) => {
 const Dropdown = ({ open, trigger, menu, isOrganizationsPath }) => {
   return (
     <>
-      <StyledDropdown isOrganizationsPath={isOrganizationsPath}>
+      <StyledDropdown $isOrganizationsPath={isOrganizationsPath}>
         {trigger}
         {open ? (
           <DropdownMenu data-cy="menuList">

diff --git a/src/components/HoverTag/index.tsx b/src/components/HoverTag/index.tsx
@@ -21,8 +21,8 @@ const textPairs = {
 
 const HoverTag: FC<Props> = ({ tooltipPosition, tagColor, maxWidth, text, textColor, formatToReadableText }) => {
   const toolTipTextProps = {
-    ...(maxWidth ? { maxWidth } : {}),
-    ...(textColor ? { textColor } : {}),
+    ...(maxWidth ? { $maxWidth: maxWidth } : {}),
+    ...(textColor ? { $textColor: textColor } : {}),
   };
 
   const formatText = (textProp: Props['text']) => {

diff --git a/src/components/HoverTag/styles.tsx b/src/components/HoverTag/styles.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
-export const TooltipText = styled.p<{ maxWidth?: string; textColor?: string }>`
+export const TooltipText = styled.p<{ $maxWidth?: string; $textColor?: string }>`
   margin: unset;
-  max-width: ${props => (props.maxWidth ? props.maxWidth : '150px')};
+  max-width: ${props => (props.$maxWidth ? props.$maxWidth : '150px')};
   margin: unset;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${props => (props.textColor ? props.textColor : '#fff')};
+  color: ${props => (props.$textColor ? props.$textColor : '#fff')};
 `;
diff --git a/src/components/Organizations/GroupMembers/index.js b/src/components/Organizations/GroupMembers/index.js
@@ -127,7 +127,7 @@ const GroupMembers = ({
         const isDefaultUser = email.startsWith('default-user');
         if (isDefaultUser)
           return (
-            <Tag style={{ display: 'inline' }} background="#262D65">
+            <Tag style={{ display: 'inline' }} $background="#262D65">
               DEFAULT USER
             </Tag>
           );
@@ -271,7 +271,7 @@ const GroupMembers = ({
 
             <ProjectLink projectSlug={project.name} key={project.id} openInTab>
               <Tooltip overlayClassName="orgTooltip" title="View Dashboard" placement="bottom">
-                <ProjectDashboard inlineLink>
+                <ProjectDashboard $inlineLink>
                   <IconDashboard />
                 </ProjectDashboard>
               </Tooltip>

diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js
@@ -72,7 +72,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
             <span>
               {i.name}{' '}
               {i.type === 'project-default-group' && (
-                <Tag style={{ display: 'inline' }} background="#262D65">
+                <Tag style={{ display: 'inline' }} $background="#262D65">
                   SYSTEM GROUP
                 </Tag>
               )}

diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
@@ -80,7 +80,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
         const isDefaultUser = email.startsWith('default-user');
         if (isDefaultUser)
           return (
-            <Tag style={{ display: 'inline' }} background="#262D65">
+            <Tag style={{ display: 'inline' }} $background="#262D65">
               DEFAULT USER
             </Tag>
           );
@@ -98,11 +98,11 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
             </div>
 
             {owner ? (
-              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} background="#47D3FF">
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#47D3FF">
                 ORG OWNER
               </Tag>
             ) : (
-              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} background="#FF4747">
+              <Tag style={{ display: 'inline-block', marginLeft: '2.5rem' }} $background="#FF4747">
                 ORG VIEWER
               </Tag>
             )}

diff --git a/src/components/Organizations/Organization/Styles.tsx b/src/components/Organizations/Organization/Styles.tsx
@@ -173,7 +173,7 @@ export const StyledOverview = styled.div`
   }
 `;
 
-export const LinkBtn = styled.a`
+export const LinkBtn = styled.span`
   margin-top: 25px;
   background: #4b84ff;
   color: #fff;
@@ -197,16 +197,16 @@ export const LinkBtn = styled.a`
   }
 `;
 
-export const ManageBtn = styled.a`
+export const ManageBtn = styled.p`
   margin-top: 25px;
   background: #4b84ff;
   color: #fff;
-  display: inline-block;
+  align-items: center;
   min-width: 115px;
   width: max-content;
   padding: 6px 15px;
   cursor: pointer;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 10px;
   transition: all 0.15s ease;

diff --git a/src/components/Organizations/Organization/index.js b/src/components/Organizations/Organization/index.js
@@ -269,11 +269,11 @@ const Organization = ({ organization, refetch }) => {
                     <div className="email">{owner.email} </div>
 
                     {owner.owner ? (
-                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} background="#47D3FF">
+                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#47D3FF">
                         ORG OWNER
                       </Tag>
                     ) : (
-                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} background="#FF4747">
+                      <Tag style={{ display: 'inline-block', marginLeft: '1.5rem' }} $background="#FF4747">
                         ORG VIEWER
                       </Tag>
                     )}

diff --git a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
@@ -8,7 +8,7 @@ import { Organization, OrganizationsPage, OrgsHeader, SearchInput } from './Styl
 const OrganizationsSkeleton = () => {
   const RenderSkeletonBox = (index: number) => {
     return (
-      <Box className="box">
+      <Box className="box" key={index}>
         <Organization>
           <h4>
             <Skeleton style={{ width: `${index % 2 ? '50%' : '80%'}` }} />

diff --git a/src/components/Organizations/Projects/Styles.tsx b/src/components/Organizations/Projects/Styles.tsx
@@ -166,9 +166,9 @@ export const OrgProjectWrapper = styled.div`
   }
 `;
 
-export const ProjectDashboard = styled.div<{ inlineLink?: boolean }>`
+export const ProjectDashboard = styled.div<{ $inlineLink?: boolean }>`
   ${props =>
-    !props.inlineLink
+    !props.$inlineLink
       ? `
   margin-left:1.5rem;
   font-size:13px;

diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
@@ -69,7 +69,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
           <TableActions style={{ marginLeft: 'auto', gap: '1rem' }}>
             <ProjectLink projectSlug={project.name} key={project.id} openInTab>
               <Tooltip overlayClassName="orgTooltip" title="View Dashboard" placement="bottom">
-                <ProjectDashboard inlineLink>
+                <ProjectDashboard $inlineLink>
                   <IconDashboard />
                 </ProjectDashboard>
               </Tooltip>