From 62e682b51062fdc435e6b8ce4d1039e1e05fe06b Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 12:10:51 +0530 Subject: [PATCH 1/4] [CMG-147] - Search | When search entering space multiple times, it doesnt show message ' No result found' --- ui/src/components/ProjectsHeader/index.tsx | 39 ++++++++---- ui/src/pages/Projects/index.tsx | 70 +++++++++++----------- 2 files changed, 62 insertions(+), 47 deletions(-) diff --git a/ui/src/components/ProjectsHeader/index.tsx b/ui/src/components/ProjectsHeader/index.tsx index 868cf0fd8..31393ceb1 100644 --- a/ui/src/components/ProjectsHeader/index.tsx +++ b/ui/src/components/ProjectsHeader/index.tsx @@ -13,6 +13,7 @@ const ProjectsHeader = ({ allProject, handleModal }: ProjectsHeaderType) => { + let interval: ReturnType; function setFocus() { clearTimeout(interval); @@ -22,18 +23,32 @@ const ProjectsHeader = ({ } const SearchProject = ( <> - {allProject && allProject?.length > 0 && ( -
- setSearchText(search)} - onClear={true} - value={searchText} - debounceSearch={true} - id="search-project-input" - /> -
- )} + {allProject && allProject?.length > 0 + ?
+ setSearchText(search)} + onClear={true} + onClick={setFocus} + value={searchText} + debounceSearch={true} + id="search-project-input" + /> +
+ : searchText?.length > 0 && ( +
+ setSearchText(search)} + onClear={true} + onClick={setFocus} + value={searchText} + debounceSearch={true} + id="search-project-input" + /> +
+ ) + } ); diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index af100a145..5a0e75579 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -16,6 +16,7 @@ import { validateObject } from '../../utilities/functions'; // Interfaces import { ProjectsType, ProjectsObj } from './projects.interface'; import { ModalObj } from '../../components/Modal/modal.interface'; +import { CTA } from '../Home/home.interface'; // Context import { AppContext } from '../../context/app/app.context'; @@ -30,7 +31,6 @@ import { NO_PROJECTS, NO_PROJECTS_SEARCH } from '../../common/assets'; // styles import './index.scss'; -import { CTA } from '../Home/home.interface'; const Projects = () => { const [data, setData] = useState({}); @@ -44,7 +44,6 @@ const Projects = () => { const outputIntro = HTMLReactParser(jsonToHtml(emptystate?.description ?? {})); - // const history = useHistory(); const location = useLocation(); const queryParams = new URLSearchParams(location.search); const search = (queryParams.get('search') ?? '').trim(); @@ -85,9 +84,6 @@ const Projects = () => { }, []); useEffect(() => { - // navigate({ - // search: searchText ? `?region=${newParam}?search=${searchText}` : `?region=${newParam}` - // }); setLoadStatus(true); if (searchText) { setProjects( @@ -139,50 +135,37 @@ const Projects = () => { const header = { component: ( - <> - - + ) }; const content = { component: (
- {loadStatus ? ( + {loadStatus + ? (
{[...Array(20)].map((e, i) => ( ))}
- ) : projects && projects?.length > 0 ? ( - projects?.map((e) => ( + ) + : projects?.map((e) => (
)) - ) : projects && projects?.length > 0 && !searchText ? ( - {emptystate?.empty_search_heading}
} - img={NO_PROJECTS_SEARCH} - description={ -
- {HTMLReactParser(jsonToHtml(emptystate?.empty_search_description ?? {}))} -
- } - version="v2" - className="no_results_found_page" - testId="no-results-found-page" - /> - ) : ( + } + + {projects && projects?.length === 0 && !searchText && ( { )} {cta?.title} - ))} + )) + } )} + + {projects && projects?.length === 0 && searchText && ( + {emptystate?.empty_search_heading}} + img={NO_PROJECTS_SEARCH} + description={ +
+ {HTMLReactParser(jsonToHtml(emptystate?.empty_search_description ?? {}))} +
+ } + version="v2" + className="no_results_found_page" + testId="no-results-found-page" + /> + )} ) }; From 5a5c9756d0cf9b792007f28412d7bc76cbd5cdb7 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 15:26:32 +0530 Subject: [PATCH 2/4] [CMG-151] - Resolution specific UI Issues --- ui/src/components/Card/card.scss | 16 +++++++++++----- ui/src/scss/_variables.scss | 1 + 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss index a1f21cbe2..9c596df7b 100644 --- a/ui/src/components/Card/card.scss +++ b/ui/src/components/Card/card.scss @@ -12,11 +12,17 @@ padding: 1.75rem 2rem 0.688rem; } .ProjectCard__title { - color: $color-font-black; - font-size: $size-font-2-xl; - font-weight: $font-weight-extra-bold; - height: 1.563rem; - line-height: $line-height-reset; + color: $color-font-base; + display: -webkit-box; + font-size: $size-font-xl; + font-weight: $font-weight-semi-bold; + height: $px-48; + line-height: $line-height-default; + overflow: hidden; + padding: 0; + white-space: normal; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; } .ProjectCard__footer { display: flex; diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index 1d8442b82..f11bf5647 100644 --- a/ui/src/scss/_variables.scss +++ b/ui/src/scss/_variables.scss @@ -93,6 +93,7 @@ $px-32: 2rem; // 32px $px-35: 2.188rem; // 36px $px-36: 2.25rem; // 36px $px-40: 2.5rem; // 40px +$px-48: 3rem; $px-50: 3.125rem; // 50px $px-60: 3.75rem; // 60px $px-70: 4.375rem; // 70px From d53d0224f1b32739274b2a5177b757df06ebfc91 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 17:35:51 +0530 Subject: [PATCH 3/4] [CMG-146], [CMG-149], [CMG-150] --- ui/src/components/Modal/index.tsx | 9 ++++----- ui/src/components/ProjectsHeader/index.tsx | 3 ++- ui/src/scss/App.scss | 22 ++++++++++++++++++---- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/ui/src/components/Modal/index.tsx b/ui/src/components/Modal/index.tsx index eeb3d5870..9e3c0e263 100644 --- a/ui/src/components/Modal/index.tsx +++ b/ui/src/components/Modal/index.tsx @@ -47,16 +47,14 @@ const Modal = (props: ProjectModalProps) => { }; const nameValidation = (value: string) => { - - if (value === '') { + if (!value || !/^[^\s].+[^\s]$/.test(value)) { setInputValue(false); - return 'Please enter project name.'; - } else if (value && value?.length > 200) { + return 'Please enter project name.' + } else if(value && value?.length > 200) { setInputValue(false); return 'Project Name should not be more than 200 chars'; } else { setInputValue(true); - return ''; } }; @@ -68,6 +66,7 @@ const Modal = (props: ProjectModalProps) => { return ''; } }; + return ( <> {allProject && allProject?.length > 0 ?
setSearchText(search)} + onChange={(search: string) => search.replace(/\s/g, '').length ? setSearchText(search?.trim()) : setSearchText(search)} onClear={true} onClick={setFocus} value={searchText} diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 1e24a7b4b..52bfa47db 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -337,12 +337,26 @@ h2 { .PageLayout__head__hamburger { display: none; } + .PageLayout__head{ + &>.PageHeader { + padding-right: $px-20; + } + } } } -.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__header h3 { - color: $color-black-2121; - font-weight: bold; -} +.ReactModal__Overlay { + .ReactModal__Content { + .TextInput--negative { + .TextInput__v2 { + ::-webkit-input-placeholder{color:black!important} + } + } + .ReactModal__Content__header h3 { + color: $color-black-2121; + font-weight: bold; + } + } +} .ReactModal__Content__footer .Button{ font-size: 1rem; line-height: 100%; From e602115e1f2bf28a4e64caa75766c075208f8981 Mon Sep 17 00:00:00 2001 From: Sayali Joshi Date: Tue, 14 May 2024 17:56:04 +0530 Subject: [PATCH 4/4] [CMG-141] --- ui/src/scss/App.scss | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index 52bfa47db..6d336c86d 100644 --- a/ui/src/scss/App.scss +++ b/ui/src/scss/App.scss @@ -346,11 +346,6 @@ h2 { } .ReactModal__Overlay { .ReactModal__Content { - .TextInput--negative { - .TextInput__v2 { - ::-webkit-input-placeholder{color:black!important} - } - } .ReactModal__Content__header h3 { color: $color-black-2121; font-weight: bold; @@ -360,4 +355,8 @@ h2 { .ReactModal__Content__footer .Button{ font-size: 1rem; line-height: 100%; -} \ No newline at end of file +} + +::-webkit-input-placeholder{color:$color-black-2121!important} +::-ms-input-placeholder{color:$color-black-2121!important} +::placeholder{color:$color-black-2121!important} \ No newline at end of file