[Component templates] Form wizard #69732

alisonelizabeth · 2020-06-23T18:47:54Z

This PR adds the form wizard to the component templates UI.

Since this PR completes the main functionality planned for the component templates UI in 7.9, I've added a release note. Related work was completed via #68031 and #68732.

Meta issue: #64771.

How to test

Verify create, edit and clone component template actions all work as expected. The UX should be very similar to the existing index templates flow. The only differences are the "Logistics" and "Review" steps.

Screenshots

Note: I did not include screenshots of the settings/mappings/aliases steps as these are the same that exist today for the index templates flow.

Tests

Release note

A new tab called Component Templates is available in Index Management. It provides a way to manage Elasticsearch's component templates. Users can create, edit, clone, and delete a component template.

…nent_templates_wizard

elasticmachine · 2020-07-02T02:00:02Z

Pinging @elastic/es-ui (Team:Elasticsearch UI)

alisonelizabeth · 2020-07-02T12:27:27Z

@elasticmachine merge upstream

alisonelizabeth · 2020-07-02T17:14:30Z

@sebelga I removed the version field toggle based on Lee's feedback that version is something that is recommended to set. I left the meta toggle, but happy to remove that as well if you feel strongly about it so that we are consistent.

…nent_templates_wizard

alisonelizabeth · 2020-07-06T01:11:11Z

@elasticmachine merge upstream

sebelga · 2020-07-06T09:35:24Z

@elasticmachine merge upstream

sebelga

Great job @alisonelizabeth ! Tested locally and works as expected. I left a few comments, none are blockers, but have a look at the encodeURI for edge cases.

sebelga · 2020-07-06T10:28:02Z

...nagement/public/application/components/component_templates/component_template_list/table.tsx

@@ -135,7 +150,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
            {...reactRouterNavigate(
              history,
              {
-                pathname: `/component_templates/${name}`,
+                pathname: `/component_templates/${encodeURIComponent(name)}`,


This is not enough if you create a component with this name: &%$!"test. You also need to encode the uri, so it becomes

pathname: encodeURI(`/component_templates/${encodeURIComponent(name)}`),

I wonder if it wouldn't be a good idea to have a routing.ts in your "lib" folder that returns those encoded paths in case they are needed in multiple place. Like we have inside the index_management/application/services folder.

Thanks for pointing this out. Should be fixed now across the code!

sebelga · 2020-07-06T10:32:10Z

...nt_templates/component_template_wizard/component_template_clone/component_template_clone.tsx

+
+export const ComponentTemplateClone: FunctionComponent<RouteComponentProps<Params>> = (props) => {
+  const { sourceComponentTemplateName } = props.match.params;
+  const decodedSourceComponentTemplateName = attemptToDecodeURI(sourceComponentTemplateName);


nit: I know we strive to be explicit, but sometime the context of the filename we work on give us that context. And here, IMO, decodedName would have been just as clear. 😊

sebelga · 2020-07-06T10:33:47Z

...nt_templates/component_template_wizard/component_template_clone/component_template_clone.tsx

+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error, isLoading]);
+
+  if (isLoading && isInitialRequest) {


Do we expect to have more than 1 request? Do we need the isInitialRequest?

Good catch. This is not necessary.

sebelga · 2020-07-06T10:34:53Z

..._templates/component_template_wizard/component_template_create/component_template_create.tsx

+      return;
+    }
+
+    history.push(`/component_templates/${encodeURIComponent(name)}`);


Here would be another place where we'd need the double encode (encodeURI).

sebelga · 2020-07-06T10:35:24Z

...nent_templates/component_template_wizard/component_template_edit/component_template_edit.tsx

+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [saveError, setSaveError] = useState<any>(null);
+
+  const decodedName = attemptToDecodeURI(name);


Great var name! 😄

sebelga · 2020-07-06T10:52:05Z

...mponent_templates/component_template_wizard/component_template_form/steps/step_logistics.tsx

+              }}
+            />
+          ) : (
+            // <FormRow/> requires children or a field


Probably something I'd need to fix at some point! 😊

sebelga · 2020-07-06T10:54:56Z

..._templates/component_template_wizard/component_template_form/steps/step_logistics_schema.tsx

+    deserializer: stringifyJson,
+    validations: [
+      {
+        validator: (validationArg) => {


I think you can use the isJsonField validator. I added an optional options object to allow empty JSON. This is how it is used in index template

{ validator: isJsonField( i18n.translate('xpack.idxMgmt.templateForm.stepLogistics.metaFieldEditorJsonError', { defaultMessage: 'The _meta field JSON is not valid.', }), { allowEmptyString: true } ), },

sebelga · 2020-07-06T11:01:41Z

.../component_templates/component_template_wizard/component_template_form/steps/step_review.tsx

+}
+
+export const StepReview: React.FunctionComponent<Props> = React.memo(({ componentTemplate }) => {
+  const { name, version } = componentTemplate!;


Is the exclamation mark necessary if the prop is marked as required?

sebelga · 2020-07-06T11:01:49Z

.../component_templates/component_template_wizard/component_template_form/steps/step_review.tsx

+  const { name, version } = componentTemplate!;
+
+  const serializedComponentTemplate = serializeComponentTemplate(
+    stripEmptyFields(componentTemplate!, {


sebelga · 2020-07-06T11:04:23Z

.../component_templates/component_template_wizard/component_template_form/steps/step_review.tsx

+        <EuiFlexItem>
+          <EuiDescriptionList textStyle="reverse">
+            {/* Version */}
+            {version && (


I am sure I saw you change this line with typeof version !== "undefined" &&, but now I see it like this again.. Ah no, I think you did change it for the details panel, it might be good to do it here too.

Great catch! I missed fixing it here. Should be good now.

…nent_templates_wizard

kibanamachine · 2020-07-06T21:35:12Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 5d22378

Build metrics

✅ unchanged

History

💔 Build #59112 failed ce140d5
💔 Build #58864 failed cacf0a5
💔 Build #58792 failed 638cb17
💔 Build #58752 failed 936115b
💔 Build #58734 failed a2c04c1

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* master: (53 commits) [Composable template] Details panel + delete functionality (elastic#70814) [Uptime] Ping list body scroll (elastic#70781) moving indexPattern.delete() to indexPatterns.delete(indexPattern) (elastic#70430) Adapt expected response of advanced settings feature control for cloud tests (elastic#70793) skip flaky suite (elastic#70885) skip flaky suite (elastic#67814) skip flaky suite (elastic#70906) Revert "reenable regression and classification functional tests (elastic#70661)" (elastic#70908) Added UI validation when creating a Webhook connector with invalid URL (elastic#70025) [Security Solution] Change default index pattern (elastic#70797) ServiceNow push to Incident generic implementation (supporting both Case specific and generic Alerts) (elastic#68464) add button link to ingest (elastic#70142) reenable regression and classification functional tests (elastic#70661) [Component templates] Form wizard (elastic#69732) [Ingest Manager] Copy changes (elastic#70828) Adding test user to maps functional tests - PR 1 (elastic#70649) [Ingest Manager] Support limiting integrations on an agent config (elastic#70542) skip flaky suite (elastic#70880) [Metrics UI] Fix a bug in Metric Threshold query filter construction (elastic#70672) upgrade caniuse-lite database (elastic#70833) ...

* master: (46 commits) [Composable template] Details panel + delete functionality (elastic#70814) [Uptime] Ping list body scroll (elastic#70781) moving indexPattern.delete() to indexPatterns.delete(indexPattern) (elastic#70430) Adapt expected response of advanced settings feature control for cloud tests (elastic#70793) skip flaky suite (elastic#70885) skip flaky suite (elastic#67814) skip flaky suite (elastic#70906) Revert "reenable regression and classification functional tests (elastic#70661)" (elastic#70908) Added UI validation when creating a Webhook connector with invalid URL (elastic#70025) [Security Solution] Change default index pattern (elastic#70797) ServiceNow push to Incident generic implementation (supporting both Case specific and generic Alerts) (elastic#68464) add button link to ingest (elastic#70142) reenable regression and classification functional tests (elastic#70661) [Component templates] Form wizard (elastic#69732) [Ingest Manager] Copy changes (elastic#70828) Adding test user to maps functional tests - PR 1 (elastic#70649) [Ingest Manager] Support limiting integrations on an agent config (elastic#70542) skip flaky suite (elastic#70880) [Metrics UI] Fix a bug in Metric Threshold query filter construction (elastic#70672) upgrade caniuse-lite database (elastic#70833) ...

* actions/feature: (46 commits) [Composable template] Details panel + delete functionality (elastic#70814) [Uptime] Ping list body scroll (elastic#70781) moving indexPattern.delete() to indexPatterns.delete(indexPattern) (elastic#70430) Adapt expected response of advanced settings feature control for cloud tests (elastic#70793) skip flaky suite (elastic#70885) skip flaky suite (elastic#67814) skip flaky suite (elastic#70906) Revert "reenable regression and classification functional tests (elastic#70661)" (elastic#70908) Added UI validation when creating a Webhook connector with invalid URL (elastic#70025) [Security Solution] Change default index pattern (elastic#70797) ServiceNow push to Incident generic implementation (supporting both Case specific and generic Alerts) (elastic#68464) add button link to ingest (elastic#70142) reenable regression and classification functional tests (elastic#70661) [Component templates] Form wizard (elastic#69732) [Ingest Manager] Copy changes (elastic#70828) Adding test user to maps functional tests - PR 1 (elastic#70649) [Ingest Manager] Support limiting integrations on an agent config (elastic#70542) skip flaky suite (elastic#70880) [Metrics UI] Fix a bug in Metric Threshold query filter construction (elastic#70672) upgrade caniuse-lite database (elastic#70833) ...

init commit: component template wizard

cd83f7a

alisonelizabeth added Feature:Index Management Index and index templates UI v8.0.0 Team:Kibana Management Dev Tools, Index Management, Upgrade Assistant, ILM, Ingest Node Pipelines, and more release_note:skip Skip the PR/issue when compiling release notes v7.9.0 labels Jun 23, 2020

alisonelizabeth added 13 commits June 23, 2020 21:44

build out logistics form

6ea26f5

implement save + cleanup

5ec3380

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

bb5db5f

…nent_templates_wizard

add edit flow

7a97ce9

add clone flow

45e910b

add support for breadcrumbs

dc0ff0b

fix api integration tests

a6ccd7a

i18n fix

ea27f11

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

84ce7c3

…nent_templates_wizard

properly encode/decode component template name

18655a1

cleanup

87b0155

uncomment code

332a009

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

875eaef

…nent_templates_wizard

alisonelizabeth mentioned this pull request Jun 30, 2020

[Composable template] Create / Edit wizard #70220

Merged

alisonelizabeth added 2 commits June 30, 2020 12:23

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

74091bc

…nent_templates_wizard

fix bug when editing component template

5fb083b

alisonelizabeth added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Jul 1, 2020

component integration tests

be67388

alisonelizabeth marked this pull request as ready for review July 2, 2020 02:00

alisonelizabeth requested a review from a team as a code owner July 2, 2020 02:00

alisonelizabeth changed the title ~~[WIP] [Component templates] Form wizard~~ [Component templates] Form wizard Jul 2, 2020

alisonelizabeth requested a review from sebelga July 2, 2020 02:00

elasticmachine and others added 4 commits July 2, 2020 06:27

Merge branch 'master' into feature/component_templates_wizard

78de4d7

fix version field

0e7c342

clean up tests

2116798

remove version field toggle

b0b68e0

alisonelizabeth added 4 commits July 2, 2020 21:59

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

868fe72

…nent_templates_wizard

fix test

2a4c47d

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

a2c04c1

…nent_templates_wizard

fix TS and tests

936115b

Merge branch 'master' into feature/component_templates_wizard

638cb17

Merge branch 'master' into feature/component_templates_wizard

cacf0a5

sebelga approved these changes Jul 6, 2020

View reviewed changes

alisonelizabeth added 3 commits July 6, 2020 11:40

Merge branch 'master' of github.com:elastic/kibana into feature/compo…

9470201

…nent_templates_wizard

address review feedback

ce140d5

fix TS

5d22378

alisonelizabeth merged commit e35a42a into elastic:master Jul 6, 2020

alisonelizabeth deleted the feature/component_templates_wizard branch July 6, 2020 22:15

alisonelizabeth mentioned this pull request Jul 6, 2020

[7.x] [Component templates] Form wizard (#69732) #70892

Merged

alisonelizabeth added a commit that referenced this pull request Jul 7, 2020

[7.x] [Component templates] Form wizard (#69732) (#70892)

66336d2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Component templates] Form wizard #69732

[Component templates] Form wizard #69732

alisonelizabeth commented Jun 23, 2020 •

edited

Loading

elasticmachine commented Jul 2, 2020

alisonelizabeth commented Jul 2, 2020

alisonelizabeth commented Jul 2, 2020

alisonelizabeth commented Jul 6, 2020

sebelga commented Jul 6, 2020

sebelga left a comment

sebelga Jul 6, 2020

alisonelizabeth Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

alisonelizabeth Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

sebelga Jul 6, 2020

alisonelizabeth Jul 6, 2020

kibanamachine commented Jul 6, 2020

[Component templates] Form wizard #69732

[Component templates] Form wizard #69732

Conversation

alisonelizabeth commented Jun 23, 2020 • edited Loading

How to test

Screenshots

Tests

Release note

elasticmachine commented Jul 2, 2020

alisonelizabeth commented Jul 2, 2020

alisonelizabeth commented Jul 2, 2020

alisonelizabeth commented Jul 6, 2020

sebelga commented Jul 6, 2020

sebelga left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Jul 6, 2020

💚 Build Succeeded

Build metrics

History

alisonelizabeth commented Jun 23, 2020 •

edited

Loading