added default sorting arrow visualization.

talhainvenxion · talhainvenxion · commit 40f0d3f13250 · 2022-10-25T21:57:32.000+05:00
diff --git a/src/ui/layouts/pipelines/PipelineDetail/index.tsx b/src/ui/layouts/pipelines/PipelineDetail/index.tsx
@@ -123,7 +123,7 @@ export const PipelineDetail: React.FC = () => {
           </Paragraph>
         </Box>
         <Box>
-          <Paragraph style={headStyle}>CREATED AT</Paragraph>
+          <Paragraph style={headStyle}>CREATED</Paragraph>
           <Paragraph style={{ color: '#515151', marginTop: '10px' }}>
             {formatDateForOverviewBar(pipeline.created)}
           </Paragraph>
diff --git a/src/ui/layouts/pipelines/Pipelines/List/ForSorting/types.ts b/src/ui/layouts/pipelines/Pipelines/List/ForSorting/types.ts
@@ -4,6 +4,7 @@ export type Sorting =
   | 'status'
   | 'user.name'
   | 'datasourceCommit'
-  | 'created';
+  | 'created'
+  | 'createdAt';
 
 export type SortingDirection = 'ASC' | 'DESC';
diff --git a/src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx b/src/ui/layouts/pipelines/Pipelines/List/getHeaderCols.tsx
@@ -241,7 +241,7 @@ export const GetHeaderCols = ({
           activeSortingDirection={activeSortingDirection}
         >
           <Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
-            CREATED
+            CREATED AT
           </Paragraph>
         </SortingHeader>
       ),
diff --git a/src/ui/layouts/pipelines/Pipelines/List/useService.ts b/src/ui/layouts/pipelines/Pipelines/List/useService.ts
@@ -41,7 +41,7 @@ export const useService = (
   }[],
 ): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    null,
+    'created',
   );
   const [
     activeSortingDirection,
@@ -58,19 +58,11 @@ export const useService = (
   const pipelines = useSelector(pipelineSelectors.myPipelines);
 
   useEffect(() => {
-    console.log('activeSorting', activeSorting);
-    console.log('activeSorting', activeSortingDirection);
-
-    let orderedPipelines =
-      activeSorting === null
-        ? _.sortBy(pipelines, (pipeline: TPipeline) =>
-            new Date(pipeline.created).getTime(),
-          ).reverse()
-        : _.orderBy(
-            pipelines,
-            [activeSorting],
-            [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
-          );
+    let orderedPipelines = _.orderBy(
+      pipelines,
+      [activeSorting],
+      [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
+    );
 
     const isValidFilter = filter.map((f) => f.value).join('');
     if (isValidFilter) {
diff --git a/src/ui/layouts/pipelines/RunDetail/index.tsx b/src/ui/layouts/pipelines/RunDetail/index.tsx
@@ -171,7 +171,7 @@ export const RunDetail: React.FC = () => {
           </Paragraph>
         </Box>
         <Box>
-          <Paragraph style={headStyle}>CREATED AT</Paragraph>
+          <Paragraph style={headStyle}>CREATED</Paragraph>
           <Paragraph style={{ color: '#515151', marginTop: '10px' }}>
             {formatDateForOverviewBar(run.created)}
           </Paragraph>
diff --git a/src/ui/layouts/pipelines/RunsTable/HeaderCols/index.tsx b/src/ui/layouts/pipelines/RunsTable/HeaderCols/index.tsx
@@ -169,8 +169,8 @@ export const useHeaderCols = ({
         {
           render: () => (
             <SortingHeader
-              sorting="createdAt"
-              sortMethod={sortMethod('createdAt', {
+              sorting="created"
+              sortMethod={sortMethod('created', {
                 asc: (runs: TRun[]) =>
                   _.orderBy(
                     runs,
@@ -192,7 +192,7 @@ export const useHeaderCols = ({
                 color="black"
                 style={{ fontSize: '12px' }}
               >
-                CREATED AT
+                CREATED
               </Paragraph>
             </SortingHeader>
           ),
@@ -499,8 +499,8 @@ export const useHeaderCols = ({
         {
           render: () => (
             <SortingHeader
-              sorting="createdAt"
-              sortMethod={sortMethod('createdAt', {
+              sorting="created"
+              sortMethod={sortMethod('created', {
                 asc: (runs: TRun[]) =>
                   _.orderBy(
                     runs,
diff --git a/src/ui/layouts/pipelines/RunsTable/useService.ts b/src/ui/layouts/pipelines/RunsTable/useService.ts
@@ -39,7 +39,7 @@ export const useService = ({
 }): ServiceInterface => {
   const dispatch = useDispatch();
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    null,
+    'created',
   );
 
   const [
@@ -53,22 +53,11 @@ export const useService = ({
     : useSelector(runSelectors.forRunIds(runIds));
 
   useEffect(() => {
-    // let orderedRuns = _.sortBy(runs, (run: TRun) =>
-    //   new Date(run.created).getTime(),
-    // ).reverse();
-    console.log('activeSorting', activeSorting);
-    console.log('activeSorting', activeSortingDirection);
-
-    let orderedRuns =
-      activeSorting === null
-        ? _.sortBy(runs, (run: TRun) =>
-            new Date(run.created).getTime(),
-          ).reverse()
-        : _.orderBy(
-            runs,
-            [activeSorting],
-            [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
-          );
+    let orderedRuns = _.orderBy(
+      runs,
+      [activeSorting],
+      [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
+    );
 
     const isValidFilter = filter?.map((f) => f.value).join('');
     if (isValidFilter) {
diff --git a/src/ui/layouts/runs/RunDetail/index.tsx b/src/ui/layouts/runs/RunDetail/index.tsx
@@ -157,7 +157,7 @@ export const RunDetail: React.FC = () => {
           </Paragraph>
         </Box>
         <Box>
-          <Paragraph style={headStyle}>CREATED AT</Paragraph>
+          <Paragraph style={headStyle}>CREATED</Paragraph>
           <Paragraph style={{ color: '#515151', marginTop: '10px' }}>
             {formatDateForOverviewBar(run.created)}
           </Paragraph>
diff --git a/src/ui/layouts/runs/RunsTable/HeaderCols/index.tsx b/src/ui/layouts/runs/RunsTable/HeaderCols/index.tsx
@@ -166,8 +166,8 @@ export const useHeaderCols = ({
     {
       render: () => (
         <SortingHeader
-          sorting="createdAt"
-          sortMethod={sortMethod('createdAt', {
+          sorting="created"
+          sortMethod={sortMethod('created', {
             asc: (runs: TRun[]) =>
               _.orderBy(runs, (run: TRun) => new Date(run.created).getTime(), [
                 'asc',
@@ -181,7 +181,7 @@ export const useHeaderCols = ({
           activeSortingDirection={activeSortingDirection}
         >
           <Paragraph size="small" color="black">
-            CREATED ATaaaa
+            CREATED
           </Paragraph>
         </SortingHeader>
       ),
diff --git a/src/ui/layouts/runs/RunsTable/useService.ts b/src/ui/layouts/runs/RunsTable/useService.ts
@@ -21,7 +21,7 @@ interface ServiceInterface {
 export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
   const dispatch = useDispatch();
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    'createdAt',
+    'created',
   );
   const [
     activeSortingDirection,
@@ -32,11 +32,13 @@ export const useService = ({ runIds }: { runIds: TId[] }): ServiceInterface => {
   const runs = useSelector(runSelectors.forRunIds(runIds));
 
   useEffect(() => {
-    const orderedRuns = _.sortBy(runs, (run: TRun) =>
-      new Date(run.created).getTime(),
-    ).reverse();
+    const orderedRuns = _.orderBy(
+      runs,
+      [activeSorting],
+      [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
+    );
 
-    setSortedRuns(orderedRuns);
+    setSortedRuns(orderedRuns as TRun[]);
   }, []);
 
   const setSelectedRunIds = (runIds: TId[]) => {
diff --git a/src/ui/layouts/runs/Stacks/List/getHeaderCols.tsx b/src/ui/layouts/runs/Stacks/List/getHeaderCols.tsx
@@ -127,7 +127,7 @@ export const getHeaderCols = ({
     {
       render: () => (
         <Paragraph size="small" color="black">
-          CREATED AT
+          CREATED
         </Paragraph>
       ),
       width: '8%',
diff --git a/src/ui/layouts/settings/Organization/useHeaderCols.tsx b/src/ui/layouts/settings/Organization/useHeaderCols.tsx
@@ -178,8 +178,8 @@ export const useMemberHeaderCols = ({
     {
       render: () => (
         <SortingHeader
-          sorting="createdAt"
-          sortMethod={sortMethod('createdAt', {
+          sorting="created"
+          sortMethod={sortMethod('created', {
             asc: (filteredMembers: TMember[]) =>
               _.orderBy(
                 filteredMembers,
diff --git a/src/ui/layouts/settings/Organization/useService.ts b/src/ui/layouts/settings/Organization/useService.ts
@@ -30,25 +30,26 @@ interface filterValue {
 }
 
 export const useService = (): ServiceInterface => {
+  const [filteredMembers, setFilteredMembers] = useState<TMember[]>([]);
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    'createdAt',
+    'created',
   );
   const [
     activeSortingDirection,
     setActiveSortingDirection,
   ] = React.useState<SortingDirection | null>('DESC');
   const dispatch = useDispatch();
 
-  const [filteredMembers, setFilteredMembers] = useState<TMember[]>([]);
-
   const members = useSelector(organizationSelectors.myMembers);
 
   useEffect(() => {
-    let filteredMembers = _.sortBy(members, (stack: TMember) =>
-      new Date(stack.created).getTime(),
-    ).reverse();
+    let filteredMembers = _.orderBy(
+      members,
+      [activeSorting],
+      [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
+    );
 
-    setFilteredMembers(filteredMembers);
+    setFilteredMembers(filteredMembers as any);
   }, [members]);
 
   const setSelectedRunIds = (runIds: TId[]) => {
diff --git a/src/ui/layouts/stackComponents/RunDetail/index.tsx b/src/ui/layouts/stackComponents/RunDetail/index.tsx
@@ -162,7 +162,7 @@ export const RunDetail: React.FC = () => {
           </Paragraph>
         </Box>
         <Box>
-          <Paragraph style={headStyle}>CREATED AT</Paragraph>
+          <Paragraph style={headStyle}>CREATED</Paragraph>
           <Paragraph style={{ color: '#515151', marginTop: '10px' }}>
             {formatDateForOverviewBar(run.created)}
           </Paragraph>
diff --git a/src/ui/layouts/stackComponents/RunsTable/HeaderCols/index.tsx b/src/ui/layouts/stackComponents/RunsTable/HeaderCols/index.tsx
@@ -276,8 +276,8 @@ export const useHeaderCols = ({
     {
       render: () => (
         <SortingHeader
-          sorting="createdAt"
-          sortMethod={sortMethod('createdAt', {
+          sorting="created"
+          sortMethod={sortMethod('created', {
             asc: (runs: TRun[]) =>
               _.orderBy(runs, (run: TRun) => new Date(run.created).getTime(), [
                 'asc',
diff --git a/src/ui/layouts/stackComponents/RunsTable/useService.ts b/src/ui/layouts/stackComponents/RunsTable/useService.ts
@@ -37,7 +37,7 @@ export const useService = ({
 }): ServiceInterface => {
   const dispatch = useDispatch();
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    null,
+    'created',
   );
   const [
     activeSortingDirection,
@@ -51,22 +51,17 @@ export const useService = ({
     // let orderedRuns = _.sortBy(runs, (run: TRun) =>
     //   new Date(run.created).getTime(),
     // ).reverse();
-    let orderedRuns =
-      activeSorting === null
-        ? _.sortBy(runs, (run: TRun) =>
-            new Date(run.created).getTime(),
-          ).reverse()
-        : _.orderBy(
-            runs,
-            [activeSorting],
-            [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
-          );
+    let orderedRuns = _.orderBy(
+      runs,
+      [activeSorting],
+      [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
+    );
 
     const isValidFilter = filter.map((f) => f.value).join('');
     if (isValidFilter) {
       orderedRuns = getFilteredDataForTable(orderedRuns, filter);
     }
-    setSortedRuns(orderedRuns);
+    setSortedRuns(orderedRuns as TRun[]);
   }, [filter]);
 
   const setSelectedRunIds = (runIds: TId[]) => {
diff --git a/src/ui/layouts/stackComponents/StackDetail/index.tsx b/src/ui/layouts/stackComponents/StackDetail/index.tsx
@@ -104,7 +104,7 @@ export const StackDetail: React.FC = () => {
     display: 'flex',
     justifyContent: 'space-around',
   };
-  const headStyle = { color: '#828282', fontSize: '12px' };
+  const headStyle = { color: '#828282' };
   const paraStyle = { color: '#515151', marginTop: '10px' };
 
   return (
diff --git a/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx b/src/ui/layouts/stackComponents/Stacks/List/getHeaderCols.tsx
@@ -284,8 +284,8 @@ export const GetHeaderCols = ({
     {
       render: () => (
         <SortingHeader
-          sorting="createdAt"
-          sortMethod={sortMethod('createdAt', {
+          sorting="created"
+          sortMethod={sortMethod('created', {
             asc: (filteredStacks: TStack[]) =>
               _.orderBy(
                 filteredStacks,
@@ -303,7 +303,7 @@ export const GetHeaderCols = ({
           activeSortingDirection={activeSortingDirection}
         >
           <Paragraph size="small" color="black" style={{ fontSize: '12px' }}>
-            CREATED
+            CREATED AT
           </Paragraph>
         </SortingHeader>
       ),
diff --git a/src/ui/layouts/stackComponents/Stacks/List/useService.ts b/src/ui/layouts/stackComponents/Stacks/List/useService.ts
@@ -43,7 +43,7 @@ export const useService = (
   }[],
 ): ServiceInterface => {
   const [activeSorting, setActiveSorting] = React.useState<Sorting | null>(
-    null,
+    'created',
   );
   const [
     activeSortingDirection,
@@ -61,23 +61,18 @@ export const useService = (
   );
 
   useEffect(() => {
-    let orderedStacks =
-      activeSorting === null
-        ? _.sortBy(stackComponents, (stack: TStack) =>
-            new Date(stack.created).getTime(),
-          ).reverse()
-        : _.orderBy(
-            stackComponents,
-            [activeSorting],
-            [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
-          );
+    let orderedStacks = _.orderBy(
+      stackComponents,
+      [activeSorting],
+      [activeSortingDirection === 'DESC' ? 'desc' : 'asc'],
+    );
 
     const isValidFilter = filter.map((f) => f.value).join('');
     if (isValidFilter) {
       orderedStacks = getFilteredDataForTable(orderedStacks, filter);
     }
 
-    setFilteredStacks(orderedStacks);
+    setFilteredStacks(orderedStacks as TStack[]);
   }, [stackComponents, filter]);
 
   useEffect(() => {
diff --git a/src/ui/layouts/stacks/RunDetail/index.tsx b/src/ui/layouts/stacks/RunDetail/index.tsx
@@ -166,7 +166,7 @@ export const RunDetail: React.FC = () => {
           </Paragraph>
         </Box>
         <Box>
-          <Paragraph style={headStyle}>CREATED AT</Paragraph>
+          <Paragraph style={headStyle}>CREATED</Paragraph>
           <Paragraph style={{ color: '#515151', marginTop: '10px' }}>
             {formatDateForOverviewBar(run.created)}
           </Paragraph>
diff --git a/src/ui/layouts/stacks/RunsTable/HeaderCols/index.tsx b/src/ui/layouts/stacks/RunsTable/HeaderCols/index.tsx
diff --git a/src/ui/layouts/stacks/RunsTable/types copy.ts b/src/ui/layouts/stacks/RunsTable/types copy.ts
diff --git a/src/ui/layouts/stacks/RunsTable/useService.ts b/src/ui/layouts/stacks/RunsTable/useService.ts
diff --git a/src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx b/src/ui/layouts/stacks/Stacks/List/getHeaderCols.tsx
diff --git a/src/ui/layouts/stacks/Stacks/List/useService.ts b/src/ui/layouts/stacks/Stacks/List/useService.ts

Original file line number	Diff line number	Diff line change
`@@ -241,7 +241,7 @@ export const GetHeaderCols = ({`
`241`	`241`	`activeSortingDirection={activeSortingDirection}`
`242`	`242`	`>`
`243`	`243`	`<Paragraph size="small" color="black" style={{ fontSize: '12px' }}>`
`244`		`- CREATED`
	`244`	`+ CREATED AT`
`245`	`245`	`</Paragraph>`
`246`	`246`	`</SortingHeader>`
`247`	`247`	`),`