feat: LSDV: 5016 Outliner manual group sort order arrow (#1343)

* feat: lsdv-5016: Shorten display name, add sort arrow button

* fix manuel label

Author: Travis1282

src/components/SidePanels/OutlinerPanel/ViewControls.styl

@@ -12,6 +12,9 @@
   background-color #fff
   box-shadow 0 1px 0 rgba(#000, 0.1)
 
+  &__sort
+    display flex
+    
   &__label
     width 100%
     display flex

src/components/SidePanels/OutlinerPanel/ViewControls.tsx

@@ -39,21 +39,21 @@ export const ViewControls: FC<ViewControlsProps> = ({
   onFilterChange,
 }) => {
   const context = useContext(SidePanelsContext);
-  const getGrouppingLabels = useCallback((value: GroupingOptions): LabelInfo => {
+  const getGroupingLabels = useCallback((value: GroupingOptions): LabelInfo => {
     switch(value) {
       case 'manual': return {
         label: 'Group Manually',
-        selectedLabel: 'Manual Grouping',
+        selectedLabel: isFF(FF_DEV_3873) ? 'Manual': 'Manual Grouping',
         icon: <IconList/>,
       };
       case 'label': return {
         label: 'Group by Label',
-        selectedLabel: 'Grouped by Label',
+        selectedLabel:  isFF(FF_DEV_3873) ? 'Label': 'Grouped by Label',
         icon: <IconTagAlt/>,
       };
       case 'type': return {
         label: 'Group by Tool',
-        selectedLabel: 'Grouped by Tool',
+        selectedLabel:  isFF(FF_DEV_3873) ? 'Tool': 'Grouped by Tool',
         icon: <IconCursor/>,
       };
     }
@@ -80,32 +80,50 @@ export const ViewControls: FC<ViewControlsProps> = ({
         value={grouping}
         options={['manual', 'type', 'label']}
         onChange={value => onGroupingChange(value)}
-        readableValueForKey={getGrouppingLabels}
+        readableValueForKey={getGroupingLabels}
       />
       {grouping === 'manual' && (
-        <Grouping
-          value={ordering}
-          direction={orderingDirection}
-          options={['score', 'date']}
-          onChange={value => onOrderingChange(value)}
-          readableValueForKey={getOrderingLabels}
-          allowClickSelected
-        />
+        <Elem name="sort">
+          <Grouping
+            value={ordering}
+            direction={orderingDirection}
+            options={['score', 'date']}
+            onChange={value => onOrderingChange(value)}
+            readableValueForKey={getOrderingLabels}
+            allowClickSelected
+          />
+          {isFF(FF_DEV_3873) && (
+            <Button
+              type="text"
+              icon={
+                orderingDirection === 'asc' ? (
+                  <IconSortUp style={{ color: '#898098' }} />
+                ) : (
+                  <IconSortDown style={{ color: '#898098' }} />
+                )
+              }
+              style={{ padding: 0, whiteSpace: 'nowrap' }}
+              onClick={() => onOrderingChange(ordering)}
+            />
+          )}
+        </Elem>
       )}
       {isFF(FF_DEV_3873) && (
         <Filter
           onChange={onFilterChange}
           filterData={regions?.regions}
-          availableFilters={[{
-            label: 'Annotation results',
-            path: 'labelName',
-            type: 'String',
-          },
-          {
-            label: 'Confidence score',
-            path: 'score',
-            type: 'Number',
-          }]}
+          availableFilters={[
+            {
+              label: 'Annotation results',
+              path: 'labelName',
+              type: 'String',
+            },
+            {
+              label: 'Confidence score',
+              path: 'score',
+              type: 'Number',
+            },
+          ]}
         />
       )}
     </Block>