added pinned functionality to flow listing

glific · Jul 31, 2022 · ae22679 · ae22679
1 parent aa35a0a
commit ae22679
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -141,7 +141,7 @@ export const setColumnToBackendTerms: any = (listName: string, columnName: strin
   };
 
   const additionalItems: any = {
-    flow: { TITLE: 'name' },
+    flow: { TITLE: 'name', ' ': 'is_pinned' },
     trigger: { TITLE: 'name' },
     Search: {
       TITLE: 'shortcode',

diff --git a/src/containers/Flow/FlowList/FlowList.module.css b/src/containers/Flow/FlowList/FlowList.module.css
@@ -7,6 +7,10 @@
   min-width: 200px;
 }
 
+.Pinned {
+  width: 6%;
+}
+
 .Actions {
   justify-content: flex-end;
   margin-left: auto;

diff --git a/src/containers/Flow/FlowList/FlowList.tsx b/src/containers/Flow/FlowList/FlowList.tsx
@@ -48,7 +48,20 @@ const getLastPublished = (date: string, fallback: string = '') =>
     <div className={styles.LastPublishedFallback}>{fallback}</div>
   );
 
-const columnStyles = [styles.Name, styles.DateColumn, styles.DateColumn, styles.Actions];
+const displayPinned = (isPinned: boolean) => {
+  if (isPinned) {
+    return 'Pinned';
+  }
+  return '';
+};
+
+const columnStyles = [
+  styles.Pinned,
+  styles.Name,
+  styles.DateColumn,
+  styles.DateColumn,
+  styles.Actions,
+];
 const flowIcon = <FlowIcon className={styles.FlowIcon} />;
 
 const queries = {
@@ -160,13 +173,14 @@ export const FlowList: React.SFC<FlowListProps> = () => {
     },
   ];
 
-  const getColumns = ({ name, keywords, lastChangedAt, lastPublishedAt }: any) => ({
+  const getColumns = ({ name, keywords, lastChangedAt, lastPublishedAt, isPinned }: any) => ({
+    pin: displayPinned(isPinned),
     name: getName(name, keywords),
     lastPublishedAt: getLastPublished(lastPublishedAt, t('Not published yet')),
     lastChangedAt: getDate(lastChangedAt, t('Nothing in draft')),
   });
 
-  const columnNames = ['TITLE', 'LAST PUBLISHED', 'LAST SAVED IN DRAFT', 'ACTIONS'];
+  const columnNames = [' ', 'TITLE', 'LAST PUBLISHED', 'LAST SAVED IN DRAFT', 'ACTIONS'];
   const dialogMessage = t("You won't be able to use this flow.");
 
   const columnAttributes = {
@@ -195,6 +209,8 @@ export const FlowList: React.SFC<FlowListProps> = () => {
         additionalAction={additionalAction}
         button={{ show: true, label: t('+ Create Flow') }}
         secondaryButton={importButton}
+        defaultSortBy=" "
+        listOrder="desc"
       />
 
       <Link to="/webhook-logs" className={styles.Webhook}>

diff --git a/src/graphql/queries/Flow.ts b/src/graphql/queries/Flow.ts
@@ -44,6 +44,7 @@ export const FILTER_FLOW = gql`
       lastPublishedAt
       ignoreKeywords
       updatedAt
+      isPinned
     }
   }
 `;