datajunction-ui 0.0.16 → 0.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/NamespacePage/NodeModeSelect.jsx

@@ -0,0 +1,27 @@
+import Select from 'react-select';
+import Control from './FieldControl';
+
+export default function NodeModeSelect({ onChange }) {
+  return (
+    <span
+      className="menu-link"
+      style={{ marginLeft: '30px', width: '300px' }}
+      data-testid="select-node-mode"
+    >
+      <Select
+        name="node_mode"
+        isClearable
+        label="Mode"
+        components={{ Control }}
+        onChange={e => onChange(e)}
+        styles={{
+          control: styles => ({ ...styles, backgroundColor: 'white' }),
+        }}
+        options={[
+          { value: 'published', label: 'Published' },
+          { value: 'draft', label: 'Draft' },
+        ]}
+      />
+    </span>
+  );
+}

package/src/app/pages/NamespacePage/NodeTypeSelect.jsx

@@ -11,7 +11,7 @@ export default function NodeTypeSelect({ onChange }) {
       <Select
         name="node_type"
         isClearable
-        label="Node Type"
+        label="Type"
         components={{ Control }}
         onChange={e => onChange(e)}
         styles={{

package/src/app/pages/NamespacePage/__tests__/index.test.jsx

@@ -114,6 +114,7 @@ describe('NamespacePage', () => {
                 current: {
                   displayName: 'Test Node',
                   status: 'VALID',
+                  mode: 'PUBLISHED',
                   updatedAt: '2024-10-18T15:15:33.532949+00:00',
                 },
                 createdBy: {

package/src/app/pages/NamespacePage/index.jsx

@@ -11,6 +11,7 @@ import FilterIcon from '../../icons/FilterIcon';
 import LoadingIcon from '../../icons/LoadingIcon';
 import UserSelect from './UserSelect';
 import NodeTypeSelect from './NodeTypeSelect';
+import NodeModeSelect from './NodeModeSelect';
 import TagSelect from './TagSelect';
 
 import 'styles/node-list.css';
@@ -20,7 +21,7 @@ export function NamespacePage() {
   const ASC = 'ascending';
   const DESC = 'descending';
 
-  const fields = ['name', 'displayName', 'type', 'status', 'updatedAt'];
+  const fields = ['name', 'displayName', 'type', 'status', 'mode', 'updatedAt'];
 
   const djClient = useContext(DJClientContext).DataJunctionAPI;
   var { namespace } = useParams();
@@ -36,6 +37,7 @@ export function NamespacePage() {
     tags: [],
     node_type: '',
     edited_by: '',
+    mode: '',
   });
 
   const [namespaceHierarchy, setNamespaceHierarchy] = useState([]);
@@ -122,6 +124,7 @@ export function NamespacePage() {
         after,
         50,
         sortConfig,
+        filters.mode ? filters.mode.toUpperCase() : null,
       );
 
       setState({
@@ -198,6 +201,29 @@ export function NamespacePage() {
           <td>
             <NodeStatus node={node} revalidate={false} />
           </td>
+          <td>
+            <span
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '24px',
+                height: '24px',
+                borderRadius: '50%',
+                border: `2px solid ${
+                  node.current.mode === 'PUBLISHED' ? '#28a745' : '#ffc107'
+                }`,
+                backgroundColor: 'transparent',
+                color:
+                  node.current.mode === 'PUBLISHED' ? '#28a745' : '#d39e00',
+                fontWeight: '600',
+                fontSize: '12px',
+              }}
+              title={node.current.mode === 'PUBLISHED' ? 'Published' : 'Draft'}
+            >
+              {node.current.mode === 'PUBLISHED' ? 'P' : 'D'}
+            </span>
+          </td>
           <td>
             <span className="status">
               {new Date(node.current.updatedAt).toLocaleString('en-us')}
@@ -265,7 +291,7 @@ export function NamespacePage() {
                 marginRight: '10px',
               }}
             >
-              Filter By
+              Filter
             </div>
             <NodeTypeSelect
               onChange={entry =>
@@ -286,6 +312,11 @@ export function NamespacePage() {
               }
               currentUser={currentUser?.username}
             />
+            <NodeModeSelect
+              onChange={entry =>
+                setFilters({ ...filters, mode: entry ? entry.value : '' })
+              }
+            />
             <AddNodeDropdown namespace={namespace} />
           </div>
           <div className="table-responsive">

package/src/app/services/DJService.js

@@ -18,14 +18,16 @@ export const DataJunctionAPI = {
     after,
     limit,
     sortConfig,
+    mode,
   ) {
     const query = `
-      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $before: String, $after: String, $limit: Int, $orderBy: NodeSortField, $ascending: Boolean) {
+      query ListNodes($namespace: String, $nodeTypes: [NodeType!], $tags: [String!], $editedBy: String, $mode: NodeMode, $before: String, $after: String, $limit: Int, $orderBy: NodeSortField, $ascending: Boolean) {
         findNodesPaginated(
           namespace: $namespace
           nodeTypes: $nodeTypes
           tags: $tags
           editedBy: $editedBy
+          mode: $mode
           limit: $limit
           before: $before
           after: $after
@@ -51,6 +53,7 @@ export const DataJunctionAPI = {
               current {
                 displayName
                 status
+                mode
                 updatedAt
               }
               createdBy {
@@ -83,6 +86,7 @@ export const DataJunctionAPI = {
             nodeTypes: nodeTypes,
             tags: tags,
             editedBy: editedBy,
+            mode: mode || null,
             before: before,
             after: after,
             limit: limit,