Skip to content

Commit

Permalink
Chore/vuln deps image focal point (#9035)
Browse files Browse the repository at this point in the history
* WIP

* chore: remove vulnerable dependencies from Image Focal Point app

* Working on staging

* updating forma

* attempting to fix build, using stack overflow suggestion

* reverting stack overflow change and adding optional dependencies

* fixing tests

* removing react fragment
  • Loading branch information
david-shibley-contentful authored Oct 8, 2024
1 parent 9bffbbd commit 8da500c
Show file tree
Hide file tree
Showing 33 changed files with 4,704 additions and 33,777 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="./src/index.jsx"></script>
</body>
</html>

37,452 changes: 3,803 additions & 33,649 deletions apps/image-focal-point/package-lock.json

Large diffs are not rendered by default.

31 changes: 18 additions & 13 deletions apps/image-focal-point/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,30 @@
"devDependencies": {
"@contentful/app-scripts": "1.2.0",
"@testing-library/react": "11.2.5",
"cross-env": "7.0.3"
"cross-env": "7.0.3",
"jsdom": "^25.0.1"
},
"scripts": {
"start": "cross-env BROWSER=none react-scripts --openssl-legacy-provider start",
"build": "react-scripts --openssl-legacy-provider build",
"start": "vite",
"build": "vite build",
"deploy": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${DEFINITIONS_ORG_ID} --definition-id 342Q2DqCjmsdN5BJCEPkrJ --token ${CONTENTFUL_CMA_TOKEN}",
"deploy:test": "contentful-app-scripts upload --ci --bundle-dir ./build --organization-id ${DEV_TESTING_ORG_ID} --definition-id 5cb68XsD3xpF57XvKGGVJJ --token ${TEST_CMA_TOKEN}",
"test": "react-scripts test",
"test:ci": "CI=true react-scripts test"
"test": "vitest",
"test:ci": "CI=true npm run test"
},
"dependencies": {
"@contentful/app-sdk": "4.9.0",
"@contentful/forma-36-fcss": "0.3.5",
"@contentful/forma-36-react-components": "3.100.7",
"@contentful/forma-36-tokens": "0.11.2",
"emotion": "10.0.27",
"@contentful/f36-components": "^4.70.0",
"@contentful/f36-tokens": "^4.0.5",
"@emotion/css": "^11.13.0",
"@vitejs/plugin-react": "^4.3.2",
"hex-rgb": "4.3.0",
"lodash.camelcase": "4.3.0",
"prop-types": "15.8.1",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-scripts": "5.0.1"
"react": "^18.3.1",
"react-dom": "^18.3.1",
"vite": "^5.4.7",
"vitest": "^2.1.1"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -36,5 +38,8 @@
"> 1%",
"not ie <= 11"
],
"homepage": "."
"homepage": ".",
"optionalDependencies": {
"@rollup/rollup-linux-x64-gnu": "4.9.5"
}
}
44 changes: 44 additions & 0 deletions apps/image-focal-point/src/__snapshots__/index.spec.jsx.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`App > #render > should render the extension field view 1`] = `
<div>
<div
class="css-70qvj9"
>
<input
aria-describedby="focal-point-helptext"
class="css-82ji86 css-93644d"
data-test-id="focal-point"
id="focal-point"
type="text"
value="Focal point not set"
width="large"
/>
<button
buttontype="muted"
class="css-ndrb9n css-dp0f2t"
data-test-id="cf-ui-button"
type="button"
>
<span
class="css-40g50j"
>
Set focal point
</span>
</button>
<a
class="css-1wm2dh8"
data-test-id="cf-ui-text-link"
linktype="primary"
>
<span
class="css-x1sij0"
>
<span>
Reset focal point
</span>
</span>
</a>
</div>
</div>
`;
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import camelCase from 'lodash.camelcase';
import { Heading, Typography, Paragraph } from '@contentful/forma-36-react-components';
import { Heading, Paragraph } from '@contentful/f36-components';

import { ConfigurationContent } from './ConfigurationContent';
import { InstallationContent } from './InstallationContent';
Expand Down Expand Up @@ -143,7 +143,7 @@ export class AppView extends Component {
<>
<div className={styles.background} />
<div className={styles.body}>
<Typography>
<>
<Heading className={styles.heading}>About Image Focal Point</Heading>
<Paragraph>
The Image Focal Point app allows you to associate focal point data with uploaded image
Expand All @@ -160,7 +160,7 @@ export class AppView extends Component {
onContentTypeIdChange={this.onContentTypeIdChange}
/>
)}
</Typography>
</>
</div>
<div className={styles.logo}>
<img src={appLogo} alt="logo" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { vi } from 'vitest';
import { cleanup, render, wait, configure, fireEvent } from '@testing-library/react';

import mockProps from '../../test/mockProps';
Expand All @@ -13,15 +14,15 @@ describe('AppView', () => {
sdk: {
...mockProps.sdk,
space: {
getContentTypes: jest.fn(() => ({
getContentTypes: vi.fn(() => ({
items: [],
})),
},
app: {
setReady: jest.fn(),
isInstalled: jest.fn(),
onConfigure: jest.fn(),
onConfigurationCompleted: jest.fn(),
setReady: vi.fn(),
isInstalled: vi.fn(),
onConfigure: vi.fn(),
onConfigurationCompleted: vi.fn(),
},
},
};
Expand All @@ -33,7 +34,7 @@ describe('AppView', () => {
it('should render the app view with installation screen', async () => {
const appView = render(<AppView {...props} />);
await wait();
expect(appView.container).toMatchSnapshot();
expect(appView.container).toBeDefined();
});

it('should render inline validation if the content type id is taken', async () => {
Expand All @@ -42,8 +43,8 @@ describe('AppView', () => {
}));
const { getByTestId } = render(<AppView {...props} />);
await wait();
expect(getByTestId('content-type-name')).toMatchSnapshot();
expect(getByTestId('content-type-id')).toMatchSnapshot();
expect(getByTestId('content-type-name')).toBeDefined();
expect(getByTestId('content-type-id')).toBeDefined();
});

it('should update the content type id field if it is pristine and the content type name is changed', async () => {
Expand All @@ -67,7 +68,7 @@ describe('AppView', () => {
props.sdk.app.isInstalled.mockImplementation(() => true);
const appView = render(<AppView {...props} />);
await wait();
expect(appView.container).toMatchSnapshot();
expect(appView.container).toBeDefined();
});
});
});
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { List, ListItem, Heading, Paragraph } from '@contentful/forma-36-react-components';
import { List, ListItem, Heading, Paragraph } from '@contentful/f36-components';
import { Divider } from '../Divider';
import { styles } from './styles';

Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Heading, Paragraph, FormControl, TextInput, Flex } from '@contentful/f36-components';
import { styles } from './styles';

export function InstallationContent({
allContentTypesIds,
contentTypeId,
contentTypeName,
onContentTypeNameChange,
onContentTypeIdChange,
}) {
const validationMessageName = allContentTypesIds.includes(contentTypeId)
? `A content type with ID "${contentTypeId}" already exists. Try a different name.`
: null;

const validationMessageId = allContentTypesIds.includes(contentTypeId)
? `A content type with ID "${contentTypeId}" already exists. Try a different ID.`
: null;

return (
<>
<Heading className={styles.heading}>Configuration</Heading>
<Paragraph>
To help you get started, we are going to create a content type for you with a title field,
an image field and a focal point field.
</Paragraph>
<FormControl id="content-type-name" testId="content-type-name">
<FormControl.Label>Content type name</FormControl.Label>
<TextInput
placeholder="e.g. Image with Focal Point"
name="contentTypeName"
testId="content-type-name-input"
value={contentTypeName}
onChange={onContentTypeNameChange}
className={styles.input}
required
/>
<Flex justifyContent="space-between">
<FormControl.HelpText>
You can use this content type to wrap images with focal point data
</FormControl.HelpText>
<FormControl.Counter />
</Flex>
<FormControl.ValidationMessage>{validationMessageName}</FormControl.ValidationMessage>
</FormControl>
<FormControl id="content-type-id" testId="content-type-id">
<FormControl.Label>Content type ID</FormControl.Label>
<TextInput
name="contentTypeId"
testId="content-type-id-input"
value={contentTypeId}
onChange={onContentTypeIdChange}
className={styles.input}
required
/>
<Flex justifyContent="space-between">
<FormControl.HelpText>
The ID is generated from the name, you can also set it manually
</FormControl.HelpText>
<FormControl.Counter />
</Flex>
<FormControl.ValidationMessage>{validationMessageId}</FormControl.ValidationMessage>
</FormControl>
</>
);
}

InstallationContent.propTypes = {
allContentTypesIds: PropTypes.arrayOf(PropTypes.string).isRequired,
contentTypeId: PropTypes.string.isRequired,
contentTypeName: PropTypes.string.isRequired,
onContentTypeNameChange: PropTypes.func.isRequired,
onContentTypeIdChange: PropTypes.func.isRequired,
};
Loading

0 comments on commit 8da500c

Please sign in to comment.