chore: enabled module and cycle display properties in module and cycle issues (#3885)

This commit is contained in:
guru_sainath 2024-03-06 19:27:04 +05:30 committed by GitHub
parent 66f2492e60
commit dd579f83ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 62 deletions

View File

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";
// components // components
import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue"; import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue";
import { IIssueDisplayProperties } from "@plane/types"; import { IIssueDisplayProperties } from "@plane/types";
@ -14,19 +13,10 @@ type Props = {
}; };
export const FilterDisplayProperties: React.FC<Props> = observer((props) => { export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
const router = useRouter();
const { moduleId, cycleId } = router.query;
const { displayProperties, handleUpdate } = props; const { displayProperties, handleUpdate } = props;
const [previewEnabled, setPreviewEnabled] = React.useState(true); const [previewEnabled, setPreviewEnabled] = React.useState(true);
const handleDisplayPropertyVisibility = (key: keyof IIssueDisplayProperties): boolean => {
const visibility = true;
if (key === "modules" && moduleId) return false;
if (key === "cycle" && cycleId) return false;
return visibility;
};
return ( return (
<> <>
<FilterHeader <FilterHeader
@ -36,27 +26,24 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
/> />
{previewEnabled && ( {previewEnabled && (
<div className="mt-1 flex flex-wrap items-center gap-2"> <div className="mt-1 flex flex-wrap items-center gap-2">
{ISSUE_DISPLAY_PROPERTIES.map( {ISSUE_DISPLAY_PROPERTIES.map((displayProperty) => (
(displayProperty) => <button
handleDisplayPropertyVisibility(displayProperty?.key) && ( key={displayProperty.key}
<button type="button"
key={displayProperty.key} className={`rounded border px-2 py-0.5 text-xs transition-all ${
type="button" displayProperties?.[displayProperty.key]
className={`rounded border px-2 py-0.5 text-xs transition-all ${ ? "border-custom-primary-100 bg-custom-primary-100 text-white"
displayProperties?.[displayProperty.key] : "border-custom-border-200 hover:bg-custom-background-80"
? "border-custom-primary-100 bg-custom-primary-100 text-white" }`}
: "border-custom-border-200 hover:bg-custom-background-80" onClick={() =>
}`} handleUpdate({
onClick={() => [displayProperty.key]: !displayProperties?.[displayProperty.key],
handleUpdate({ })
[displayProperty.key]: !displayProperties?.[displayProperty.key], }
}) >
} {displayProperty.title}
> </button>
{displayProperty.title} ))}
</button>
)
)}
</div> </div>
)} )}
</> </>

View File

@ -52,7 +52,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
const { getStateById } = useProjectState(); const { getStateById } = useProjectState();
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, cycleId, moduleId } = router.query; const { workspaceSlug } = router.query;
const currentLayout = `${activeLayout} layout`; const currentLayout = `${activeLayout} layout`;
// derived values // derived values
const stateDetails = getStateById(issue.state_id); const stateDetails = getStateById(issue.state_id);
@ -328,38 +328,34 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
</WithDisplayPropertiesHOC> </WithDisplayPropertiesHOC>
{/* modules */} {/* modules */}
{moduleId === undefined && ( <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules"> <div className="h-5">
<div className="h-5"> <ModuleDropdown
<ModuleDropdown projectId={issue?.project_id}
projectId={issue?.project_id} value={issue?.module_ids ?? []}
value={issue?.module_ids ?? []} onChange={handleModule}
onChange={handleModule} disabled={isReadOnly}
disabled={isReadOnly} multiple
multiple buttonVariant="border-with-text"
buttonVariant="border-with-text" showCount
showCount showTooltip
showTooltip />
/> </div>
</div> </WithDisplayPropertiesHOC>
</WithDisplayPropertiesHOC>
)}
{/* cycles */} {/* cycles */}
{cycleId === undefined && ( <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle"> <div className="h-5 truncate">
<div className="h-5 truncate"> <CycleDropdown
<CycleDropdown projectId={issue?.project_id}
projectId={issue?.project_id} value={issue?.cycle_id}
value={issue?.cycle_id} onChange={handleCycle}
onChange={handleCycle} disabled={isReadOnly}
disabled={isReadOnly} buttonVariant="border-with-text"
buttonVariant="border-with-text" showTooltip
showTooltip />
/> </div>
</div> </WithDisplayPropertiesHOC>
</WithDisplayPropertiesHOC>
)}
{/* estimates */} {/* estimates */}
{areEstimatesEnabledForCurrentProject && ( {areEstimatesEnabledForCurrentProject && (