more changes

src/components/pages/environments/ProjectEnvironmentsPage.tsx

@@ -57,6 +57,7 @@ export default function ProjectEnvironmentsPage({
     projectName,
     refetch,
     resultsPerPage: env_count,
+    setResultsPerPage: setEnvCount,
     filterString: search || '',
   };
 

src/components/pages/environments/_components/CardView.tsx

@@ -10,18 +10,26 @@ import { NewEnvironment } from '@/components/newEnvironment/NewEnvironment';
 import { getHighestSeverityProblem, makeSafe } from '@/components/utils';
 import { LagoonCard } from '@uselagoon/ui-library';
 
-import { StyledEnvCount, StyledEnvironmentsWrapper } from '../styles';
+import { StyledEnvText, StyledEnvironmentsWrapper } from '../styles';
 import { getEnvironmentQuickActions } from './helpers';
 
 interface Props {
   project: ProjectData['project'];
   resultsPerPage: number;
   filterString: string;
   projectName: string;
+  setResultsPerPage: (val: string) => void;
   refetch: () => void;
 }
 
-export const CardView: FC<Props> = ({ project, projectName, filterString, resultsPerPage, refetch }) => {
+export const CardView: FC<Props> = ({
+  project,
+  projectName,
+  filterString,
+  resultsPerPage,
+  refetch,
+  setResultsPerPage,
+}) => {
   const { environments } = project;
   const { push } = useRouter();
 
@@ -46,6 +54,15 @@ export const CardView: FC<Props> = ({ project, projectName, filterString, result
   // slice filteredEnvironments based on resultsPerPage
   const slicedEnvsByCount = filteredEnvironments.slice(0, resultsPerPage);
 
+  const handleShowMore = () => {
+    if (environments.length - slicedEnvsByCount.length > 5) {
+      setResultsPerPage(String(resultsPerPage + 5));
+      return;
+    }
+
+    // use the "maximum" selectable value
+    setResultsPerPage(String(50));
+  };
   return (
     <>
       <StyledEnvironmentsWrapper>
@@ -90,9 +107,10 @@ export const CardView: FC<Props> = ({ project, projectName, filterString, result
         <NewEnvironment projectName={projectName} refetch={refetch} />
       </StyledEnvironmentsWrapper>
 
-      <StyledEnvCount>
+      {environments.length > slicedEnvsByCount.length ? <StyledEnvText $button onClick={handleShowMore}>Show more...</StyledEnvText> : null}
+      <StyledEnvText>
         Showing {slicedEnvsByCount.length} of {environments.length} Environments
-      </StyledEnvCount>
+      </StyledEnvText>
     </>
   );
 };

src/components/pages/environments/styles.tsx

@@ -45,7 +45,14 @@ export const StyledToggle = styled.div`
   cursor: pointer;
 `;
 
-export const StyledEnvCount = styled.div`
+export const StyledEnvText = styled.div<{$button?: boolean}>`
   font-family: 'ArabicPro-Regular', sans-serif;
   margin-top: 1rem;
+
+  ${props => props.$button && css`
+    cursor: pointer;
+    &:hover{
+      text-decoration: underline;
+    }
+  `}
 `;

yarn.lock

@@ -3412,7 +3412,7 @@
 
 "@uselagoon/ui-library@github:uselagoon/ui-library":
   version "1.1.2"
-  resolved "https://codeload.github.com/uselagoon/ui-library/tar.gz/ad2699ae17d334a2900c70cf92b6e2cd32caa849"
+  resolved "https://codeload.github.com/uselagoon/ui-library/tar.gz/9314bc875b47a7c1448829a9f8b03024d82dab1b"
   dependencies:
     dayjs "^1.11.13"
     react-highlight-words "^0.20.0"