diff --git a/Dockerfile b/Dockerfile index e5dd783e..2805fc09 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,9 +1,9 @@ # Node builder image -FROM uselagoon/node-20-builder:latest as builder +FROM uselagoon/node-20-builder:latest AS builder COPY . /app/ -RUN yarn install +RUN yarn install --network-timeout 300000 # Node service image @@ -28,4 +28,4 @@ ENV GRAPHQL_API=$GRAPHQL_API RUN yarn run build EXPOSE 3000 -CMD ["yarn", "start"] \ No newline at end of file +CMD ["yarn", "start"] diff --git a/cypress/cypress.config.ts b/cypress/cypress.config.ts index 9954393f..27492a32 100644 --- a/cypress/cypress.config.ts +++ b/cypress/cypress.config.ts @@ -2,6 +2,7 @@ import { defineConfig } from 'cypress'; export default defineConfig({ requestTimeout: 15000, + defaultCommandTimeout: 8000, e2e: { env: { api: 'http://0.0.0.0:33000/graphql', diff --git a/src/components/DeploymentsByFilter/index.js b/src/components/DeploymentsByFilter/index.js index f9849b9f..93be94a9 100644 --- a/src/components/DeploymentsByFilter/index.js +++ b/src/components/DeploymentsByFilter/index.js @@ -118,10 +118,12 @@ const DeploymentsByFilter = ({ deployments }) => { }); }; + const sortedFilteredItems = sortedItems.filter(deployment => filterResults(deployment)); + return (
- + { - {!sortedItems.filter(deployment => filterResults(deployment)).length && ( -
No deployments
- )} - {sortedItems - .filter(deployment => filterResults(deployment)) - .map(deployment => { - return ( -
-
- - {formatString(deployment.environment.project.name, 'project')} - -
-
- - {formatString(deployment.environment.name, 'environment')} - -
-
{formatString(deployment.environment.openshift.name, 'cluster')}
-
- - {deployment.name} - -
-
{deployment.priority}
-
- {moment.utc(deployment.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')} -
-
- {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)} - - {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && ( - - )} -
-
{getDeploymentDuration(deployment)}
-
- {['new', 'pending', 'queued', 'running'].includes(deployment.status) && ( - - )} -
+ {!sortedFilteredItems.length &&
No deployments
} + {sortedFilteredItems.map(deployment => { + return ( +
+
+ + {formatString(deployment.environment.project.name, 'project')} + +
+
+ + {formatString(deployment.environment.name, 'environment')} + +
+
{formatString(deployment.environment.openshift.name, 'cluster')}
+
+ + {deployment.name} + +
+
{deployment.priority}
+
+ {moment.utc(deployment.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')} +
+
+ {deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)} + + {!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && ( + + )} +
+
{getDeploymentDuration(deployment)}
+
+ {['new', 'pending', 'queued', 'running'].includes(deployment.status) && ( + + )}
- ); - })} +
+ ); + })} ); diff --git a/src/components/Organizations/Notifications/index.js b/src/components/Organizations/Notifications/index.js index cfa06c0b..e3e19dd3 100644 --- a/src/components/Organizations/Notifications/index.js +++ b/src/components/Organizations/Notifications/index.js @@ -100,6 +100,7 @@ const OrgNotifications = ({ open: false, type: '', current: {}, + updated: {}, }; const [editState, setEditState] = useState(initialEditState); @@ -130,8 +131,8 @@ const OrgNotifications = ({ const newValue = e.target.value; setEditState(prevState => ({ ...prevState, - current: { - ...prevState.current, + updated: { + ...prevState.updated, [property]: newValue, }, })); @@ -185,94 +186,95 @@ const OrgNotifications = ({ - - -
- -
- -
- -
- -
- -
- -
- console.error(e)}> - {(updateSlack, { called, error, data }) => { - if (error) { - return
{error.message}
; - } - if (data) { - refresh().then(() => { - closeEditModal(); - }); - } - return ( - - ); - }} - - -
- - + }); + }} + > + Continue + + ); + }} + + + + + )} console.error(e)}> {(removeNotification, { called, error, data }) => { if (data) { @@ -316,93 +318,95 @@ const OrgNotifications = ({ - - -
- -
- -
- -
- -
- -
- -
- console.error(e)}> - {(updateRocketChat, { called, error, data }) => { - if (error) { - return
{error.message}
; - } - if (data) { - refresh().then(() => { - closeEditModal(); - }); - } - return ( - - ); - }} - - -
- + }); + }} + > + Continue + + ); + }} + + + + + )} console.error(e)}> {(removeNotification, { called, error, data }) => { if (error) { @@ -449,82 +453,84 @@ const OrgNotifications = ({ - - -
- -
- -
- - {!isValidEmail &&

Invalid email address

} -
- -
- console.error(e)}> - {(updateEmail, { called, error, data }) => { - if (error) { - return
{error.message}
; - } - if (data) { - refresh().then(() => { - closeEditModal(); - }); - } - return ( - - ); - }} - - -
- + {editState.current && editState.current.name === notification.name && ( + + +
+ +
+ +
+ + {!isValidEmail &&

Invalid email address

} +
+ +
+ console.error(e)}> + {(updateEmail, { called, error, data }) => { + if (error) { + return
{error.message}
; + } + if (data) { + refresh().then(() => { + closeEditModal(); + }); + } + return ( + + ); + }} + + +
+ + )} console.error(e)}> {(removeNotification, { called, error, data }) => { if (data) { @@ -574,80 +580,81 @@ const OrgNotifications = ({ - - -
- -
- -
- -
- -
- console.error(e)}> - {(updateWebhook, { called, error, data }) => { - if (error) { - return
{error.message}
; - } - if (data) { - refresh().then(() => { - closeEditModal(); - }); - } - return ( - - ); - }} - - -
- - + }); + }} + > + Continue + + ); + }} + + + + + )} console.error(e)}> {(removeNotification, { called, error, data }) => { if (data) { @@ -693,79 +700,82 @@ const OrgNotifications = ({ - - -
- -
- -
- -
- -
- console.error(e)}> - {(updateTeams, { called, error, data }) => { - if (error) { - return
{error.message}
; - } - if (data) { - refresh().then(() => { - closeEditModal(); - }); - } - return ( - - ); - }} - - -
- + }); + }} + > + Continue + + ); + }} + + + + + )} console.error(e)}> {(removeNotification, { called, error, data }) => { if (data) { diff --git a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx index 40191e0c..e0d9a676 100644 --- a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx +++ b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx @@ -5,7 +5,11 @@ import Box from 'components/Box'; import { Organization, OrganizationsPage, OrgsHeader, SearchInput } from './StyledOrganizations'; -const OrganizationsSkeleton = () => { +interface Props { + setSearch: React.Dispatch>; +} + +const OrganizationsSkeleton = ({ setSearch }: Props) => { const RenderSkeletonBox = (index: number) => { return ( @@ -27,7 +31,13 @@ const OrganizationsSkeleton = () => { - + setSearch(e.target.value)} + aria-labelledby="search" + className="searchInput" + type="text" + placeholder="Type to search" + /> <>{[...Array(numberOfItems)].map((_, idx) => RenderSkeletonBox(idx))} diff --git a/src/components/Organizations/Organizations/index.tsx b/src/components/Organizations/Organizations/index.tsx index 8d95711a..00ac463c 100644 --- a/src/components/Organizations/Organizations/index.tsx +++ b/src/components/Organizations/Organizations/index.tsx @@ -1,8 +1,11 @@ -import React, { useState } from 'react'; +import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import Highlighter from 'react-highlight-words'; +import { LoadingOutlined } from '@ant-design/icons'; +import { Spin } from 'antd'; import Box from 'components/Box'; import OrganizationLink from 'components/link/Organizations/Organization'; +import { debounce } from 'lib/util'; import { Organization, OrganizationsPage, OrgsHeader, SearchInput } from './StyledOrganizations'; @@ -14,29 +17,112 @@ export interface IOrganization { __typename: 'Organization'; } +interface OrganizationProps { + organizations: IOrganization[]; + initialSearch: string; +} /** * The primary list of organizations. */ -const Organizations = ({ organizations = [] }: { organizations: IOrganization[] }) => { - const [searchInput, setSearchInput] = useState(''); +const Organizations: FC = ({ organizations = [], initialSearch }) => { + const [searchInput, setSearchInput] = useState(initialSearch || ''); + + const [isFiltering, setIsFiltering] = useState(false); + const [filteredOrgs, setFilteredOrgs] = useState(organizations); + + const searchInputRef = useRef(null); + + useEffect(() => { + if (initialSearch && searchInputRef.current) { + searchInputRef.current.focus(); + } + }, []); + + const timerLengthPercentage = useMemo( + () => Math.min(1000, Math.max(40, Math.floor(organizations.length * 0.0725))), + [organizations.length] + ); + + const debouncedSearch = useCallback( + debounce((searchVal: string) => { + setSearchInput(searchVal); + }, timerLengthPercentage), + [] + ); + + const handleSearch = (searchVal: string) => { + setIsFiltering(true); + debouncedSearch(searchVal); + }; - const filteredOrganizations = organizations.filter(key => { - const sortByName = key.name.toLowerCase().includes(searchInput.toLowerCase()); - const sortByUrl = ''; - return ['name', 'environments', '__typename'].includes(key.name) ? false : (true && sortByName) || sortByUrl; - }); + useEffect(() => { + const filterOrgs = async (): Promise => { + return new Promise(resolve => { + const filteredOrganizations = organizations.filter(org => { + const searchStrLowerCase = searchInput.toLowerCase(); + const filterFn = (key?: string) => key?.toLowerCase().includes(searchStrLowerCase); + + const sortByName = filterFn(org.name); + const sortByDesc = filterFn(org.description); + const sortByFriendlyName = filterFn(org.friendlyName); + + if (['__typename', 'name', 'id'].includes(org.name)) { + return false; + } + return sortByName || sortByFriendlyName || sortByDesc; + }); + + resolve(filteredOrganizations); + }); + }; + + void filterOrgs() + .then(filtered => setFilteredOrgs(filtered)) + .finally(() => setIsFiltering(false)); + }, [searchInput, organizations]); + + const filteredMappedOrgs = useMemo(() => { + return filteredOrgs.map(organization => ( + + + +

+ +

+
+ +
+ +
+ + + )); + }, [filteredOrgs]); return ( - + setSearchInput(e.target.value)} + onChange={e => handleSearch(e.target.value)} placeholder="Type to search" disabled={organizations.length === 0} /> @@ -48,37 +134,14 @@ const Organizations = ({ organizations = [] }: { organizations: IOrganization[] )} - {searchInput && !filteredOrganizations.length && ( + {searchInput && !filteredMappedOrgs.length && (

No organizations matching "{searchInput}"

 )} - {filteredOrganizations.map(organization => ( - - - -

- -

-
- -
- -
- - - ))} + {filteredMappedOrgs} ); }; diff --git a/src/components/Organizations/SharedStyles.tsx b/src/components/Organizations/SharedStyles.tsx index ba652c07..4fe024a6 100644 --- a/src/components/Organizations/SharedStyles.tsx +++ b/src/components/Organizations/SharedStyles.tsx @@ -450,6 +450,9 @@ export const RemoveModalParagraph = styled.p` line-height: 24px; span { font-weight: bold; + &.highlight { + color: #4b84ff; + } } `; diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js index ef62e6c0..e3579f8c 100644 --- a/src/components/Organizations/Users/index.js +++ b/src/components/Organizations/Users/index.js @@ -132,7 +132,7 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref {!user.email.startsWith('default-user') ? ( <> - + { @@ -144,7 +144,8 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref Remove user? - This action will remove this user from all groups, you might not be able to reverse this. + This action will remove user {user.email} from all groups in this + organization, you might not be able to reverse this.