External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-28 16:28:43 -03:30
Code Issues Packages Projects Releases Wiki Activity

Use expandable section when description is longer than 512 characters to avoid making the wizard unusably long

Browse Source
This commit is contained in:
mabashian
2021-05-27 14:22:40 -04:00
parent dc64da6f72
commit af162b6897
2 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
awx/ui_next/src/components/LaunchPrompt/LaunchPrompt.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React, { useState } from 'react';
import { Wizard } from '@patternfly/react-core'; import { ExpandableSection, Wizard } from '@patternfly/react-core';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Formik, useFormikContext } from 'formik'; import { Formik, useFormikContext } from 'formik';
import ContentError from '../ContentError'; import ContentError from '../ContentError';
@@ -19,6 +19,7 @@ function PromptModalForm({
resourceDefaultCredentials, resourceDefaultCredentials,
}) { }) {
const { setFieldTouched, values } = useFormikContext(); const { setFieldTouched, values } = useFormikContext();
const [showDescription, setShowDescription] = useState(false);
const { const {
steps, steps,
@@ -102,7 +103,23 @@ function PromptModalForm({
} }
}} }}
title={t`Launch | ${resource.name}`} title={t`Launch | ${resource.name}`}
description={resource.description} description={
resource.description.length > 512 ? (
<ExpandableSection
toggleText={
showDescription ? t`Hide description` : 'Show description'
}
onToggle={() => {
setShowDescription(!showDescription);
}}
isExpanded={showDescription}
>
{resource.description}
</ExpandableSection>
) : (
resource.description
)
}
steps={ steps={
isReady isReady
? steps ? steps

24
awx/ui_next/src/components/Schedule/shared/SchedulePromptableFields.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react'; import React, { useState } from 'react';
import { Wizard } from '@patternfly/react-core'; import { ExpandableSection, Wizard } from '@patternfly/react-core';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { useFormikContext } from 'formik'; import { useFormikContext } from 'formik';
import AlertModal from '../../AlertModal'; import AlertModal from '../../AlertModal';
@@ -39,7 +39,7 @@ function SchedulePromptableFields({
credentials, credentials,
resourceDefaultCredentials resourceDefaultCredentials
); );
const [showDescription, setShowDescription] = useState(false);
const { error, dismissError } = useDismissableError(contentError); const { error, dismissError } = useDismissableError(contentError);
const cancelPromptableValues = async () => { const cancelPromptableValues = async () => {
resetForm({ resetForm({
@@ -106,7 +106,23 @@ function SchedulePromptableFields({
} }
}} }}
title={t`Prompt | ${resource.name}`} title={t`Prompt | ${resource.name}`}
description={resource.description} description={
resource.description.length > 512 ? (
<ExpandableSection
toggleText={
showDescription ? t`Hide description` : t`Show description`
}
onToggle={() => {
setShowDescription(!showDescription);
}}
isExpanded={showDescription}
>
{resource.description}
</ExpandableSection>
) : (
resource.description
)
}
steps={ steps={
isReady isReady
? steps ? steps