KonradJanica commented on a change in pull request #16505: URL: https://github.com/apache/beam/pull/16505#discussion_r791297703
########## File path: playground/frontend/lib/modules/editor/components/pipeline_options_dropdown/pipeline_options_dropdown_body.dart ########## @@ -0,0 +1,229 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/app_localizations.dart'; +import 'package:playground/config/theme.dart'; +import 'package:playground/constants/colors.dart'; +import 'package:playground/constants/sizes.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_option_model.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_options_dropdown_input.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_options_dropdown_separator.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_options_form.dart'; +import 'package:playground/modules/editor/parsers/run_options_parser.dart'; +import 'package:playground/modules/notifications/components/notification.dart'; + +const kOptionsTabIndex = 0; +const kRawTabIndex = 1; + +final kDefaultOption = [PipelineOptionController()]; + +class PipelineOptionsDropdownBody extends StatefulWidget { + final String pipelineOptions; + final Function(String) setPipelineOptions; + final Function close; + + const PipelineOptionsDropdownBody({ + Key? key, + required this.pipelineOptions, + required this.setPipelineOptions, + required this.close, + }) : super(key: key); + + @override + State<PipelineOptionsDropdownBody> createState() => + _PipelineOptionsDropdownBodyState(); +} + +class _PipelineOptionsDropdownBodyState + extends State<PipelineOptionsDropdownBody> + with SingleTickerProviderStateMixin { + late final TabController tabController; + final TextEditingController pipelineOptionsController = + TextEditingController(); + List<PipelineOptionController> pipelineOptionsList = kDefaultOption; + int selectedTab = kOptionsTabIndex; + bool showError = false; + + @override + void initState() { + tabController = TabController(vsync: this, length: 2); + tabController.addListener(onTabChange); + pipelineOptionsController.text = widget.pipelineOptions; + pipelineOptionsList = _pipelineOptionsMapToList(widget.pipelineOptions); + if (pipelineOptionsList.isEmpty) { + pipelineOptionsList = kDefaultOption; + } + super.initState(); + } + + @override + void dispose() { + tabController.removeListener(onTabChange); + tabController.dispose(); + super.dispose(); + } + + onTabChange() { + setState(() { + selectedTab = tabController.index; + }); + if (tabController.index == kRawTabIndex) { + _updateRawValue(); + } else { + _updateFormValue(); + } + } + + onDelete(int index) { + setState(() { + pipelineOptionsList.removeAt(index); + }); + } + + @override + Widget build(BuildContext context) { + AppLocalizations appLocale = AppLocalizations.of(context)!; + return Column( + children: [ + TabBar( + controller: tabController, + tabs: <Widget>[ + Tab(text: appLocale.optionsPipelineOptions), + Tab(text: appLocale.rawPipelineOptions), + ], + ), + const PipelineOptionsDropdownSeparator(), + Expanded( + child: Padding( + padding: const EdgeInsets.all(kXlSpacing), + child: TabBarView( + controller: tabController, + physics: const NeverScrollableScrollPhysics(), + children: <Widget>[ + PipelineOptionsForm( + options: pipelineOptionsList, + onDelete: onDelete, + ), + PipelineOptionsDropdownInput( + controller: pipelineOptionsController, + ), + ], + ), + ), + ), + const PipelineOptionsDropdownSeparator(), + Padding( + padding: const EdgeInsets.all(kXlSpacing), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + height: kButtonHeight, + child: ElevatedButton( + child: Text(appLocale.saveAndClose), + onPressed: () => _save(context), + ), + ), + const SizedBox(width: kLgSpacing), + if (selectedTab == kOptionsTabIndex) + SizedBox( + height: kButtonHeight, + child: OutlinedButton( + child: Text(appLocale.addPipelineOptionParameter), + onPressed: () => setState(() { + pipelineOptionsList.add(PipelineOptionController()); + }), + ), + ), + if (showError && selectedTab == kRawTabIndex) + Flexible( + child: Text( + appLocale.pipelineOptionsError, + style: Theme.of(context) + .textTheme + .caption + ?.copyWith(color: kErrorNotificationColor), Review comment: Should this question mark have a default value? E.g. `?? ThemeData.fallback` ########## File path: playground/frontend/lib/modules/editor/components/pipeline_options_dropdown/pipeline_options_dropdown_body.dart ########## @@ -0,0 +1,229 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import 'package:flutter/material.dart'; +import 'package:flutter_gen/gen_l10n/app_localizations.dart'; +import 'package:playground/config/theme.dart'; +import 'package:playground/constants/colors.dart'; +import 'package:playground/constants/sizes.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_option_model.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_options_dropdown_input.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_options_dropdown_separator.dart'; +import 'package:playground/modules/editor/components/pipeline_options_dropdown/pipeline_options_form.dart'; +import 'package:playground/modules/editor/parsers/run_options_parser.dart'; +import 'package:playground/modules/notifications/components/notification.dart'; + +const kOptionsTabIndex = 0; +const kRawTabIndex = 1; + +final kDefaultOption = [PipelineOptionController()]; + +class PipelineOptionsDropdownBody extends StatefulWidget { + final String pipelineOptions; + final Function(String) setPipelineOptions; + final Function close; + + const PipelineOptionsDropdownBody({ + Key? key, + required this.pipelineOptions, + required this.setPipelineOptions, + required this.close, + }) : super(key: key); + + @override + State<PipelineOptionsDropdownBody> createState() => + _PipelineOptionsDropdownBodyState(); +} + +class _PipelineOptionsDropdownBodyState + extends State<PipelineOptionsDropdownBody> + with SingleTickerProviderStateMixin { + late final TabController tabController; + final TextEditingController pipelineOptionsController = + TextEditingController(); + List<PipelineOptionController> pipelineOptionsList = kDefaultOption; + int selectedTab = kOptionsTabIndex; + bool showError = false; + + @override + void initState() { + tabController = TabController(vsync: this, length: 2); + tabController.addListener(onTabChange); + pipelineOptionsController.text = widget.pipelineOptions; + pipelineOptionsList = _pipelineOptionsMapToList(widget.pipelineOptions); + if (pipelineOptionsList.isEmpty) { + pipelineOptionsList = kDefaultOption; + } + super.initState(); + } + + @override + void dispose() { + tabController.removeListener(onTabChange); + tabController.dispose(); + super.dispose(); + } + + onTabChange() { + setState(() { + selectedTab = tabController.index; + }); + if (tabController.index == kRawTabIndex) { + _updateRawValue(); + } else { + _updateFormValue(); + } + } + + onDelete(int index) { + setState(() { + pipelineOptionsList.removeAt(index); + }); + } + + @override + Widget build(BuildContext context) { + AppLocalizations appLocale = AppLocalizations.of(context)!; + return Column( + children: [ + TabBar( + controller: tabController, + tabs: <Widget>[ + Tab(text: appLocale.optionsPipelineOptions), + Tab(text: appLocale.rawPipelineOptions), + ], + ), + const PipelineOptionsDropdownSeparator(), + Expanded( + child: Padding( + padding: const EdgeInsets.all(kXlSpacing), + child: TabBarView( + controller: tabController, + physics: const NeverScrollableScrollPhysics(), + children: <Widget>[ + PipelineOptionsForm( + options: pipelineOptionsList, + onDelete: onDelete, + ), + PipelineOptionsDropdownInput( + controller: pipelineOptionsController, + ), + ], + ), + ), + ), + const PipelineOptionsDropdownSeparator(), + Padding( + padding: const EdgeInsets.all(kXlSpacing), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + height: kButtonHeight, + child: ElevatedButton( + child: Text(appLocale.saveAndClose), + onPressed: () => _save(context), + ), + ), + const SizedBox(width: kLgSpacing), + if (selectedTab == kOptionsTabIndex) + SizedBox( + height: kButtonHeight, + child: OutlinedButton( + child: Text(appLocale.addPipelineOptionParameter), + onPressed: () => setState(() { + pipelineOptionsList.add(PipelineOptionController()); + }), + ), + ), + if (showError && selectedTab == kRawTabIndex) + Flexible( + child: Text( + appLocale.pipelineOptionsError, + style: Theme.of(context) + .textTheme + .caption + ?.copyWith(color: kErrorNotificationColor), + softWrap: true, + ), + ), + ], + ), + ) + ], + ); + } + + Map<String, String> get pipelineOptionsListValue { + final notEmptyOptions = pipelineOptionsList + .where((option) => + option.name.text.isNotEmpty && option.value.text.isNotEmpty) + .toList(); + return {for (var item in notEmptyOptions) item.name.text: item.value.text}; + } + + String get pipelineOptionsValue { + if (selectedTab == kRawTabIndex) { + return pipelineOptionsController.text; + } + return pipelineOptionsToString(pipelineOptionsListValue); + } + + _save(BuildContext context) { + if (selectedTab == kRawTabIndex && !_isPipelineOptionsTextValid()) { + setState(() { + showError = true; + }); + return; + } + widget.setPipelineOptions(pipelineOptionsValue); + widget.close(); + } + + bool _isPipelineOptionsTextValid() { + final options = pipelineOptionsController.text; + final parsedOptions = parsePipelineOptions(options); + return options.isEmpty || parsedOptions != null; Review comment: Add brackets around `parsedOptions != null` ########## File path: playground/frontend/lib/l10n/app_en.arb ########## @@ -154,5 +154,41 @@ "clearOutput": "Clear Output", "@clearOutput": { "description": "Title for the Clear Output shortcut row" + }, + "pipelineOptions": "Pipeline Options", + "@pipelineOptions": { + "description": "Title for the Pipeline Options" + }, + "rawPipelineOptions": "Raw", + "@rawPipelineOptions": { + "description": "Title for the Raw Pipeline Options Tab" + }, + "optionsPipelineOptions": "Options", + "@optionsPipelineOptions": { + "description": "Title for the Options Pipeline Options Tab" + }, + "saveAndClose": "Save & close", + "@saveAndClose": { + "description": "Text for save and close button on pipeline dropdown" + }, + "addPipelineOptionParameter": "Add parameter", + "@addPipelineOptionParameter": { + "description": "Text for add parameter button on pipeline dropdown" + }, + "input": "Input", + "@input": { + "description": "Text input label" + }, + "name": "Name", + "@name": { + "description": "Text name label" + }, + "value": "Value", + "@value": { + "description": "Text value label" + }, + "pipelineOptionsError": "Please check the format (example: --key1 value1 --key2 value2), only alphanumeric and \",*,/,-,:,;,',. symbols are allowed", Review comment: Nit: Perhaps this would be better as `(example: [key1, value1], [key2, value2])` to match the new UI. The dashes might be a bit confusing as they no longer exist. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
