Skip to content

Commit

Permalink
Merge pull request #7006 from DonOmalVindula/fix/26794
Browse files Browse the repository at this point in the history 
Add tooltips to cog wheel icons in applications page
  • Loading branch information
@DonOmalVindula
DonOmalVindula authored Oct 18, 2024
2 parents fde1c8a + 4a0ad74 commit 9552843
Show file tree
Hide file tree
Showing 6 changed files with 58 additions and 48 deletions.
6 changes: 6 additions & 0 deletions .changeset/young-months-sleep.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@wso2is/admin.applications.v1": patch
"@wso2is/i18n": patch
---

Add labels to settings icons in applications page
14 changes: 5 additions & 9 deletions features/admin.applications.v1/components/edit-application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -385,7 +385,7 @@ export const EditApplication: FunctionComponent<EditApplicationPropsInterface> =
* @param data - Checkbox data.
*/
const handleAppEnableDisableToggleChange = (event: FormEvent<HTMLInputElement>, data: CheckboxProps): void => {
setEnableStatus(data?.checked);
setEnableStatus(!data?.checked);
setShowDisableConfirmationModal(true);
};

Expand Down Expand Up @@ -446,16 +446,12 @@ export const EditApplication: FunctionComponent<EditApplicationPropsInterface> =
sectionHeader={ t("applications:dangerZoneGroup.header") }
>
<DangerZone
actionTitle={ t("applications:dangerZoneGroup.disableApplication.actionTitle",
{ state: application.applicationEnabled ? t("common:disable") : t("common:enable") }) }
header={ t("applications:dangerZoneGroup.disableApplication.header",
{ state: application.applicationEnabled ? t("common:disable") : t("common:enable") } ) }
subheader={ application.applicationEnabled
? t("applications:dangerZoneGroup.disableApplication.subheader")
: t("applications:dangerZoneGroup.disableApplication.subheader2") }
actionTitle={ t("applications:dangerZoneGroup.disableApplication.actionTitle") }
header={ t("applications:dangerZoneGroup.disableApplication.header") }
subheader={ t("applications:dangerZoneGroup.disableApplication.subheader") }
onActionClick={ undefined }
toggle={ {
checked: application.applicationEnabled,
checked: !application.applicationEnabled,
onChange: handleAppEnableDisableToggleChange
} }
data-testid={ `${ componentId }-danger-zone-disable` }
Expand Down
37 changes: 13 additions & 24 deletions features/admin.applications.v1/components/settings/general-application-settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,9 @@
* under the License.
*/

import { Show } from "@wso2is/access-control";
import { Show, useRequiredScopes } from "@wso2is/access-control";
import { AppConstants, AppState, FeatureConfigInterface, UIConfigInterface, history } from "@wso2is/admin.core.v1";
import { applicationConfig } from "@wso2is/admin.extensions.v1";
import { hasRequiredScopes } from "@wso2is/core/helpers";
import { AlertLevels, IdentifiableComponentInterface, SBACInterface } from "@wso2is/core/models";
import { addAlert } from "@wso2is/core/store";
import {
Expand Down Expand Up @@ -145,9 +144,12 @@ export const GeneralApplicationSettings: FunctionComponent<GeneralApplicationSet

const { t } = useTranslation();

const allowedScopes: string = useSelector((state: AppState) => state?.auth?.allowedScopes);
const UIConfig: UIConfigInterface = useSelector((state: AppState) => state?.config?.ui);

const hasApplicationsUpdatePermissions: boolean = useRequiredScopes(
featureConfig?.applications?.scopes?.update
);

const [ showDeleteConfirmationModal, setShowDeleteConfirmationModal ] = useState<boolean>(false);
const [ showDisableConfirmationModal, setShowDisableConfirmationModal ] = useState<boolean>(false);
const [ isSubmitting, setIsSubmitting ] = useState<boolean>(false);
Expand Down Expand Up @@ -247,7 +249,7 @@ export const GeneralApplicationSettings: FunctionComponent<GeneralApplicationSet
* @param data - Checkbox data.
*/
const handleAppEnableDisableToggleChange = (event: FormEvent<HTMLInputElement>, data: CheckboxProps): void => {
setEnableStatus(data.checked);
setEnableStatus(!data.checked);
setShowDisableConfirmationModal(true);
};

Expand Down Expand Up @@ -300,8 +302,7 @@ export const GeneralApplicationSettings: FunctionComponent<GeneralApplicationSet
* @returns React.ReactElement DangerZoneGroup element.
*/
const resolveDangerActions = (): ReactElement => {
if (!hasRequiredScopes(
featureConfig?.applications, featureConfig?.applications?.scopes?.update, allowedScopes)) {
if (!hasApplicationsUpdatePermissions) {
return null;
}

Expand All @@ -323,19 +324,12 @@ export const GeneralApplicationSettings: FunctionComponent<GeneralApplicationSet
>
<Show when={ featureConfig?.applications?.scopes?.update }>
<DangerZone
actionTitle={ t("applications:dangerZoneGroup.disableApplication.actionTitle",
{ state: application.applicationEnabled ?
t("common:disable") : t("common:enable") }) }
header={ t("applications:dangerZoneGroup.disableApplication.header",
{ state: application.applicationEnabled ?
t("common:disable") : t("common:enable") } ) }
subheader={ application.applicationEnabled ?
t("applications:dangerZoneGroup.disableApplication.subheader")
: t("applications:dangerZoneGroup.disableApplication.subheader2") }

actionTitle={ t("applications:dangerZoneGroup.disableApplication.actionTitle") }
header={ t("applications:dangerZoneGroup.disableApplication.header") }
subheader={ t("applications:dangerZoneGroup.disableApplication.subheader") }
onActionClick={ undefined }
toggle={ {
checked: application.applicationEnabled,
checked: !application.applicationEnabled,
onChange: handleAppEnableDisableToggleChange
} }
data-testid={ `${ componentId }-danger-zone-disable` }
Expand Down Expand Up @@ -382,14 +376,9 @@ export const GeneralApplicationSettings: FunctionComponent<GeneralApplicationSet
accessUrl={ accessUrl }
readOnly={
readOnly
|| !hasRequiredScopes(
featureConfig?.applications, featureConfig?.applications?.scopes?.update,
allowedScopes
)
|| !hasApplicationsUpdatePermissions
}
hasRequiredScope={ hasRequiredScopes(
featureConfig?.applications, featureConfig?.applications?.scopes?.update,
allowedScopes) }
hasRequiredScope={ hasApplicationsUpdatePermissions }
isBrandingSectionHidden={ isBrandingSectionHidden }
data-testid={ `${ componentId }-form` }
isSubmitting={ isSubmitting }
Expand Down
36 changes: 27 additions & 9 deletions features/admin.applications.v1/pages/applications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
<GearIcon />
</Button>
) }
content={ t("common:settings") }
content={ t("applications:myaccount.settings") }
position="top center"
size="mini"
hideOnScroll
Expand Down Expand Up @@ -553,10 +553,19 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
ApplicationManagementConstants.FEATURE_DICTIONARY.get("APPLICATIONS_SETTINGS")
) &&
(
<Button
data-componentid={ "applications-settings-button" }
icon={ GearIcon }
onClick={ handleSettingsButton }
<Popup
trigger={ (
<Button
data-componentid={ "applications-settings-button" }
icon={ GearIcon }
onClick={ handleSettingsButton }
/>
) }
content={ t("applications:forms.applicationsSettings.title") }
position="top center"
size="mini"
hideOnScroll
inverted
/>
)
}
Expand All @@ -583,10 +592,19 @@ const ApplicationsPage: FunctionComponent<ApplicationsPageInterface> = (
ApplicationManagementConstants.FEATURE_DICTIONARY.get("APPLICATIONS_SETTINGS")
) &&
(
<Button
data-componentid={ "applications-settings-button" }
icon={ GearIcon }
onClick={ handleSettingsButton }
<Popup
trigger={ (
<Button
data-componentid={ "applications-settings-button" }
icon={ GearIcon }
onClick={ handleSettingsButton }
/>
) }
content={ t("applications:applicationsSettings.title") }
position="top center"
size="mini"
hideOnScroll
inverted
/>
)
}
Expand Down
3 changes: 2 additions & 1 deletion modules/i18n/src/models/namespaces/applications-ns.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,6 @@ export interface ApplicationsNS {
actionTitle: string
header: string;
subheader: string;
subheader2: string
},
};
edit: {
Expand Down Expand Up @@ -1053,6 +1052,7 @@ export interface ApplicationsNS {
};
};
applicationsSettings: {
title: string;
fields :{
dcrEndpoint: {
label: string,
Expand Down Expand Up @@ -2126,6 +2126,7 @@ export interface ApplicationsNS {
};
};
myaccount: {
settings: string;
title: string;
description: string;
popup: string;
Expand Down
10 changes: 5 additions & 5 deletions modules/i18n/src/translations/en-US/portals/applications.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -303,12 +303,10 @@ export const applications: ApplicationsNS = {
"using this application will no longer work."
},
disableApplication: {
actionTitle: "{{ state }} application",
header: "{{ state }} application",
actionTitle: "Disable application",
header: "Disable application",
subheader: "Once the application is disabled, it will not be accessible by the consumers." +
" And the application also can not access consumer data.",
subheader2: "Enable the application to be accessible by the consumers. " +
"After enabling, application can access consumer data"
" And the application also can not access consumer data."
},
header: "Danger Zone"
},
Expand Down Expand Up @@ -1257,6 +1255,7 @@ export const applications: ApplicationsNS = {
},

applicationsSettings: {
title: "Application Settings",
fields: {
dcrEndpoint: {
label: "DCR Endpoint",
Expand Down Expand Up @@ -2461,6 +2460,7 @@ export const applications: ApplicationsNS = {
description: "Self-service portal for your users.",
popup: "Share this link with your users to allow access to My Account" +
" and to manage their accounts.",
settings: "My Account Settings",
title: "My Account",
enable: {
0: "Enabled",
Expand Down

0 comments on commit 9552843

Please sign in to comment.