Skip to content

Commit 43b613e

Browse files
MilanPospisilhimdel
MilanPospisil
and
himdel
authored
Wisdom Modal Updates (#3566)
* Legacy namespace * Changes Issue: AAH-2220 * Debugger * Align menu to right * Rename to Ansible Lightspeed only changing user-visible strings, retaining the wisdom name for the feature flag and component names Issue: AAP-11237 --------- Co-authored-by: Martin Hradil <mhradil@redhat.com>
1 parent 686ef1f commit 43b613e

File tree

7 files changed

+128
-47
lines changed

7 files changed

+128
-47
lines changed

‎CHANGES/2220.task

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Change Wisdom Modal and legacy namespaces menu, rename to Ansible Lightspeed

‎src/components/legacy-namespace-list/legacy-namespace-item.tsx

+36-2
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1+
import { t } from '@lingui/macro';
12
import {
23
DataListCell,
34
DataListItem,
45
DataListItemCells,
56
DataListItemRow,
7+
DropdownItem,
68
} from '@patternfly/react-core';
79
import * as React from 'react';
810
import { Link } from 'react-router-dom';
911
import { LegacyNamespaceDetailType } from 'src/api';
10-
import { Logo } from 'src/components';
12+
import { Logo, StatefulDropdown } from 'src/components';
13+
import { AppContext } from 'src/loaders/app-context';
1114
import { Paths, formatPath } from 'src/paths';
1215
import './legacy-namespace-item.scss';
1316

1417
interface LegacyNamespaceProps {
1518
namespace: LegacyNamespaceDetailType;
19+
openModal: (namespace) => void;
1620
}
1721

1822
export class LegacyNamespaceListItem extends React.Component<LegacyNamespaceProps> {
@@ -38,13 +42,41 @@ export class LegacyNamespaceListItem extends React.Component<LegacyNamespaceProp
3842
);
3943

4044
cells.push(
41-
<DataListCell key='content'>
45+
<DataListCell key='content' size={10}>
4246
<div>
4347
<Link to={namespace_url}>{namespace.name}</Link>
4448
</div>
4549
</DataListCell>,
4650
);
4751

52+
const { ai_deny_index } = this.context.featureFlags;
53+
const summary_fields = namespace.summary_fields;
54+
const userOwnsLegacyNamespace = summary_fields?.owners?.filter(
55+
(n) => n.username == this.context.user.username,
56+
).length;
57+
58+
const showWisdom =
59+
ai_deny_index &&
60+
(this.context.user.is_superuser || userOwnsLegacyNamespace);
61+
62+
const dropdownItems = [];
63+
64+
dropdownItems.push(
65+
<DropdownItem onClick={() => this.props.openModal(namespace)}>
66+
{t`Ansible Lightspeed settings`}
67+
</DropdownItem>,
68+
);
69+
70+
if (showWisdom) {
71+
cells.push(
72+
<DataListCell key='menu' alignRight={true}>
73+
<div style={{ float: 'right' }}>
74+
<StatefulDropdown items={dropdownItems} />
75+
</div>
76+
</DataListCell>,
77+
);
78+
}
79+
4880
return (
4981
<DataListItem data-cy='LegacyNamespaceListItem'>
5082
<DataListItemRow>
@@ -54,3 +86,5 @@ export class LegacyNamespaceListItem extends React.Component<LegacyNamespaceProp
5486
);
5587
}
5688
}
89+
90+
LegacyNamespaceListItem.contextType = AppContext;

‎src/components/wisdom-modal/wisdom-modal.tsx

+41-35
Original file line numberDiff line numberDiff line change
@@ -35,47 +35,47 @@ export const WisdomModal = (props: IProps) => {
3535
if (props.scope == 'namespace') {
3636
titleWillBeUsed = (
3737
<Trans>
38-
Namespace <b>{name}</b> is opted in to Wisdom.
38+
Namespace <b>{name}</b> is opted in to Ansible Lightspeed.
3939
</Trans>
4040
);
4141
titleWillNotBeUsed = (
4242
<Trans>
43-
Namespace <b>{name}</b> is opted out of Wisdom.
43+
Namespace <b>{name}</b> is opted out of Ansible Lightspeed.
4444
</Trans>
4545
);
4646
areYouSureToOptIn = (
4747
<Trans>
48-
Are you sure you want to opt the following namespace in to Wisdom?
48+
The following namespace will be opted in to Ansible Lightspeed:
4949
</Trans>
5050
);
5151
areYouSureToOptOut = (
5252
<Trans>
53-
Are you sure you want to opt the following namespace out of Wisdom?
53+
Are you sure you want to opt the following namespace out of Ansible
54+
Lightspeed?
5455
</Trans>
5556
);
5657
}
5758

5859
if (props.scope == 'legacy_namespace') {
5960
titleWillBeUsed = (
6061
<Trans>
61-
Legacy namespace <b>{name}</b> is opted in to Wisdom.
62+
Legacy namespace <b>{name}</b> is opted in to Ansible Lightspeed.
6263
</Trans>
6364
);
6465
titleWillNotBeUsed = (
6566
<Trans>
66-
Legacy namespace <b>{name}</b> is opted out of Wisdom.
67+
Legacy namespace <b>{name}</b> is opted out of Ansible Lightspeed.
6768
</Trans>
6869
);
6970
areYouSureToOptIn = (
7071
<Trans>
71-
Are you sure you want to opt the following legacy namespace in to
72-
Wisdom?
72+
The following legacy namespace will be opted in to Ansible Lightspeed:
7373
</Trans>
7474
);
7575
areYouSureToOptOut = (
7676
<Trans>
7777
Are you sure you want to opt the following legacy namespace out of
78-
Wisdom?
78+
Ansible Lightspeed?
7979
</Trans>
8080
);
8181
}
@@ -91,7 +91,7 @@ export const WisdomModal = (props: IProps) => {
9191
})
9292
.catch(({ response: { status, statusText } }) => {
9393
addAlert({
94-
title: t`Failed to load Wisdom information.`,
94+
title: t`Failed to load Ansible Lightspeed information.`,
9595
variant: 'danger',
9696
description: errorMessage(status, statusText),
9797
});
@@ -121,7 +121,7 @@ export const WisdomModal = (props: IProps) => {
121121
})
122122
.catch(({ response: { status, statusText } }) => {
123123
addAlert({
124-
title: t`Failed to opt in to Wisdom.`,
124+
title: t`Failed to opt in to Ansible Lightspeed.`,
125125
variant: 'danger',
126126
description: errorMessage(status, statusText),
127127
});
@@ -137,7 +137,7 @@ export const WisdomModal = (props: IProps) => {
137137
})
138138
.catch(({ response: { status, statusText } }) => {
139139
addAlert({
140-
title: t`Failed to opt out of Wisdom.`,
140+
title: t`Failed to opt out of Ansible Lightspeed.`,
141141
variant: 'danger',
142142
description: errorMessage(status, statusText),
143143
});
@@ -155,7 +155,7 @@ export const WisdomModal = (props: IProps) => {
155155
onClick={removeFromDenyIndex}
156156
variant={ButtonVariant.primary}
157157
>
158-
{t`Opt in to Wisdom`}
158+
{t`Opt in to Ansible Lightspeed`}
159159
</Button>,
160160
);
161161
} else {
@@ -165,7 +165,7 @@ export const WisdomModal = (props: IProps) => {
165165
onClick={addToDenyIndex}
166166
variant={ButtonVariant.primary}
167167
>
168-
{t`Opt out of Wisdom`}
168+
{t`Opt out of Ansible Lightspeed`}
169169
</Button>,
170170
);
171171
}
@@ -177,20 +177,21 @@ export const WisdomModal = (props: IProps) => {
177177
);
178178
}
179179

180-
const expandableTitle = t`Learn more about Ansible Wisdom.`;
180+
const expandableTitle = t`Additional details`;
181181
return (
182182
<Modal
183183
actions={actions}
184184
isOpen={true}
185185
onClose={props.closeAction}
186186
title={
187187
loading
188-
? t`Wisdom settings`
188+
? t`Ansible Lightspeed settings`
189189
: isInDenyIndex
190-
? t`Opt in to Wisdom`
191-
: t`Opt out of Wisdom`
190+
? t`Opt in to Ansible Lightspeed`
191+
: t`Opt out of Ansible Lightspeed`
192192
}
193193
variant='small'
194+
titleIconVariant={isInDenyIndex ? null : 'warning'}
194195
>
195196
<AlertList
196197
alerts={alerts}
@@ -201,29 +202,28 @@ export const WisdomModal = (props: IProps) => {
201202
) : (
202203
<div>
203204
<div>
204-
{!loading && isInDenyIndex ? areYouSureToOptIn : areYouSureToOptOut}
205-
</div>
206-
<br />
207-
<div>
205+
<Trans>
206+
<p>
207+
Red Hat is working on exciting new Ansible content development
208+
capabilities within the context of{' '}
209+
<a
210+
href='https://www.redhat.com/en/engage/project-wisdom'
211+
target='_blank'
212+
rel='noreferrer'
213+
>
214+
Ansible Lightspeed
215+
</a>{' '}
216+
<ExternalLinkAltIcon /> to help other automators build Ansible
217+
content.
218+
</p>
219+
</Trans>
220+
<br />
208221
<ExpandableSection
209222
toggleTextExpanded={expandableTitle}
210223
toggleTextCollapsed={expandableTitle}
211224
>
212225
<div>
213226
<Trans>
214-
<p>
215-
Red Hat is working on exciting new Ansible content
216-
development capabilities within the context of{' '}
217-
<a
218-
href='https://www.redhat.com/en/engage/project-wisdom'
219-
target='_blank'
220-
rel='noreferrer'
221-
>
222-
Project Wisdom
223-
</a>{' '}
224-
<ExternalLinkAltIcon /> to help other automators build
225-
Ansible content.
226-
</p>
227227
<p>
228228
Your roles and collections may be used as training data for
229229
a machine learning model that provides Ansible automation
@@ -240,6 +240,12 @@ export const WisdomModal = (props: IProps) => {
240240
</div>
241241
</ExpandableSection>
242242
</div>
243+
<br />
244+
<div>
245+
{!loading && isInDenyIndex ? areYouSureToOptIn : areYouSureToOptOut}
246+
</div>
247+
<br />
248+
{props.reference}
243249
</div>
244250
)}
245251
</Modal>

‎src/containers/legacy-namespaces/legacy-namespace.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ class LegacyNamespace extends React.Component<
274274
<DropdownItem
275275
onClick={() => this.setState({ isOpenWisdomModal: true })}
276276
>
277-
{t`Wisdom settings`}
277+
{t`Ansible Lightspeed settings`}
278278
</DropdownItem>,
279279
);
280280
}

‎src/containers/legacy-namespaces/legacy-namespaces.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import * as React from 'react';
44
import { LegacyNamespaceListType } from 'src/api';
55
import { LegacyNamespaceAPI } from 'src/api/legacynamespace';
66
import {
7+
AlertList,
8+
AlertType,
79
BaseHeader,
810
CollectionFilter,
911
EmptyStateNoData,
1012
LegacyNamespaceListItem,
1113
LoadingPageSpinner,
1214
Pagination,
15+
WisdomModal,
16+
closeAlertMixin,
1317
} from 'src/components';
1418
import { AppContext } from 'src/loaders/app-context';
1519
import { RouteProps, withRouter } from 'src/utilities';
@@ -28,6 +32,9 @@ interface LegacyNamespacesProps {
2832
};
2933
updateParams: (params) => void;
3034
ignoredParams: string[];
35+
isOpenWisdomModal: boolean;
36+
wisdomReference: string;
37+
alerts: AlertType[];
3138
}
3239

3340
class LegacyNamespaces extends React.Component<
@@ -48,6 +55,9 @@ class LegacyNamespaces extends React.Component<
4855
mounted: false,
4956
count: 0,
5057
legacynamespaces: [],
58+
isOpenWisdomModal: false,
59+
wisdomReference: null,
60+
alerts: [],
5161
};
5262
}
5363

@@ -87,6 +97,20 @@ class LegacyNamespaces extends React.Component<
8797
});
8898
};
8999

100+
openModal(namespace) {
101+
this.setState({ isOpenWisdomModal: true, wisdomReference: namespace.name });
102+
}
103+
104+
private addAlert(alert: AlertType) {
105+
this.setState({
106+
alerts: [...this.state.alerts, alert],
107+
});
108+
}
109+
110+
private get closeAlert() {
111+
return closeAlertMixin('alerts');
112+
}
113+
90114
render() {
91115
const ignoredParams = [
92116
'namespace',
@@ -116,6 +140,18 @@ class LegacyNamespaces extends React.Component<
116140

117141
return (
118142
<div>
143+
<AlertList
144+
alerts={this.state.alerts}
145+
closeAlert={(i) => this.closeAlert(i)}
146+
/>
147+
{this.state.isOpenWisdomModal && (
148+
<WisdomModal
149+
addAlert={(alert) => this.addAlert(alert)}
150+
closeAction={() => this.setState({ isOpenWisdomModal: false })}
151+
scope={'legacy_namespace'}
152+
reference={this.state.wisdomReference}
153+
/>
154+
)}
119155
<BaseHeader title={t`Legacy Namespaces`}></BaseHeader>
120156
<React.Fragment>
121157
{loading ? (
@@ -145,6 +181,7 @@ class LegacyNamespaces extends React.Component<
145181
<LegacyNamespaceListItem
146182
key={lnamespace.id}
147183
namespace={lnamespace}
184+
openModal={(namespace) => this.openModal(namespace)}
148185
/>
149186
))}
150187
</DataList>

‎src/containers/namespace-detail/namespace-detail.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -833,7 +833,7 @@ export class NamespaceDetail extends React.Component<RouteProps, IState> {
833833
key='wisdom-settings'
834834
onClick={() => this.setState({ isOpenWisdomModal: true })}
835835
>
836-
{t`Wisdom settings`}
836+
{t`Ansible Lightspeed settings`}
837837
</DropdownItem>
838838
),
839839
].filter(Boolean);

0 commit comments

Comments
 (0)