Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: #1210 #1026 ui for developer/client side standalone #1304

Merged
merged 8 commits into from
May 22, 2020
Merged

feat: #1210 #1026 ui for developer/client side standalone #1304

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c0040a4
feat: #1210 ui for developer side standalone
May 20, 2020
eedf991
feat: #1210: remove unused files
May 20, 2020
e509fc1
feat #1210: fix review comments
May 20, 2020
8419d7f
unmount invisible modal
May 21, 2020
1167b4e
feat #1210: update type definition HandleUninstallSuccessParams
May 21, 2020
e986179
feat #1210: move app-header into reuseable folder
May 21, 2020
20287ab
feat: 1206: UI for the client-side standalone App
May 21, 2020
2f6914d
fix #1225: update mobile developer app detail mobile based on new req…
May 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...es/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import AppHeader from '@/components/ui/app-detail/app-header'
import AppContent from '@/components/ui/app-detail/app-content'

import { Loader, Button } from '@reapit/elements'
import styles from '@/styles/pages/developer-app-detail.scss?mod'
import styles from '@/styles/pages/client-app-detail-manage.scss?mod'
import ClientAppUninstallConfirmation from '@/components/ui/client-app-detail/client-app-uninstall-confirmation'

export type ClientAppDetailManageProps = {}
Expand Down
15 changes: 0 additions & 15 deletions ...e/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,21 +82,6 @@ exports[`AppContent AppContent - should match snapshot 1`] = `
</div>
`;

exports[`AppContent RenderWithHeader - should match snapshot 1`] = `
<div>
<Component>
test
</Component>
some text
</div>
`;

exports[`AppContent Tag - should match snapshot 1`] = `
<div>
Test
</div>
`;

exports[`AppContent renderCategory - should match snapshot 1`] = `<div />`;

exports[`AppContent renderDescripion - should match snapshot 1`] = `
Expand Down
99 changes: 38 additions & 61 deletions ...components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,6 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
>
<ClientAppDetail>
<div
className=" "
data-test="client-app-detail-container"
>
<AppHeader
Expand All @@ -181,70 +180,42 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
</React.Fragment>
}
>
<div>
<Component
className="is-vcentered "
>
<div
className="flex items-center"
className="columns is-vcentered "
>
<div
className=" "
<Component
className="is-4"
>
<img
alt=""
className="images "
src="https://bulma.io/images/placeholders/48x48.png"
/>
</div>
<div>
<Component
appName=""
<div
className="column is-4"
>
<div>
<Component>
<h2
className="title is-2 "
id=""
/>
</Component>
<div>
<FaCheck>
<IconBase
attr={
Object {
"viewBox": "0 0 512 512",
}
}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
key="0"
/>
</svg>
</IconBase>
</FaCheck>
Verified by Reapit
</div>
<img
className="image"
src="https://bulma.io/images/placeholders/48x48.png"
/>
</div>
</Component>
</div>
</div>
</Component>
<Component
className="is-8"
>
<div
className="column is-8"
>
<Component>
<h3
className="title is-3 "
id=""
/>
</Component>
</div>
</Component>
</div>
<img
src="https://bulma.io/images/placeholders/48x48.png"
/>
</div>
</Component>
</AppHeader>
<AppContent
appDetailData={
Expand Down Expand Up @@ -291,7 +262,9 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
<Component
header="Developer"
>
<div>
<div
data-test=""
>
<Component>
<h5
className="title is-5 "
Expand All @@ -306,7 +279,9 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
<Component
header="About Developer"
>
<div>
<div
data-test=""
>
<Component>
<h5
className="title is-5 "
Expand All @@ -323,7 +298,9 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
<Component
header="Contact Developer"
>
<div>
<div
data-test=""
>
<Component>
<h5
className="title is-5 "
Expand Down
10 changes: 0 additions & 10 deletions packages/marketplace/src/components/pages/client-app-detail/__test__/app-content.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import AppContent, {
renderDesktopIntegrationTypes,
renderExtraMedia,
renderPermissions,
RenderWithHeader,
Tag,
} from '../app-content'

import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
Expand Down Expand Up @@ -42,14 +40,6 @@ describe('AppContent', () => {
const wrapper = shallow(<div>{result}</div>)
expect(wrapper).toMatchSnapshot()
})
test('RenderWithHeader - should match snapshot', () => {
const wrapper = shallow(<RenderWithHeader header="test">some text</RenderWithHeader>)
expect(wrapper).toMatchSnapshot()
})
test('Tag - should match snapshot', () => {
const wrapper = shallow(<Tag>Test</Tag>)
expect(wrapper).toMatchSnapshot()
})
test('AppContent - should match snapshot', () => {
const wrapper = shallow(
<AppContent
Expand Down
11 changes: 2 additions & 9 deletions packages/marketplace/src/components/pages/client-app-detail/app-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import styles from '@/styles/blocks/app-detail.scss?mod'
import { ScopeModel, MediaModel } from '@reapit/foundations-ts-definitions'
import '@/styles/vendor/slick.scss'
import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
import { Tag } from '@/components/pages/developer-app-detail/app-detail/tag'
import { RenderWithHeader } from '@/components/pages/developer-app-detail/app-detail/render-with-header'

import { AppDetailDataNotNull } from '@/reducers/client/app-detail'

Expand All @@ -13,8 +15,6 @@ export type AppContentProps = {
desktopIntegrationTypes: DesktopIntegrationTypeModel[]
}

export const Tag = ({ children }) => <div className={clientAppDetailStyles.tag}>{children}</div>

export const renderDescripion = (description: string) => (
<div className={clientAppDetailStyles.gutter}>
<H5>Description</H5>
Expand Down Expand Up @@ -61,13 +61,6 @@ export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIn
)
}

export const RenderWithHeader: React.FC<{ header: string }> = ({ header, children }) => (
<div className={clientAppDetailStyles.gutter}>
<H5>{header}</H5>
{children}
</div>
)

export const renderExtraMedia = (media: MediaModel[] = []) =>
media.map(({ uri }) => (
<div key={uri} className={clientAppDetailStyles.gutter}>
Expand Down
10 changes: 2 additions & 8 deletions packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,14 @@ import { selectIntegrationTypes } from '@/selector/integration-types'
import { useSelector } from 'react-redux'
import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-app-detail'
import { selectLoginType, selectIsAdmin } from '@/selector/auth'
import AppHeader from './app-header'
import AppHeader from '@/components/ui/app-detail/app-header'
import AppContent from './app-content'
import { Loader, Button } from '@reapit/elements'
import developerAppDetailStyles from '@/styles/pages/developer-app-detail.scss?mod'
import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation'

export type ClientAppDetailProps = {}

const appDetailContainerClassNames = [
clientAppDetailStyles.appDetailContainer,
developerAppDetailStyles.appDetailContainer,
].join(' ')

export const handleCloseInstallConfirmationModal = (setIsVisibleInstallConfirmation: (isVisible: boolean) => void) => {
return () => {
setIsVisibleInstallConfirmation(false)
Expand Down Expand Up @@ -107,7 +101,7 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
}

return (
<div data-test="client-app-detail-container" className={appDetailContainerClassNames}>
<div data-test="client-app-detail-container" className={clientAppDetailStyles.appDetailContainer}>
<AppHeader
appDetailData={appDetailData}
buttonGroup={renderAppHeaderButtonGroup(
Expand Down
Loading