[WEB-4118]fix: adjusted sub work item properties for a better visibility (#7079)

* fix: adjusted sub work item properties for a better visibility

* fix: removed projects from sub work item filters

packages/constants/src/issue/filter.ts

@@ -355,7 +355,7 @@ export const ISSUE_DISPLAY_FILTERS_BY_PAGE: TIssueFiltersToDisplayByPageType = {
   sub_work_items: {
     list: {
       display_properties: SUB_ISSUES_DISPLAY_PROPERTIES_KEYS,
-      filters: ["priority", "state", "project", "issue_type", "assignees", "start_date", "target_date"],
+      filters: ["priority", "state", "issue_type", "assignees", "start_date", "target_date"],
       display_filters: {
         order_by: ["-created_at", "-updated_at", "start_date", "-priority"],
         group_by: ["state", "priority", "assignees", null],

web/core/components/dropdowns/state.tsx

@@ -37,6 +37,7 @@ type Props = TDropdownProps & {
   filterAvailableStateIds?: boolean;
   isForWorkItemCreation?: boolean;
   alwaysAllowStateChange?: boolean;
+  iconSize?: string;
 };
 
 export const StateDropdown: React.FC<Props> = observer((props) => {
@@ -60,6 +61,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     value,
     renderByDefault = true,
     stateIds,
+    iconSize = "size-4",
   } = props;
   // states
   const [query, setQuery] = useState("");
@@ -101,7 +103,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
         <StateGroupIcon
           stateGroup={state?.group ?? "backlog"}
           color={state?.color}
-          className="size-4 flex-shrink-0"
+          className={cn("flex-shrink-0", iconSize)}
           percentage={state?.order}
         />
         <span className="flex-grow truncate text-left">{state?.name}</span>
@@ -184,7 +186,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                   <StateGroupIcon
                     stateGroup={selectedState?.group ?? "backlog"}
                     color={selectedState?.color ?? "rgba(var(--color-text-300))"}
-                    className="size-4 flex-shrink-0"
+                    className={cn("flex-shrink-0", iconSize)}
                     percentage={selectedState?.order}
                   />
                 )}

web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx

@@ -62,7 +62,10 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
               )
             }
             disabled={!disabled}
-            buttonVariant="border-with-text"
+            buttonVariant="transparent-without-text"
+            buttonClassName="hover:bg-transparent px-0"
+            iconSize="size-5"
+            showTooltip
           />
         </div>
       </WithDisplayPropertiesHOC>
@@ -80,33 +83,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
             disabled={!disabled}
             buttonVariant="border-without-text"
             buttonClassName="border"
-          />
+            showTooltip
-        </div>
-      </WithDisplayPropertiesHOC>
-
-      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="start_date">
-        <div className="h-5 flex-shrink-0" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
-          <DateDropdown
-            value={issue.start_date ?? null}
-            onChange={(val) =>
-              issue.project_id &&
-              updateSubIssue(
-                workspaceSlug,
-                issue.project_id,
-                parentIssueId,
-                issueId,
-                {
-                  start_date: val ? renderFormattedPayloadDate(val) : null,
-                },
-                { ...issue }
-              )
-            }
-            maxDate={maxDate}
-            placeholder={t("common.order_by.start_date")}
-            icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
-            buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
-            optionsClassName="z-30"
-            disabled={!disabled}
           />
         </div>
       </WithDisplayPropertiesHOC>