Skip to content

Commit 46ad155

Browse files
robertpiosikrobertpiosik
committed
Refactor UiItem to use children instead of slot_below and add collapsible sections with default reset capability to edit format instructions
- show/hide text buttons on 'edit format instructions' should be replaced with icon buttons, using codicons: [Pasted text] - Item component should use children instead of 'slot below'. Also, instead of using chevron icon button, the component should accept prop 'is toggleable'. If true, should render chevron internally. - item, if toggleable, the whole top section with title and description should be clickable, therefore don't use IconButton. - toggleable item, the top section should change background on hover to [Fragment] - once item is toggled, it should not have the hover state background change - Item should use IconButton for chevron - when user hovers the icon button, the hover state of the whole container should be disabled. - simplify [Fragment] while preserving behavior - Each 'edit format' should have 'redo' action. The action should be shown when instructions differ from default ones. - 'discard' 'expand' icon button should have proper title attributes - `packages/ui/src/components/editor/settings/Item/Item.tsx` should accept 'translations' optional prop object that has 'expand' 'collapse' - rename show/hide translations to expand/collapse - 'reset do default' should be renamed to 'restore default'
1 parent d043d13 commit 46ad155

8 files changed

Lines changed: 387 additions & 308 deletions

File tree

‎apps/editor/src/views/settings/frontend/Home/Home.tsx‎

Lines changed: 135 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -558,23 +558,22 @@ export const Home: React.FC<Props> = (props) => {
558558
<UiGroup>
559559
<UiItem
560560
title={t('action.default-configuration')}
561-
slot_below={
562-
<DefaultConfigurationSelector
563-
value={props.defaults['intelligent-update'] || null}
564-
configurations={props.api_configurations}
565-
on_unset={() =>
566-
props.on_set_default_api_configuration('intelligent-update', null)
567-
}
568-
on_select={() =>
569-
props.on_select_default_api_configuration('intelligent-update')
570-
}
571-
translations={{
572-
select_default: t('action.select-default-configuration'),
573-
unset: t('action.unset-default')
574-
}}
575-
/>
576-
}
577-
/>
561+
>
562+
<DefaultConfigurationSelector
563+
value={props.defaults['intelligent-update'] || null}
564+
configurations={props.api_configurations}
565+
on_unset={() =>
566+
props.on_set_default_api_configuration('intelligent-update', null)
567+
}
568+
on_select={() =>
569+
props.on_select_default_api_configuration('intelligent-update')
570+
}
571+
translations={{
572+
select_default: t('action.select-default-configuration'),
573+
unset: t('action.unset-default')
574+
}}
575+
/>
576+
</UiItem>
578577
<UiItem
579578
title={t('intelligent-update.fix-all-automatically.title')}
580579
description={t(
@@ -602,25 +601,24 @@ export const Home: React.FC<Props> = (props) => {
602601
<UiItem
603602
title={t('edit-context.system-instructions.title')}
604603
description={t('edit-context.system-instructions.description')}
605-
slot_below={
606-
<UiTextarea
607-
value={edit_context_instructions}
608-
on_change={set_edit_context_instructions}
609-
on_blur={() => {
610-
props.on_edit_context_system_instructions_change(
611-
edit_context_instructions
612-
)
613-
if (
614-
edit_context_instructions == '' &&
615-
props.edit_context_system_instructions ==
616-
default_system_instructions
617-
) {
618-
set_edit_context_instructions(default_system_instructions)
619-
}
620-
}}
621-
/>
622-
}
623-
/>
604+
>
605+
<UiTextarea
606+
value={edit_context_instructions}
607+
on_change={set_edit_context_instructions}
608+
on_blur={() => {
609+
props.on_edit_context_system_instructions_change(
610+
edit_context_instructions
611+
)
612+
if (
613+
edit_context_instructions == '' &&
614+
props.edit_context_system_instructions ==
615+
default_system_instructions
616+
) {
617+
set_edit_context_instructions(default_system_instructions)
618+
}
619+
}}
620+
/>
621+
</UiItem>
624622
</UiGroup>
625623
</UiSection>
626624

@@ -635,23 +633,22 @@ export const Home: React.FC<Props> = (props) => {
635633
<UiGroup>
636634
<UiItem
637635
title={t('action.default-configuration')}
638-
slot_below={
639-
<DefaultConfigurationSelector
640-
value={props.defaults['code-at-cursor'] || null}
641-
configurations={props.api_configurations}
642-
on_unset={() =>
643-
props.on_set_default_api_configuration('code-at-cursor', null)
644-
}
645-
on_select={() =>
646-
props.on_select_default_api_configuration('code-at-cursor')
647-
}
648-
translations={{
649-
select_default: t('action.select-default-configuration'),
650-
unset: t('action.unset-default')
651-
}}
652-
/>
653-
}
654-
/>
636+
>
637+
<DefaultConfigurationSelector
638+
value={props.defaults['code-at-cursor'] || null}
639+
configurations={props.api_configurations}
640+
on_unset={() =>
641+
props.on_set_default_api_configuration('code-at-cursor', null)
642+
}
643+
on_select={() =>
644+
props.on_select_default_api_configuration('code-at-cursor')
645+
}
646+
translations={{
647+
select_default: t('action.select-default-configuration'),
648+
unset: t('action.unset-default')
649+
}}
650+
/>
651+
</UiItem>
655652
<UiItem
656653
title={t('code-at-cursor.keyboard-shortcut.title')}
657654
description={t('code-at-cursor.keyboard-shortcut.description')}
@@ -679,23 +676,22 @@ export const Home: React.FC<Props> = (props) => {
679676
<UiGroup>
680677
<UiItem
681678
title={t('action.default-configuration')}
682-
slot_below={
683-
<DefaultConfigurationSelector
684-
value={props.defaults['find-relevant-files'] || null}
685-
configurations={props.api_configurations}
686-
on_unset={() =>
687-
props.on_set_default_api_configuration('find-relevant-files', null)
688-
}
689-
on_select={() =>
690-
props.on_select_default_api_configuration('find-relevant-files')
691-
}
692-
translations={{
693-
select_default: t('action.select-default-configuration'),
694-
unset: t('action.unset-default')
695-
}}
696-
/>
697-
}
698-
/>
679+
>
680+
<DefaultConfigurationSelector
681+
value={props.defaults['find-relevant-files'] || null}
682+
configurations={props.api_configurations}
683+
on_unset={() =>
684+
props.on_set_default_api_configuration('find-relevant-files', null)
685+
}
686+
on_select={() =>
687+
props.on_select_default_api_configuration('find-relevant-files')
688+
}
689+
translations={{
690+
select_default: t('action.select-default-configuration'),
691+
unset: t('action.unset-default')
692+
}}
693+
/>
694+
</UiItem>
699695
</UiGroup>
700696
</UiSection>
701697

@@ -710,45 +706,43 @@ export const Home: React.FC<Props> = (props) => {
710706
<UiGroup>
711707
<UiItem
712708
title={t('action.default-configuration')}
713-
slot_below={
714-
<DefaultConfigurationSelector
715-
value={props.defaults['commit-messages'] || null}
716-
configurations={props.api_configurations}
717-
on_unset={() =>
718-
props.on_set_default_api_configuration('commit-messages', null)
719-
}
720-
on_select={() =>
721-
props.on_select_default_api_configuration('commit-messages')
722-
}
723-
translations={{
724-
select_default: t('action.select-default-configuration'),
725-
unset: t('action.unset-default')
726-
}}
727-
/>
728-
}
729-
/>
709+
>
710+
<DefaultConfigurationSelector
711+
value={props.defaults['commit-messages'] || null}
712+
configurations={props.api_configurations}
713+
on_unset={() =>
714+
props.on_set_default_api_configuration('commit-messages', null)
715+
}
716+
on_select={() =>
717+
props.on_select_default_api_configuration('commit-messages')
718+
}
719+
translations={{
720+
select_default: t('action.select-default-configuration'),
721+
unset: t('action.unset-default')
722+
}}
723+
/>
724+
</UiItem>
730725
<UiItem
731726
title={t('commit-messages.instructions.title')}
732727
description={t('commit-messages.instructions.description')}
733-
slot_below={
734-
<UiTextarea
735-
value={commit_instructions}
736-
on_change={set_commit_instructions}
737-
on_blur={() => {
738-
props.on_commit_instructions_change(commit_instructions)
739-
if (
740-
commit_instructions == '' &&
741-
props.commit_message_instructions ==
742-
default_commit_message_instructions
743-
) {
744-
set_commit_instructions(
745-
default_commit_message_instructions
746-
)
747-
}
748-
}}
749-
/>
750-
}
751-
/>
728+
>
729+
<UiTextarea
730+
value={commit_instructions}
731+
on_change={set_commit_instructions}
732+
on_blur={() => {
733+
props.on_commit_instructions_change(commit_instructions)
734+
if (
735+
commit_instructions == '' &&
736+
props.commit_message_instructions ==
737+
default_commit_message_instructions
738+
) {
739+
set_commit_instructions(
740+
default_commit_message_instructions
741+
)
742+
}
743+
}}
744+
/>
745+
</UiItem>
752746
<UiItem
753747
title={t('commit-messages.include-prompts.title')}
754748
description={t('commit-messages.include-prompts.description')}
@@ -792,47 +786,45 @@ export const Home: React.FC<Props> = (props) => {
792786
<UiGroup>
793787
<UiItem
794788
title={t('action.default-configuration')}
795-
slot_below={
796-
<DefaultConfigurationSelector
797-
value={props.defaults['voice-input'] || null}
798-
configurations={props.api_configurations}
799-
on_unset={() =>
800-
props.on_set_default_api_configuration('voice-input', null)
801-
}
802-
on_select={() =>
803-
props.on_select_default_api_configuration('voice-input')
804-
}
805-
translations={{
806-
select_default: t('action.select-default-configuration'),
807-
unset: t('action.unset-default')
808-
}}
809-
/>
810-
}
811-
/>
789+
>
790+
<DefaultConfigurationSelector
791+
value={props.defaults['voice-input'] || null}
792+
configurations={props.api_configurations}
793+
on_unset={() =>
794+
props.on_set_default_api_configuration('voice-input', null)
795+
}
796+
on_select={() =>
797+
props.on_select_default_api_configuration('voice-input')
798+
}
799+
translations={{
800+
select_default: t('action.select-default-configuration'),
801+
unset: t('action.unset-default')
802+
}}
803+
/>
804+
</UiItem>
812805
<UiItem
813806
title={t('voice-input.instructions.title')}
814807
description={t('voice-input.instructions.description')}
815-
slot_below={
816-
<UiTextarea
817-
value={voice_input_instructions}
818-
on_change={set_voice_input_instructions}
819-
on_blur={() => {
820-
props.on_voice_input_instructions_change(
821-
voice_input_instructions
808+
>
809+
<UiTextarea
810+
value={voice_input_instructions}
811+
on_change={set_voice_input_instructions}
812+
on_blur={() => {
813+
props.on_voice_input_instructions_change(
814+
voice_input_instructions
815+
)
816+
if (
817+
voice_input_instructions == '' &&
818+
props.voice_input_instructions ==
819+
default_voice_input_instructions
820+
) {
821+
set_voice_input_instructions(
822+
default_voice_input_instructions
822823
)
823-
if (
824-
voice_input_instructions == '' &&
825-
props.voice_input_instructions ==
826-
default_voice_input_instructions
827-
) {
828-
set_voice_input_instructions(
829-
default_voice_input_instructions
830-
)
831-
}
832-
}}
833-
/>
834-
}
835-
/>
824+
}
825+
}}
826+
/>
827+
</UiItem>
836828
<UiItem
837829
title={t('voice-input.push-to-talk.title')}
838830
description={t('voice-input.push-to-talk.description')}

0 commit comments

Comments
 (0)