PromucFlow_constructor/app/client/src/comments/CommentCard/ResolveCommentButton.tsx
Pranav Kanade b778b83ac4
refactor: admin settings (#9906)
* refactor admin settings feature

* separated save-restart bar to separate component

* created new CE dir to facilitate code split

* created separate ee dir and exporting everything we have in ce file.

* little mod

* minor fix

* splitting settings types config

* using object literals for category types instead of enums

* CE: support use of component for each category

* minor style fix

* authentication page  UI changes implemented

* github signup doc url added back

* removed comments

* routing updates

* made subcategories listing in left pane optional

* added muted saml to auth listing

* added breadcrumbs and enabled button

* created separate component for auth page and auth config

* added callout and disconnect components

* updated breadcrumbs component

* minor updates to common components

* updated warning callout and added icon

* ce: test cases fixed

* updated test file name

* warning banner callout added on auth page

* updated callout banner for form login

* CE: Split config files

* CE: moved the window declaration in EE file as its dependency will be updated in EE

* CE: Splitting ApiConstants and SocialLogin constants

* CE: split login page

* CE: moved getSocialLoginButtonProps func to EE file as it's dependencies will be updated in EE

* added key icon

* CE: created a factory class to share social auths list

* Minor style fix for social btns

* Updated the third party auth styles

* Small fixes to styling

* ce: splitting forms constants

* breadcrumbs implemented for all pages in admin settings

* Settings breadcrumbs separated

* splitted settings breadcrumbs between ce and ee

* renamed default import

* minor style fix

* added login form config.

* updated login/signup pages to use form login disabled config

* removed common functionality outside

* implemented breadcrumb component from scratch without using blueprint

* removed unwanted code

* Small style update

* updated breadcrumb categories file name and breadcrumb icon

* added cypress tests for admin settings auth page

* added comments

* update locator for upgrade button

* added link for intercom on upgrade button

* removed unnecessary file

* minor style fix

* style fix for auth option cards

* split messages constant

* fixed imports for message constants splitting.

* added message constants

* updated unit test cases

* fixed messages import in cypress index

* fixed messages import again, cypress fails to read re-exported objs.

* added OIDC auth method on authentication page

* updated import statements from ee to @appsmith

* removed dead code

* updated read more link UI

* PR comments fixes

* some UI fixes

* used color and fonts from theme

* fixed some imports

* fixed some imports

* removed warning imports

* updated OIDC logo and auth method desc copies

* css changes

* css changes

* css changes

* updated cypress test for breadcrumb

* moved callout component to ads as calloutv2

* UI changes for form fields

* updated css for spacing between form fields

* added sub-text on auth pages

* added active class for breadcrumb item

* added config for disable signup toggle and fixed UI issues of restart banner

* fixed admin settings page bugs

* assigned true as default state for signup

* fixed messages import statements

* updated code for PR comments related suggestions

* reverted file path change in cypress support

* updated cypress test

* updated cypress test

Co-authored-by: Ankita Kinger <ankita@appsmith.com>
2022-02-11 23:38:46 +05:30

83 lines
2.0 KiB
TypeScript

import React from "react";
import styled, { withTheme } from "styled-components";
import Icon, { IconSize } from "components/ads/Icon";
import { Theme } from "constants/DefaultTheme";
import Tooltip from "components/ads/Tooltip";
import {
createMessage,
RESOLVE_THREAD,
RESOLVED_THREAD,
} from "@appsmith/constants/messages";
import { Colors } from "constants/Colors";
const Container = styled.div`
display: flex;
cursor: pointer;
`;
type Props = {
handleClick: () => void;
resolved: boolean;
theme: Theme;
};
const StyledResolveIcon = styled(Icon)<{
resolved: boolean;
strokeColorCircle: string;
strokeColorPath: string;
fillColor: string;
}>`
&& svg {
fill: ${(props) => props.strokeColorCircle};
}
${(props) =>
!props.resolved &&
`
&:hover svg {
fill: ${Colors.CHARCOAL};
}
`}
`;
const ResolveCommentButton = withTheme(
({ handleClick, resolved, theme }: Props) => {
const {
resolved: resolvedColor,
resolvedFill: resolvedFillColor,
resolvedPath: resolvedPathColor,
unresolved: unresolvedColor,
unresolvedFill: unresolvedFillColor,
} = theme.colors.comments;
const strokeColorCircle = resolved ? resolvedColor : unresolvedColor;
const strokeColorPath = resolved ? resolvedPathColor : unresolvedColor;
const fillColor = resolved ? resolvedFillColor : unresolvedFillColor;
const _handleClick = (e: React.MouseEvent) => {
e.stopPropagation();
handleClick();
};
return (
<Container onClick={_handleClick}>
<Tooltip
content={createMessage(resolved ? RESOLVED_THREAD : RESOLVE_THREAD)}
hoverOpenDelay={1000}
>
<StyledResolveIcon
fillColor={fillColor}
keepColors
name={resolved ? "oval-check-fill" : "oval-check"}
resolved={resolved}
size={IconSize.XXL}
strokeColorCircle={strokeColorCircle}
strokeColorPath={strokeColorPath}
/>
</Tooltip>
</Container>
);
},
);
export default ResolveCommentButton;