-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Chore/vuln deps image focal point (#9035)
* 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
1 parent
9bffbbd
commit 8da500c
Showing
33 changed files
with
4,704 additions
and
33,777 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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,6 +5,7 @@ | |
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script type="module" src="./src/index.jsx"></script> | ||
</body> | ||
</html> | ||
|
Large diffs are not rendered by default.
Oops, something went wrong.
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
44 changes: 44 additions & 0 deletions
44
apps/image-focal-point/src/__snapshots__/index.spec.jsx.snap
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,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> | ||
`; |
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
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
2 changes: 1 addition & 1 deletion
2
...omponents/AppView/ConfigurationContent.js → ...mponents/AppView/ConfigurationContent.jsx
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
67 changes: 0 additions & 67 deletions
67
apps/image-focal-point/src/components/AppView/InstallationContent.js
This file was deleted.
Oops, something went wrong.
75 changes: 75 additions & 0 deletions
75
apps/image-focal-point/src/components/AppView/InstallationContent.jsx
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,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, | ||
}; |
Oops, something went wrong.