Skip to content

refactor: ECHO-419: BEM Migration: Settings files #8711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 28, 2025
+42 −38
Merged

refactor: ECHO-419: BEM Migration: Settings files #8711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
207e43c
refactor: ECHO-419: topbar bottombat and settings
luarmr Oct 24, 2025
83a0db3
refactor(bem): replace Block/Elem with cn() in SettingsRenderer.tsx
luarmr Oct 24, 2025
1acdfb2
refactor(bem): replace Block/Elem with cn() in Settings.jsx
luarmr Oct 24, 2025
6f5a236
bioming
luarmr Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 37 additions & 33 deletions web/libs/editor/src/components/Settings/Settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { observer } from "mobx-react";
import { Hotkey } from "../../core/Hotkey";

import "./Settings.scss";
import { Block, Elem } from "../../utils/bem";
import { cn } from "../../utils/bem";
import { triggerResizeEvent } from "../../utils/utilities";

import EditorSettings from "../../core/settings/editorsettings";
Expand All @@ -30,23 +30,23 @@ const HotkeysDescription = () => {
key: k,
combo: k.split(",").map((keyGroup) => {
return (
<Elem name="key-group" key={keyGroup}>
<div className={cn("keys").elem("key-group").toClassName()} key={keyGroup}>
{keyGroup
.trim()
.split("+")
.map((k) => (
<Elem tag="kbd" name="key" key={k}>
<kbd className={cn("keys").elem("key").toClassName()} key={k}>
{k}
</Elem>
</kbd>
))}
</Elem>
</div>
);
}),
descr: descr[k],
}));

return (
<Block name="keys">
<div className={cn("keys").toClassName()}>
<Tabs size="small">
{Object.entries(keyNamespaces).map(([ns, data]) => {
if (Object.keys(data.descriptions).length === 0) {
Expand All @@ -59,7 +59,7 @@ const HotkeysDescription = () => {
);
})}
</Tabs>
</Block>
</div>
);
};

Expand All @@ -82,26 +82,28 @@ if (isFF(FF_DEV_3873)) {
}

const SettingsTag = ({ children }) => {
return <Block name="settings-tag">{children}</Block>;
return <div className={cn("settings-tag").toClassName()}>{children}</div>;
};

const GeneralSettings = observer(({ store }) => {
return (
<Block name="settings" mod={newUI}>
<div className={cn("settings").mod(newUI).toClassName()}>
{editorSettingsKeys.map((obj, index) => {
return (
<Elem name="field" tag="label" key={index}>
<label className={cn("settings").elem("field").toClassName()} key={index}>
{isFF(FF_DEV_3873) ? (
<>
<Block name="settings__label">
<Elem name="title">
<div className={cn("settings__label").toClassName()}>
<div className={cn("settings__label").elem("title").toClassName()}>
{EditorSettings[obj].newUI.title}
{EditorSettings[obj].newUI.tags?.split(",").map((tag) => (
<SettingsTag key={tag}>{tag}</SettingsTag>
))}
</Elem>
<Elem name="description">{EditorSettings[obj].newUI.description}</Elem>
</Block>
</div>
<div className={cn("settings__label").elem("description").toClassName()}>
{EditorSettings[obj].newUI.description}
</div>
</div>
<Toggle
key={index}
checked={store.settings[obj]}
Expand All @@ -121,17 +123,17 @@ const GeneralSettings = observer(({ store }) => {
<br />
</>
)}
</Elem>
</label>
);
})}
</Block>
</div>
);
});

const LayoutSettings = observer(({ store }) => {
return (
<Block name="settings" mod={newUI}>
<Elem name="field">
<div className={cn("settings").mod(newUI).toClassName()}>
<div className={cn("settings").elem("field").toClassName()}>
<Checkbox
checked={store.settings.bottomSidePanel}
onChange={() => {
Expand All @@ -141,15 +143,15 @@ const LayoutSettings = observer(({ store }) => {
>
Move sidepanel to the bottom
</Checkbox>
</Elem>
</div>

<Elem name="field">
<div className={cn("settings").elem("field").toClassName()}>
<Checkbox checked={store.settings.displayLabelsByDefault} onChange={store.settings.toggleSidepanelModel}>
Display Labels by default in Results panel
</Checkbox>
</Elem>
</div>

<Elem name="field">
<div className={cn("settings").elem("field").toClassName()}>
<Checkbox
value="Show Annotations panel"
defaultChecked={store.settings.showAnnotationsPanel}
Expand All @@ -159,9 +161,9 @@ const LayoutSettings = observer(({ store }) => {
>
Show Annotations panel
</Checkbox>
</Elem>
</div>

<Elem name="field">
<div className={cn("settings").elem("field").toClassName()}>
<Checkbox
value="Show Predictions panel"
defaultChecked={store.settings.showPredictionsPanel}
Expand All @@ -171,10 +173,10 @@ const LayoutSettings = observer(({ store }) => {
>
Show Predictions panel
</Checkbox>
</Elem>
</div>

{/* Saved for future use */}
{/* <Elem name="field">
{/* <div className={cn("settings").elem("field").toClassName()}>
<Checkbox
value="Show image in fullsize"
defaultChecked={store.settings.imageFullSize}
Expand All @@ -184,8 +186,8 @@ const LayoutSettings = observer(({ store }) => {
>
Show image in fullsize
</Checkbox>
</Elem> */}
</Block>
</div> */}
</div>
);
});

Expand Down Expand Up @@ -228,12 +230,14 @@ export default observer(({ store }) => {
}, []);

return (
<Block
tag={Modal}
<Modal
className={cn(DEFAULT_MODAL_SETTINGS.name).toClassName()}
open={store.showingSettings}
onCancel={store.toggleSettings}
footer=""
{...DEFAULT_MODAL_SETTINGS}
title={DEFAULT_MODAL_SETTINGS.title}
closeIcon={DEFAULT_MODAL_SETTINGS.closeIcon}
bodyStyle={DEFAULT_MODAL_SETTINGS.bodyStyle}
>
<Tabs defaultActiveKey={DEFAULT_ACTIVE}>
{Object.entries(Settings).map(([key, { name, component }]) => (
Expand All @@ -247,6 +251,6 @@ export default observer(({ store }) => {
</Tabs.TabPane>
))}
</Tabs>
</Block>
</Modal>
);
});
10 changes: 5 additions & 5 deletions web/libs/editor/src/components/Settings/TagSettings/SettingsRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { Checkbox } from "@humansignal/ui";
import { observer } from "mobx-react";
import type { FC } from "react";
import type { SettingsProperties, SettingsProperty } from "../../../core/settings/types";
import { Block, Elem } from "../../../utils/bem";
import { cn } from "../../../utils/bem";
import { isFF } from "../../../utils/feature-flags";

const SettingsRendererPure: FC<{ store: any; settings: SettingsProperties }> = ({ store, settings }) => {
return (
<Block name="settings">
<div className={cn("settings").toClassName()}>
{Object.entries(settings).map(([key, value]) => {
return value.ff && !isFF(value.ff) ? null : <SettingsField key={key} name={key} store={store} value={value} />;
})}
</Block>
</div>
);
};

Expand Down Expand Up @@ -54,7 +54,7 @@ const SettingsField: FC<{
}

return (
<Elem name="field" key={name}>
<div className={cn("settings").elem("field").toClassName()} key={name}>
{value.type === "boolean" ? (
<Checkbox {...props}>{value.description}</Checkbox>
) : (
Expand All @@ -63,7 +63,7 @@ const SettingsField: FC<{
<Input {...props} />
</label>
)}
</Elem>
</div>
);
});

Expand Down
Loading