From 9ceda92383c8d07927fe0e26594de665dce7b28a Mon Sep 17 00:00:00 2001 From: Davit Date: Mon, 25 Mar 2024 12:54:54 +1100 Subject: [PATCH] fix numerous errors --- server.js | 2 +- src/components/Backups/BackupsSkeleton.tsx | 6 +++--- src/components/Box/StyledBox.tsx | 8 ++++---- src/components/Box/index.tsx | 2 +- .../BulkDeploymentsSkeleton.tsx | 8 +++++--- .../Deployments/DeploymentsSkeleton.tsx | 8 +++++--- .../DeploymentsByFilterSkeleton.tsx | 8 +++++--- .../EnvironmentVariablesSkeleton.tsx | 16 +++++++++------ src/components/Header/StyledHeader.tsx | 6 +++--- src/components/Header/index.js | 4 ++-- .../HeaderMenu/StyledHeaderMenu.tsx | 4 ++-- src/components/HeaderMenu/index.js | 12 +---------- src/components/HoverTag/index.tsx | 4 ++-- src/components/HoverTag/styles.tsx | 6 +++--- .../Organizations/GroupMembers/index.js | 4 ++-- src/components/Organizations/Groups/index.js | 2 +- src/components/Organizations/Manage/index.js | 6 +++--- .../Organizations/Organization/Styles.tsx | 8 ++++---- .../Organizations/Organization/index.js | 4 ++-- .../Organizations/OrganizationsSkeleton.tsx | 2 +- .../Organizations/Projects/Styles.tsx | 4 ++-- .../Organizations/Projects/index.js | 2 +- src/components/Organizations/SharedStyles.tsx | 4 ++-- src/components/Organizations/Users/index.js | 2 +- .../ProjectVariablesSkeleton.tsx | 8 +++++--- src/components/Projects/ProjectsSkeleton.tsx | 2 +- src/components/Tasks/TasksSkeleton.tsx | 8 +++++--- src/lib/withKeycloak.js | 20 +++++++++++++------ .../{organizations.js => index.js} | 0 .../organizations/organizations.stories.tsx | 2 +- 30 files changed, 92 insertions(+), 80 deletions(-) rename src/pages/organizations/{organizations.js => index.js} (100%) diff --git a/server.js b/server.js index ac728069..e88f9cef 100644 --- 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 index f9e9085c..0f183a9a 100644 --- 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 = ( -
+ const backupFieldSkeleton = (idx: number) => ( +
@@ -32,7 +32,7 @@ const Backups = () => { - {[...Array(numberOfBackupFields)].map(() => backupFieldSkeleton)} + {[...Array(numberOfBackupFields)].map((_, idx) => backupFieldSkeleton(idx))}
); }; diff --git a/src/components/Box/StyledBox.tsx b/src/components/Box/StyledBox.tsx index 8851f2b8..cea9cbbb 100644 --- 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 index c50d29c3..31b6a68c 100644 --- 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 = ({ className = '', activeBgs, children }) => ( - +
{children}
 ); diff --git a/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx b/src/components/BulkDeployments/BulkDeploymentsSkeleton.tsx index b959d27d..b1273065 100644 --- 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 = ( -
+ const rowItem = (idx: number) => ( +
@@ -46,7 +46,9 @@ const BulkDeploymentsSkeleton = () => { - {[...Array(numberOfItems)].map(() => rowItem)} + + {[...Array(numberOfItems)].map((_, idx) => rowItem(idx))} +
); }; diff --git a/src/components/Deployments/DeploymentsSkeleton.tsx b/src/components/Deployments/DeploymentsSkeleton.tsx index 0ca27f99..70b77a13 100644 --- 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 = ( -
+ const skeletonItem = (idx: number) => ( +
@@ -36,7 +36,9 @@ const DeploymentsSkeleton = () => {
-
{[...Array(numberOfDeploymentFields)].map(() => skeletonItem)}
+
+ {[...Array(numberOfDeploymentFields)].map((_, idx) => skeletonItem(idx))} +
); }; diff --git a/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx b/src/components/DeploymentsByFilter/DeploymentsByFilterSkeleton.tsx index f35d3179..fcc81e78 100644 --- 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 = ( -
+ const SkeletonRow = (idx: number) => ( +
@@ -67,7 +67,9 @@ const DeploymentsByFilterSkeleton = () => { - {[...Array(numberOfItems)].map(() => SkeletonRow)} + + {[...Array(numberOfItems)].map((_, idx) => SkeletonRow(idx))} + ); diff --git a/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx b/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx index d3446623..aa3a5e60 100644 --- 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 = ( -
+ const skeletonItem = (idx: number) => ( +
@@ -18,8 +18,8 @@ const EnvironmentVariablesSkeleton = () => {
); - const projectSkeletonItem = ( -
+ const projectSkeletonItem = (idx: number) => ( +
@@ -47,7 +47,9 @@ const EnvironmentVariablesSkeleton = () => {
-
{[...Array(numberOfVariableFields)].map(() => skeletonItem)}
+
+ {[...Array(numberOfVariableFields)].map((_, idx) => skeletonItem(idx))} +
@@ -66,7 +68,9 @@ const EnvironmentVariablesSkeleton = () => {
-
{[...Array(numberOfVariableFields)].map(() => projectSkeletonItem)}
+
+ {[...Array(numberOfVariableFields)].map((_, idx) => projectSkeletonItem(idx))} +
); diff --git a/src/components/Header/StyledHeader.tsx b/src/components/Header/StyledHeader.tsx index 14e1bf00..d649ad6f 100644 --- 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 index df33144f..1ae09d5d 100644 --- 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 ( - - + + Home` - 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 index 884b6ba1..7654fd65 100644 --- 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 ( <> { const Dropdown = ({ open, trigger, menu, isOrganizationsPath }) => { return ( <> - + {trigger} {open ? ( diff --git a/src/components/HoverTag/index.tsx b/src/components/HoverTag/index.tsx index 2b0a4666..c7286c1a 100644 --- a/src/components/HoverTag/index.tsx +++ b/src/components/HoverTag/index.tsx @@ -21,8 +21,8 @@ const textPairs = { const HoverTag: FC = ({ 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 index 4acc8a2f..a7d24f68 100644 --- 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 index 6a4e600c..e6303970 100644 --- 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 ( - + DEFAULT USER ); @@ -271,7 +271,7 @@ const GroupMembers = ({ - + diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js index 2e4ba27c..f928e093 100644 --- a/src/components/Organizations/Groups/index.js +++ b/src/components/Organizations/Groups/index.js @@ -72,7 +72,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup, {i.name}{' '} {i.type === 'project-default-group' && ( - + SYSTEM GROUP )} diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js index db7a7853..9764483d 100644 --- 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 ( - + DEFAULT USER ); @@ -98,11 +98,11 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
{owner ? ( - + ORG OWNER ) : ( - + ORG VIEWER )} diff --git a/src/components/Organizations/Organization/Styles.tsx b/src/components/Organizations/Organization/Styles.tsx index 248fb2a0..ce90b5c8 100644 --- 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 index f18c3d78..e2b7d99a 100644 --- a/src/components/Organizations/Organization/index.js +++ b/src/components/Organizations/Organization/index.js @@ -269,11 +269,11 @@ const Organization = ({ organization, refetch }) => {
{owner.email}
{owner.owner ? ( - + ORG OWNER ) : ( - + ORG VIEWER )} diff --git a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx index 2fae3a34..40191e0c 100644 --- 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 ( - +

diff --git a/src/components/Organizations/Projects/Styles.tsx b/src/components/Organizations/Projects/Styles.tsx index a5fccfee..a8ec3e21 100644 --- 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 index 24927a5b..2979d006 100644 --- a/src/components/Organizations/Projects/index.js +++ b/src/components/Organizations/Projects/index.js @@ -69,7 +69,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh, - + diff --git a/src/components/Organizations/SharedStyles.tsx b/src/components/Organizations/SharedStyles.tsx index a33d6ab7..ba652c07 100644 --- a/src/components/Organizations/SharedStyles.tsx +++ b/src/components/Organizations/SharedStyles.tsx @@ -250,9 +250,9 @@ export const sharedTableStyles = css` } `; -export const Tag = styled.div<{ background: string }>` +export const Tag = styled.div<{ $background: string }>` border-radius: 5px; - background: ${props => props.background}; + background: ${props => props.$background}; padding: 3px 8px; font-weight: 600; font-size: 12px; diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js index 2c7a1a3e..14c26923 100644 --- a/src/components/Organizations/Users/index.js +++ b/src/components/Organizations/Users/index.js @@ -87,7 +87,7 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref const isDefaultUser = email.startsWith('default-user'); if (isDefaultUser) return ( - + DEFAULT USER ); diff --git a/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx b/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx index 8bbb2117..6fad0bb3 100644 --- a/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx +++ b/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx @@ -7,8 +7,8 @@ import { StyledProjectVariableTable, StyledProjectVariablesDetails } from './Sty const ProjectVariablesSkeleton = () => { const numberOfVariableFields = 3; - const skeletonItem = ( -
+ const skeletonItem = (idx: number) => ( +
@@ -36,7 +36,9 @@ const ProjectVariablesSkeleton = () => {
-
{[...Array(numberOfVariableFields)].map(() => skeletonItem)}
+
+ {[...Array(numberOfVariableFields)].map((_, idx) => skeletonItem(idx))} +
); diff --git a/src/components/Projects/ProjectsSkeleton.tsx b/src/components/Projects/ProjectsSkeleton.tsx index a1707062..57130148 100644 --- a/src/components/Projects/ProjectsSkeleton.tsx +++ b/src/components/Projects/ProjectsSkeleton.tsx @@ -11,7 +11,7 @@ interface Props { const ProjectsSkeleton = ({ setSearch }: Props) => { const RenderSkeletonBox = (index: number) => { return ( - +

diff --git a/src/components/Tasks/TasksSkeleton.tsx b/src/components/Tasks/TasksSkeleton.tsx index a5fe4008..409c81fc 100644 --- a/src/components/Tasks/TasksSkeleton.tsx +++ b/src/components/Tasks/TasksSkeleton.tsx @@ -6,8 +6,8 @@ import { StyledTasks, TasksTable } from './StyledTasks'; const TasksSkeleton = () => { const numberOfItems = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10; - const itemRender = ( -
+ const itemRender = (idx: number) => ( +
@@ -36,7 +36,9 @@ const TasksSkeleton = () => {
- {[...Array(numberOfItems)].map(() => itemRender)} + + {[...Array(numberOfItems)].map((_, idx) => itemRender(idx))} + ); }; diff --git a/src/lib/withKeycloak.js b/src/lib/withKeycloak.js index 3ce0a3c8..05b713b7 100644 --- a/src/lib/withKeycloak.js +++ b/src/lib/withKeycloak.js @@ -18,20 +18,28 @@ export default (App, initialAuth) => { } async componentDidMount() { - const keycloak = Keycloak({ + const keycloak = new Keycloak({ url: publicRuntimeConfig.KEYCLOAK_API, realm: 'lagoon', clientId: 'lagoon-ui', }); keycloak.onTokenExpired = async () => { - await keycloak.updateToken(); - this.setAuth(keycloak); + try { + await keycloak.updateToken(); + this.setAuth(keycloak); + } catch (err) { + console.error('Error refreshing token', err.message); + } }; - await keycloak.init({ - checkLoginIframe: false, - }); + try { + await keycloak.init({ + checkLoginIframe: false, + }); + } catch (err) { + console.error('Authentication error', err.message); + } if (!keycloak.authenticated) { const urlQuery = queryStringToObject(location.search); diff --git a/src/pages/organizations/organizations.js b/src/pages/organizations/index.js similarity index 100% rename from src/pages/organizations/organizations.js rename to src/pages/organizations/index.js diff --git a/src/stories/organizations/organizations.stories.tsx b/src/stories/organizations/organizations.stories.tsx index bac5eeee..36205c6d 100644 --- a/src/stories/organizations/organizations.stories.tsx +++ b/src/stories/organizations/organizations.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'; import { graphql } from 'msw'; import { getOrganization } from '../../../.storybook/mocks/api'; -import OrganizationsPage from '../../pages/organizations/organizations'; +import OrganizationsPage from '../../pages/organizations'; const meta: Meta = { title: 'Pages/Organizations/AllOrganizations',