Skip to content

[WIP] Added PF4 namespace to data-ouia-component-type attributes #3622

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

Closed
quarckster wants to merge 2 commits into from
Closed

[WIP] Added PF4 namespace to data-ouia-component-type attributes #3622

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
751260d
Added PF4 namespace to data-ouia-component-type attributes
Jan 30, 2020
23276c0
Added data-ouia-component-ns
Feb 3, 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
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const Alert: React.FunctionComponent<AlertProps & InjectedOuiaProps> = ({
aria-label={ariaLabel}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Alert',
'data-ouia-component-ns': 'PF4',
Copy link
Member

@dlabrecq dlabrecq Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be defined in one place, instead of within each component?

Copy link
Contributor Author

@quarckster quarckster Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dlabrecq it's a good point but my knowledge of typescript is limited, I believe it can be done somewhere here https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-4/react-core/src/components/withOuia/withOuia.tsx

Copy link
Member

@dlabrecq dlabrecq Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thinking we just need to import a common file. Perhaps ouia.ts or withOuia.tsx would be a good location to store the namespace?

.../packages/patternfly-4/react-core/src/components/withOuia/ouia.ts

Copy link
Contributor

@seanforyou23 seanforyou23 Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any chance we can use a qualified URI as the namespace, instead of a basic string? Something like https://www.patternfly.org/v4 as the namespace is more semantic and readable.

Copy link
Contributor Author

@quarckster quarckster Feb 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@psav @karelhala ^

Copy link
Contributor

@seanforyou23 seanforyou23 Feb 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's a good article in case it is helpful

https://www.w3.org/2001/tag/doc/URNsAndRegistries-50-2006-08-17.html#args_http

'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
{...(isLiveRegion && {
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const Breadcrumb: React.FunctionComponent<BreadcrumbProps & InjectedOuiaProps> =
className={css(styles.breadcrumb, className)}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Breadcrumb',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
>
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
type={isButtonElement ? type : null}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Button',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
>
Expand Down
3 changes: 3 additions & 0 deletions packages/patternfly-4/react-core/src/components/ChipGroup/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ class Chip extends React.Component<ChipProps & InjectedOuiaProps, ChipState> {
className={css(styles.chip, styles.modifiers.overflow, className)}
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'OverflowChip',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
>
Expand Down Expand Up @@ -93,6 +94,7 @@ class Chip extends React.Component<ChipProps & InjectedOuiaProps, ChipState> {
className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'Chip',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
>
Expand All @@ -118,6 +120,7 @@ class Chip extends React.Component<ChipProps & InjectedOuiaProps, ChipState> {
className={css(styles.chip, isReadOnly && styles.modifiers.readOnly, className)}
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'Chip',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
>
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Dropdown/DropdownWithContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ class DropdownWithContext extends React.Component<DropdownProps & InjectedOuiaPr
ref={this.baseComponentRef}
{...ouiaContext.isOuia && {
'data-ouia-component-type': ouiaComponentType,
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
>
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ class Nav extends React.Component<NavProps & InjectedOuiaProps> {
}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Nav',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
{...props}
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@ const Pagination: React.FunctionComponent<PaginationProps & InjectedOuiaProps> =
id={widgetId}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Pagination',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
{...props}
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,7 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
style={{ width }}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Select',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
>
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Switch/Switch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ class Switch extends React.Component<SwitchProps & InjectedOuiaProps> {
htmlFor={this.id}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Switch',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
>
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,7 @@ class Tabs extends React.Component<TabsProps & InjectedOuiaProps, TabsState> {
)}
{...(ouiaContext.isOuia && {
'data-ouia-component-type': 'Tabs',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
id={id && id}
Expand Down
11 changes: 6 additions & 5 deletions packages/patternfly-4/react-core/src/components/withOuia/examples/withOuia.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ const { ouiaContext, ouiaId } = this.props;
className=""
htmlFor=""
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'Switch',
'data-ouia-component-type': 'Switch',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
>my label</label>
Expand All @@ -36,20 +37,20 @@ const { ouiaContext, ouiaId } = this.props;
```
<Switch />
```
> render's ouia attribute **data-ouia-component-type="Switch"**
> render's ouia attribute **data-ouia-component-type="Switch" data-ouia-component-ns="PF4"**
#### Case 3: enable ouia through local storage and generate id
##### in local storage _ouia: true_
##### in local storage _ouia-generate-id: true_
```
<Switch />
```
> render's ouia attributes **data-ouia-component-type="Switch" data-ouia-component-id="0"**
> render's ouia attributes **data-ouia-component-type="Switch" data-ouia-component-ns="PF4" data-ouia-component-id="0"**
#### Case 4: enable ouia through local storage and provide id
##### in local storage _ouia: true_
```
<Switch ouiaId="my_switch_id" />
```
> render's ouia attributes **data-ouia-component-type="Switch" data-ouia-component-id="my_switch_id"**
> render's ouia attributes **data-ouia-component-type="Switch" data-ouia-component-ns="PF4" data-ouia-component-id="my_switch_id"**
#### Case 5: enable ouia through context and provide id
##### Note: If context provided _isOuia_ is true and local storage provided _isOuia_ is false, context will win out. Context will also win if its _isOuia_ is false and local storage's is true. Context > local storage
```
Expand All @@ -58,4 +59,4 @@ import { OuiaContext } from '@patternfly/react-core';
<Switch ouiaId="my_switch_id" />
</OuiaContext.Provider>
```
> render's ouia attributes **data-ouia-component-type="Switch" data-ouia-component-id="my_switch_id"**
> render's ouia attributes **data-ouia-component-type="Switch" data-ouia-component-ns="PF4" data-ouia-component-id="my_switch_id"**
2 changes: 2 additions & 0 deletions packages/patternfly-4/react-integration/cypress/integration/ouia.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ describe('Switch Demo Test', () => {

it('Verify OUIA attributes exist', () => {
cy.get('.pf-c-switch[for="simple-switch"]').should('have.attr', 'data-ouia-component-type', 'Switch');
cy.get('.pf-c-switch[for="simple-switch"]').should('have.attr', 'data-ouia-component-ns', 'PF4');
cy.get('.pf-c-switch[for="simple-switch"]').should('have.attr', 'data-ouia-component-id', 'first_switch');
cy.get('.pf-c-switch[for="disabled-switch-off"]').should('have.attr', 'data-ouia-component-type', 'Switch');
cy.get('.pf-c-switch[for="disabled-switch-off"]').should('have.attr', 'data-ouia-component-ns', 'PF4');
cy.get('.pf-c-switch[for="disabled-switch-off"]').should('not.have.attr', 'data-ouia-component-id');
});
});
1 change: 1 addition & 0 deletions packages/patternfly-4/react-table/src/components/Table/RowWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ class RowWrapper extends React.Component<RowWrapperProps & InjectedOuiaProps, {}
hidden={isExpanded !== undefined && !isExpanded}
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'TableRow',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
/>
Expand Down
1 change: 1 addition & 0 deletions packages/patternfly-4/react-table/src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,7 @@ class Table extends React.Component<TableProps & InjectedOuiaProps, {}> {
)}
{...ouiaContext.isOuia && {
'data-ouia-component-type': 'Table',
'data-ouia-component-ns': 'PF4',
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
}}
>
Expand Down