fix: Updating UI for members page and admin settings left pane upgrade tags (#26622)
## Description - Updating UI for members page to remove the borders between rows. - Updating the condition for upgrade tags on the left pane of admin settings, to use feature flags instead. #### PR fixes following issue(s) Fixes [#26627](https://github.com/appsmithorg/appsmith/issues/26627) #### Type of change - Bug fix (non-breaking change which fixes an issue) - Chore (housekeeping or task changes that don't impact user perception) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [x] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
This commit is contained in:
parent
be18152945
commit
68ca09b324
|
|
@ -113,13 +113,13 @@ export function Categories({
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickHandler = (category: string, needsUpgrade: boolean) => {
|
const onClickHandler = (category: string, showUpgradeTag: boolean) => {
|
||||||
if (category === "general") {
|
if (category === "general") {
|
||||||
dispatch({
|
dispatch({
|
||||||
type: ReduxActionTypes.FETCH_ADMIN_SETTINGS,
|
type: ReduxActionTypes.FETCH_ADMIN_SETTINGS,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (needsUpgrade) {
|
if (showUpgradeTag) {
|
||||||
triggerAnalytics(category);
|
triggerAnalytics(category);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -131,6 +131,7 @@ export function Categories({
|
||||||
!!currentSubCategory && showSubCategory
|
!!currentSubCategory && showSubCategory
|
||||||
? currentSubCategory == config.slug
|
? currentSubCategory == config.slug
|
||||||
: currentCategory == config.slug;
|
: currentCategory == config.slug;
|
||||||
|
const showUpgradeTag = config?.isFeatureEnabled === false;
|
||||||
return (
|
return (
|
||||||
<CategoryItem key={config.slug}>
|
<CategoryItem key={config.slug}>
|
||||||
<StyledLink
|
<StyledLink
|
||||||
|
|
@ -139,7 +140,7 @@ export function Categories({
|
||||||
active ? "active" : ""
|
active ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
onClickHandler(config.slug, config?.needsUpgrade || false)
|
onClickHandler(config.slug, showUpgradeTag || false)
|
||||||
}
|
}
|
||||||
to={
|
to={
|
||||||
!parentCategory
|
!parentCategory
|
||||||
|
|
@ -150,13 +151,13 @@ export function Categories({
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{config?.needsUpgrade ? (
|
{showUpgradeTag ? (
|
||||||
<Icon name="lock-2-line" />
|
<Icon name="lock-2-line" />
|
||||||
) : (
|
) : (
|
||||||
config?.icon && <Icon name={config?.icon} size="md" />
|
config?.icon && <Icon name={config?.icon} size="md" />
|
||||||
)}
|
)}
|
||||||
<SettingName active={active}>{config.title}</SettingName>
|
<SettingName active={active}>{config.title}</SettingName>
|
||||||
{config?.needsUpgrade &&
|
{showUpgradeTag &&
|
||||||
(config?.isEnterprise ? <EnterpriseTag /> : <BusinessTag />)}
|
(config?.isEnterprise ? <EnterpriseTag /> : <BusinessTag />)}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
{showSubCategory && (
|
{showSubCategory && (
|
||||||
|
|
|
||||||
|
|
@ -14,5 +14,5 @@ export const config: AdminConfigType = {
|
||||||
component: AuditLogsUpgradePage,
|
component: AuditLogsUpgradePage,
|
||||||
title: "Audit logs",
|
title: "Audit logs",
|
||||||
canSave: false,
|
canSave: false,
|
||||||
needsUpgrade: true,
|
isFeatureEnabled: false,
|
||||||
} as AdminConfigType;
|
} as AdminConfigType;
|
||||||
|
|
|
||||||
|
|
@ -90,7 +90,6 @@ export type AuthMethodType = {
|
||||||
label: string;
|
label: string;
|
||||||
subText?: string;
|
subText?: string;
|
||||||
image?: any;
|
image?: any;
|
||||||
needsUpgrade?: boolean;
|
|
||||||
isConnected?: boolean;
|
isConnected?: boolean;
|
||||||
calloutBanner?: banner;
|
calloutBanner?: banner;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
|
|
|
||||||
|
|
@ -20,5 +20,4 @@ export const config: AdminConfigType = {
|
||||||
icon: "pantone",
|
icon: "pantone",
|
||||||
component: BrandingPage,
|
component: BrandingPage,
|
||||||
isFeatureEnabled: isBrandingEnabled(featureFlags),
|
isFeatureEnabled: isBrandingEnabled(featureFlags),
|
||||||
needsUpgrade: true,
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,7 @@ export const APPSMITH_HIDE_WATERMARK_SETTING: Setting = {
|
||||||
controlType: SettingTypes.CHECKBOX,
|
controlType: SettingTypes.CHECKBOX,
|
||||||
label: "Appsmith watermark",
|
label: "Appsmith watermark",
|
||||||
text: "Show Appsmith watermark",
|
text: "Show Appsmith watermark",
|
||||||
needsUpgrade: true,
|
isFeatureEnabled: false,
|
||||||
isDisabled: () => true,
|
isDisabled: () => true,
|
||||||
textSuffix: <BrandingBadge />,
|
textSuffix: <BrandingBadge />,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,6 @@ export const config: AdminConfigType = {
|
||||||
component: ProvisioningUpgradePage,
|
component: ProvisioningUpgradePage,
|
||||||
title: "Provisioning",
|
title: "Provisioning",
|
||||||
canSave: false,
|
canSave: false,
|
||||||
needsUpgrade: true,
|
isFeatureEnabled: false,
|
||||||
isEnterprise: true,
|
isEnterprise: true,
|
||||||
} as AdminConfigType;
|
} as AdminConfigType;
|
||||||
|
|
|
||||||
|
|
@ -82,7 +82,7 @@ export type Setting = ControlType & {
|
||||||
formName?: string;
|
formName?: string;
|
||||||
fieldName?: string;
|
fieldName?: string;
|
||||||
dropdownOptions?: Partial<SelectOptionProps>[];
|
dropdownOptions?: Partial<SelectOptionProps>[];
|
||||||
needsUpgrade?: boolean;
|
isFeatureEnabled?: boolean;
|
||||||
tooltip?: string;
|
tooltip?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -95,7 +95,6 @@ export interface Category {
|
||||||
children?: Category[];
|
children?: Category[];
|
||||||
icon?: string;
|
icon?: string;
|
||||||
categoryType: string;
|
categoryType: string;
|
||||||
needsUpgrade?: boolean;
|
|
||||||
isEnterprise?: boolean;
|
isEnterprise?: boolean;
|
||||||
isFeatureEnabled?: boolean;
|
isFeatureEnabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
@ -136,7 +135,6 @@ export type AdminConfigType = {
|
||||||
isConnected?: boolean;
|
isConnected?: boolean;
|
||||||
needsRefresh?: boolean;
|
needsRefresh?: boolean;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
needsUpgrade?: boolean;
|
|
||||||
categoryType: CategoryType;
|
categoryType: CategoryType;
|
||||||
isEnterprise?: boolean;
|
isEnterprise?: boolean;
|
||||||
isFeatureEnabled?: boolean;
|
isFeatureEnabled?: boolean;
|
||||||
|
|
|
||||||
|
|
@ -14,5 +14,5 @@ export const config: AdminConfigType = {
|
||||||
component: AccessControlUpgradePage,
|
component: AccessControlUpgradePage,
|
||||||
title: "Access Control",
|
title: "Access Control",
|
||||||
canSave: false,
|
canSave: false,
|
||||||
needsUpgrade: true,
|
isFeatureEnabled: false,
|
||||||
} as AdminConfigType;
|
} as AdminConfigType;
|
||||||
|
|
|
||||||
|
|
@ -52,6 +52,7 @@ export type PageProps = RouteComponentProps<{
|
||||||
export const MembersWrapper = styled.div<{
|
export const MembersWrapper = styled.div<{
|
||||||
isMobile?: boolean;
|
isMobile?: boolean;
|
||||||
}>`
|
}>`
|
||||||
|
&.members-wrapper {
|
||||||
${(props) => (props.isMobile ? "width: 100%; margin: auto" : null)}
|
${(props) => (props.isMobile ? "width: 100%; margin: auto" : null)}
|
||||||
table {
|
table {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
|
|
@ -105,6 +106,7 @@ export const MembersWrapper = styled.div<{
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const UserCardContainer = styled.div`
|
export const UserCardContainer = styled.div`
|
||||||
|
|
@ -472,7 +474,11 @@ export default function MemberSettings(props: PageProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MembersWrapper data-testid="t--members-wrapper" isMobile={isMobile}>
|
<MembersWrapper
|
||||||
|
className="members-wrapper"
|
||||||
|
data-testid="t--members-wrapper"
|
||||||
|
isMobile={isMobile}
|
||||||
|
>
|
||||||
<>
|
<>
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<Table
|
<Table
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ type CheckboxProps = {
|
||||||
label?: React.ReactNode;
|
label?: React.ReactNode;
|
||||||
id?: string;
|
id?: string;
|
||||||
isDisabled?: boolean;
|
isDisabled?: boolean;
|
||||||
needsUpgrade?: boolean;
|
isFeatureEnabled?: boolean;
|
||||||
text: string;
|
text: string;
|
||||||
labelSuffix?: React.ReactElement;
|
labelSuffix?: React.ReactElement;
|
||||||
isPropertyDisabled?: boolean;
|
isPropertyDisabled?: boolean;
|
||||||
|
|
@ -85,7 +85,7 @@ export function CheckboxComponent({ setting }: SettingComponentProps) {
|
||||||
>
|
>
|
||||||
{setting.label}
|
{setting.label}
|
||||||
</Text>
|
</Text>
|
||||||
{setting.needsUpgrade && <BusinessTag />}
|
{setting.isFeatureEnabled === false && <BusinessTag />}
|
||||||
</div>
|
</div>
|
||||||
<Field
|
<Field
|
||||||
component={FieldCheckboxWithCheckboxText({
|
component={FieldCheckboxWithCheckboxText({
|
||||||
|
|
@ -93,7 +93,7 @@ export function CheckboxComponent({ setting }: SettingComponentProps) {
|
||||||
text: setting.text || "",
|
text: setting.text || "",
|
||||||
id: setting.id,
|
id: setting.id,
|
||||||
isDisabled: setting.isDisabled && setting.isDisabled(settings),
|
isDisabled: setting.isDisabled && setting.isDisabled(settings),
|
||||||
needsUpgrade: setting.needsUpgrade,
|
isFeatureEnabled: setting.isFeatureEnabled,
|
||||||
labelSuffix: setting.textSuffix,
|
labelSuffix: setting.textSuffix,
|
||||||
isPropertyDisabled: isTenantConfig(setting.id)
|
isPropertyDisabled: isTenantConfig(setting.id)
|
||||||
? false
|
? false
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,6 @@ export class ConfigFactory {
|
||||||
slug: config.type,
|
slug: config.type,
|
||||||
subText: config.subText,
|
subText: config.subText,
|
||||||
categoryType: config.categoryType,
|
categoryType: config.categoryType,
|
||||||
needsUpgrade: config.needsUpgrade,
|
|
||||||
isEnterprise: config.isEnterprise,
|
isEnterprise: config.isEnterprise,
|
||||||
needsRefresh: config.needsRefresh,
|
needsRefresh: config.needsRefresh,
|
||||||
isFeatureEnabled: config.isFeatureEnabled,
|
isFeatureEnabled: config.isFeatureEnabled,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user