-
-
Notifications
You must be signed in to change notification settings - Fork 736
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: application usage new ui (#4528)
- Loading branch information
Showing
7 changed files
with
297 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
frontend/src/component/application/ApplicationList/OldApplicationList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { useEffect, useMemo, useState } from 'react'; | ||
| import { CircularProgress, Link } from '@mui/material'; | ||
| import { Warning } from '@mui/icons-material'; | ||
| import { AppsLinkList, styles as themeStyles } from 'component/common'; | ||
| import { PageContent } from 'component/common/PageContent/PageContent'; | ||
| import { PageHeader } from 'component/common/PageHeader/PageHeader'; | ||
| import useApplications from 'hooks/api/getters/useApplications/useApplications'; | ||
| import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | ||
| import { useSearchParams } from 'react-router-dom'; | ||
| import { Search } from 'component/common/Search/Search'; | ||
| import { safeRegExp } from '@server/util/escape-regex'; | ||
|
|
||
| type PageQueryType = Partial<Record<'search', string>>; | ||
|
|
||
| export const OldApplicationList = () => { | ||
| const { applications, loading } = useApplications(); | ||
| const [searchParams, setSearchParams] = useSearchParams(); | ||
| const [searchValue, setSearchValue] = useState( | ||
| searchParams.get('search') || '' | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| const tableState: PageQueryType = {}; | ||
| if (searchValue) { | ||
| tableState.search = searchValue; | ||
| } | ||
|
|
||
| setSearchParams(tableState, { | ||
| replace: true, | ||
| }); | ||
| }, [searchValue, setSearchParams]); | ||
|
|
||
| const filteredApplications = useMemo(() => { | ||
| const regExp = safeRegExp(searchValue, 'i'); | ||
| return searchValue | ||
| ? applications?.filter(a => regExp.test(a.appName)) | ||
| : applications; | ||
| }, [applications, searchValue]); | ||
|
|
||
| const renderNoApplications = () => ( | ||
| <> | ||
| <section style={{ textAlign: 'center' }}> | ||
| <Warning titleAccess="Warning" /> <br /> | ||
| <br /> | ||
| Oh snap, it does not seem like you have connected any | ||
| applications. To connect your application to Unleash you will | ||
| require a Client SDK. | ||
| <br /> | ||
| <br /> | ||
| You can read more about how to use Unleash in your application | ||
| in the{' '} | ||
| <Link href="https://docs.getunleash.io/docs/sdks/"> | ||
| documentation. | ||
| </Link> | ||
| </section> | ||
| </> | ||
| ); | ||
|
|
||
| if (!filteredApplications) { | ||
| return <CircularProgress variant="indeterminate" />; | ||
| } | ||
|
|
||
| let applicationCount = | ||
| filteredApplications.length < applications.length | ||
| ? `${filteredApplications.length} of ${applications.length}` | ||
| : applications.length; | ||
|
|
||
| return ( | ||
| <> | ||
| <PageContent | ||
| header={ | ||
| <PageHeader | ||
| title={`Applications (${applicationCount})`} | ||
| actions={ | ||
| <Search | ||
| initialValue={searchValue} | ||
| onChange={setSearchValue} | ||
| /> | ||
| } | ||
| /> | ||
| } | ||
| > | ||
| <div className={themeStyles.fullwidth}> | ||
| <ConditionallyRender | ||
| condition={filteredApplications.length > 0} | ||
| show={<AppsLinkList apps={filteredApplications} />} | ||
| elseShow={ | ||
| <ConditionallyRender | ||
| condition={loading} | ||
| show={<div>...loading</div>} | ||
| elseShow={renderNoApplications()} | ||
| /> | ||
| } | ||
| /> | ||
| </div> | ||
| </PageContent> | ||
| </> | ||
| ); | ||
| }; |
36 changes: 36 additions & 0 deletions
36
frontend/src/component/application/ApplicationList/TemporaryApplicationListWrapper.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { useMemo } from 'react'; | ||
| import { Avatar, CircularProgress, Icon, Link } from '@mui/material'; | ||
| import { Warning } from '@mui/icons-material'; | ||
| import { styles as themeStyles } from 'component/common'; | ||
| import { PageContent } from 'component/common/PageContent/PageContent'; | ||
| import { PageHeader } from 'component/common/PageHeader/PageHeader'; | ||
| import useApplications from 'hooks/api/getters/useApplications/useApplications'; | ||
| import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; | ||
| import { Search } from 'component/common/Search/Search'; | ||
| import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; | ||
| import { | ||
| SortableTableHeader, | ||
| Table, | ||
| TableBody, | ||
| TableCell, | ||
| TableRow, | ||
| } from '../../common/Table'; | ||
| import { useGlobalFilter, useSortBy, useTable } from 'react-table'; | ||
| import { sortTypes } from 'utils/sortTypes'; | ||
| import { IconCell } from 'component/common/Table/cells/IconCell/IconCell'; | ||
| import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell'; | ||
| import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig'; | ||
| import { ApplicationList } from './ApplicationList'; | ||
| import { OldApplicationList } from './OldApplicationList'; | ||
|
|
||
| export const TemporaryApplicationListWrapper = () => { | ||
| const { uiConfig } = useUiConfig(); | ||
|
|
||
| return ( | ||
| <ConditionallyRender | ||
| condition={Boolean(uiConfig.flags.newApplicationList)} | ||
| show={<ApplicationList />} | ||
| elseShow={<OldApplicationList />} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.