Skip to content

Commit 36e7c84

Browse files
frankzhaopengfrankzhaopeng
committed
Merge branch 'main' of github.com:FeatureProbe/feature-probe-ui
2 parents dd00ea2 + 8a1db7f commit 36e7c84

File tree

39 files changed

+261
-222
lines changed

39 files changed

+261
-222
lines changed

‎src/components/Serve/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ const Serve = (props: IProps) => {
245245
</div>
246246
{
247247
total !== TOTAL && (
248-
<div className={styles.message}>
248+
<div id={`rule_${id}_serve_total`} className={styles.message}>
249249
<Icon customClass={styles['message-iconfont']} type='remove-circle' />
250250
{
251251
intl.formatMessage({

‎src/components/TextLimit/index.module.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.popup {
2+
opacity: 0.8;
3+
}
4+
5+
.limit-str-container-w {
6+
display: inline-block;
7+
overflow: hidden;
8+
white-space: nowrap;
9+
text-overflow: ellipsis;
10+
vertical-align: bottom;
11+
line-height: unset !important;
12+
}

‎src/components/TextLimit/index.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
2+
import { Popup, PopupProps } from 'semantic-ui-react';
3+
import { stringLimit } from '../../utils/tools';
4+
import styles from './index.module.scss';
5+
6+
interface IProps {
7+
text: string;
8+
maxLength?: number;
9+
hidePopup?: boolean;
10+
popupRender?: ReactNode;
11+
maxWidth?: number;
12+
popupProps?: PopupProps;
13+
}
14+
15+
const TextLimit: React.FC<IProps> = (props) => {
16+
const { text, maxLength, maxWidth, hidePopup, popupRender, popupProps } = props;
17+
const ref = useRef<HTMLDivElement | null>(null);
18+
const [isLong, setIsLong] = useState<boolean>(false);
19+
20+
const judgeLength: () => boolean = useCallback(() => {
21+
if(maxLength) {
22+
return text.length > maxLength;
23+
} else {
24+
if(ref.current) {
25+
return ref.current.scrollWidth > ref.current.clientWidth;
26+
} else {
27+
return false;
28+
}
29+
}
30+
}, [ref.current]);
31+
32+
useEffect(() => {
33+
if(ref.current) {
34+
if(ref.current.clientWidth === 0 && ref.current.clientHeight === 0) {
35+
setTimeout(() => {
36+
setIsLong(judgeLength());
37+
}, 500);
38+
} else {
39+
setIsLong(judgeLength());
40+
}
41+
}
42+
}, [ref.current]);
43+
44+
return (
45+
<Popup
46+
inverted
47+
disabled={!(!hidePopup && isLong)}
48+
trigger={
49+
<span
50+
className={`${maxLength ? styles['limit-str-container-n'] : styles['limit-str-container-w']}`}
51+
ref={ref}
52+
style={{
53+
maxWidth: maxWidth ?? '100%',
54+
}}
55+
>
56+
{ stringLimit(text, maxLength ?? 0) }
57+
</span>
58+
}
59+
content={popupRender ?? text }
60+
className={styles.popup}
61+
wide='very'
62+
{...popupProps}
63+
/>
64+
);
65+
};
66+
67+
export default TextLimit;

‎src/interfaces/targeting.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export interface IContent {
7979
approvalComment?: string;
8080
locked?: boolean;
8181
lockedTime?: string;
82+
publishTime?: string;
8283
}
8384

8485
export interface IModifyInfo {
@@ -166,6 +167,7 @@ export interface IApprovalInfo {
166167
approvalComment?: string;
167168
locked?: boolean;
168169
lockedTime?: string;
170+
publishTime?: string;
169171
}
170172

171173
export interface ITargeting {

‎src/layout/layout.module.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,9 @@
2626

2727
.breadcrumb {
2828
font-size: 12px;
29-
line-height: 18px;
30-
padding: 12px 24px 12px 48px;
29+
line-height: 42px !important;
30+
padding: 0 24px 0 48px;
31+
height: 42px;
3132
}
3233

3334
.breadcrumb-icon {
@@ -41,7 +42,7 @@
4142
height: 4px;
4243
margin: 0 20px;
4344
background: #556ee6;
44-
min-width: 1080px;
45+
min-width: 1160px;
4546
}
4647

4748
.platform-tips {
@@ -94,3 +95,8 @@
9495
.popup {
9596
opacity: 0.8;
9697
}
98+
99+
.project-content {
100+
flex-grow: 1;
101+
overflow: auto !important;
102+
}

‎src/layout/pageHeader.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
font-size: 16px;
1414
color: #495057;
1515
position: relative;
16-
padding: 0 18px;
16+
margin: 0 18px;
1717
}
1818

1919
.navs-item-selected {
@@ -126,7 +126,7 @@
126126
padding: 0 5px;
127127
position: absolute;
128128
top: 5px;
129-
right: 5px;
129+
right: -13px;
130130
text-align: center;
131131
}
132132

‎src/layout/pageHeader.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ const PageHeader = () => {
5252
);
5353

5454
const projectCls = classNames(
55-
'joyride-project',
5655
'navs-item',
5756
{
5857
'navs-item-selected': selectedNav === PROJECT_NAV
@@ -190,8 +189,10 @@ const PageHeader = () => {
190189
}
191190
</div>
192191
<div className={`${styles.navs} project-nav`}>
193-
<div className={projectCls} onClick={handleGotoProject}>
194-
<FormattedMessage id='common.projects.text' />
192+
<div className='joyride-project'>
193+
<div className={projectCls} onClick={handleGotoProject}>
194+
<FormattedMessage id='common.projects.text' />
195+
</div>
195196
</div>
196197
<div className={settingCls} onClick={handleGotoAccount}>
197198
<FormattedMessage id='common.settings.text' />

‎src/layout/projectLayout.tsx‎

Lines changed: 14 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@ import { ReactElement, useCallback, useEffect, useState } from 'react';
22
import { useParams, useHistory, useRouteMatch } from 'react-router-dom';
33
import { FormattedMessage, useIntl } from 'react-intl';
44
import Joyride, { CallBackProps, Step, EVENTS, ACTIONS } from 'react-joyride';
5-
import { Breadcrumb, Popup } from 'semantic-ui-react';
5+
import { Breadcrumb } from 'semantic-ui-react';
66
import SideBar from './sidebar';
77
import ProjectSiderbar from './projectSiderbar';
88
import message from 'components/MessageBox';
99
import Icon from 'components/Icon';
10+
import TextLimit from 'components/TextLimit';
1011
import { getProjectInfo } from 'services/project';
1112
import { getToggleInfo } from 'services/toggle';
1213
import { saveDictionary, getFromDictionary } from 'services/dictionary';
@@ -16,7 +17,6 @@ import { IToggleInfo } from 'interfaces/targeting';
1617
import { EnvironmentColors } from 'constants/colors';
1718
import { commonConfig, floaterStyle, tourStyle } from 'constants/tourConfig';
1819
import { DEMO_TIP_SHOW, USER_GUIDE_LAYOUT } from 'constants/dictionary_keys';
19-
import { stringLimit } from 'utils/tools';
2020

2121
import {
2222
TOGGLE_PATH,
@@ -221,7 +221,7 @@ const ProjectLayout = (props: IProps) => {
221221
backgroundColor={EnvironmentColors[envIndex]}
222222
/>
223223
</SideBar>
224-
<div className={styles.content}>
224+
<div className={styles['project-content']}>
225225
{
226226
tipVisible && (localStorage.getItem('isDemo') === 'true') && (
227227
<div className={styles['platform-tips']}>
@@ -242,35 +242,17 @@ const ProjectLayout = (props: IProps) => {
242242
match.path === TARGETING_PATH && (
243243
<>
244244
<Breadcrumb.Section link onClick={gotoToggle}>
245-
{
246-
projectInfo.name.length > 24
247-
?
248-
<Popup
249-
inverted
250-
className={styles.popup}
251-
trigger={<span>{stringLimit(projectInfo.name, 24)}</span>}
252-
content={projectInfo.name}
253-
position='top center'
254-
wide={true}
255-
/>
256-
: projectInfo.name
257-
}
245+
<TextLimit
246+
text={projectInfo.name}
247+
maxWidth={190}
248+
popupProps={{
249+
offset: [0, -12],
250+
}}
251+
/>
258252
</Breadcrumb.Section>
259253
<Breadcrumb.Divider icon={<Icon customClass={styles['breadcrumb-icon']} type='angle-right' />} />
260254
<Breadcrumb.Section active>
261-
{
262-
toggleName.length > 24
263-
?
264-
<Popup
265-
inverted
266-
className={styles.popup}
267-
trigger={<span>{stringLimit(toggleName, 24)}</span>}
268-
content={toggleName}
269-
position='top center'
270-
wide={true}
271-
/>
272-
: toggleName
273-
}
255+
<TextLimit text={toggleName} maxWidth={190} popupProps={{ offset: [0, -12] }} />
274256
</Breadcrumb.Section>
275257
</>
276258
)
@@ -279,35 +261,11 @@ const ProjectLayout = (props: IProps) => {
279261
match.path === GET_STARTED_PATH && (
280262
<>
281263
<Breadcrumb.Section link onClick={gotoToggle}>
282-
{
283-
projectInfo.name.length > 24
284-
?
285-
<Popup
286-
inverted
287-
className={styles.popup}
288-
trigger={<span>{stringLimit(projectInfo.name, 24)}</span>}
289-
content={projectInfo.name}
290-
position='top center'
291-
wide={true}
292-
/>
293-
: projectInfo.name
294-
}
264+
<TextLimit text={projectInfo.name} maxWidth={190} popupProps={{ offset: [0, -12] }} />
295265
</Breadcrumb.Section>
296266
<Breadcrumb.Divider icon={<Icon customClass={styles['breadcrumb-icon']} type='angle-right' />} />
297267
<Breadcrumb.Section link onClick={gotoTargeting}>
298-
{
299-
toggleName.length > 24
300-
?
301-
<Popup
302-
inverted
303-
className={styles.popup}
304-
trigger={<span>{stringLimit(toggleName, 24)}</span>}
305-
content={toggleName}
306-
position='top center'
307-
wide={true}
308-
/>
309-
: toggleName
310-
}
268+
<TextLimit text={toggleName} maxWidth={190} popupProps={{ offset: [0, -12] }} />
311269
</Breadcrumb.Section>
312270
<Breadcrumb.Divider icon={<Icon customClass={styles['breadcrumb-icon']} type='angle-right' />} />
313271
<Breadcrumb.Section active>
@@ -319,19 +277,7 @@ const ProjectLayout = (props: IProps) => {
319277
{
320278
match.path === TOGGLE_PATH && (
321279
<Breadcrumb.Section active>
322-
{
323-
projectInfo.name.length > 24
324-
?
325-
<Popup
326-
inverted
327-
className={styles.popup}
328-
trigger={<span>{stringLimit(projectInfo.name, 24)}</span>}
329-
content={projectInfo.name}
330-
position='top center'
331-
wide={true}
332-
/>
333-
: projectInfo.name
334-
}
280+
<TextLimit text={projectInfo.name} maxWidth={190} popupProps={{ offset: [0, -12] }} />
335281
</Breadcrumb.Section>
336282
)
337283
}

‎src/layout/projectSiderbar.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { IRouterParams, IProject, IEnvironment } from 'interfaces/project';
1010
import { TOGGLE_PATH, TARGETING_PATH, SEGMENT_PATH, SEGMENT_ADD_PATH, SEGMENT_EDIT_PATH, GET_STARTED_PATH, SETTING_PATH } from 'router/routes';
1111
import { SidebarContainer } from './hooks';
1212
import styles from './sidebar.module.scss';
13+
import TextLimit from 'components/TextLimit';
1314

1415
interface IProps {
1516
isLoading: boolean;
@@ -117,7 +118,13 @@ const ProjectSiderbar = (props: IProps) => {
117118
) : (
118119
<>
119120
<div className={styles['project-name']}>
120-
{ projectInfo.name }
121+
<TextLimit
122+
text={projectInfo.name}
123+
popupProps={{
124+
position: 'top left',
125+
offset: [0, -8],
126+
}}
127+
/>
121128
</div>
122129
<div className={envCls} style={{ backgroundColor }}>
123130
<Dropdown

‎src/locales/en-US.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,16 +194,16 @@
194194
"toggles.filter.evaluated.never": "Never",
195195
"toggles.filter.status": "Status",
196196
"toggles.filter.permanent.status": "Permanent",
197-
"toggles.filter.search.placeholder": "Search for name, key or description",
197+
"toggles.filter.search.placeholder": "Search for keyword",
198198
"toggles.table.brief": "Brief",
199199
"toggles.table.publishing.status": "Publishing Status",
200200
"toggles.table.status": "Status",
201201
"toggles.table.evaluation": "Evaluation",
202-
"toggles.table.lastmodified": "Template Modified",
203202
"toggles.total": "toggles in total",
204203
"toggles.list.error.text": "Error getting toggle list!",
205-
"toggles.create.toggle": "Create a toggle template",
206-
"toggles.edit.toggle": "Edit toggle template",
204+
"toggles.create.toggle": "Create a toggle",
205+
"toggles.create.text": "Create and publish",
206+
"toggles.edit.toggle": "Edit toggle",
207207
"toggles.key.tips": "Use this key in your code. Cannot be changed after creation.",
208208
"toggles.sdk.type": "Use client-side SDK?",
209209
"toggles.sdk.yes": "yes",
@@ -215,7 +215,7 @@
215215
"toggles.variations.tips": "Variations decide the toggle's return value in your code.",
216216
"toggles.disabled.return.type.tips": "Define the return value when toggle is disabled.",
217217
"toggles.disabled.return.type.errortext": "Please select disabled serve",
218-
"toggles.create.success": "Created toggle successfully",
218+
"toggles.create.success": "Created toggle and published successfully",
219219
"toggles.create.error": "Error creating toggle",
220220
"toggles.edit.success": "Updated toggle successfully",
221221
"toggles.edit.error": "Error editing toggle.",
@@ -453,6 +453,6 @@
453453
"guide.toggle.targeting.step2.default": "If all the above [rules] of a user fail to hit, the [default rule] will be returned",
454454

455455
"guide.next": "Next",
456-
"guide.last": "Last",
456+
"guide.last": "Previous",
457457
"guide.done": "Done"
458458
}

0 commit comments

Comments
 (0)